$x() allows you to select DOM elements using XPATH. So in the earlier example, you just select the element in the Inspect tool and type $0.textContent = "My Playground" to get the same effect. $0 to $4 is a stack of the last inspected elements. So, if you type 2+2 and press Enter, and then type $_, the Console displays 4. $_ stores the result of the last command. The $ has special powers in Console, and you may remember that from jQuery. Some of the methods are incredibly powerful and are much more effective than using console.log() statements. Many convenience methods and shortcuts are available to you as Console Utilities. To make it more convenient, the Console comes with a few helper utility methods. Use any JavaScript DOM manipulations you want in the Console. textContent = "My Playground" to the JavaScript path that you previously pasted: In the Console, paste the JavaScript path that you copied, but don't press Enter yet.Ĭhange the text of the link to My Playground. Right-click the element in the DOM tree and then select Copy > Copy JS Path. menu next to the element in the DOM tree: In DevTools, click the Inspect tool, and then in the rendered webpage, hover over the element:Ĭlick the element on the page, and DevTools jumps to the Elements tool.Ĭlick the. To get a direct reference to the element that you want to manipulate: Suppose you want to manipulate the Documentation region within the header of the rendered page: But you can use the Inspect tool to help you. Paste the following code into the Console: document.querySelector('header').style.border = '2em solid green'Ī green border appears around the header:ĭepending on the complexity of the webpage, it can be daunting to find the right element to manipulate. The Console opens in DevTools, next to the present webpage. Press Ctrl+Shift+J (Windows, Linux) or Command+Option+J (macOS). In this example, you set a value in the DOM by using the Console, to affect the webpage styling: you add a green border around the header. You can manipulate the webpage from the Console, as follows. In the rendered webpage, DevTools highlights the header: In the Console, hover over the resulting HTML element, or press Shift+Tab. Type or paste the following code into the Console, and then press Enter: document.querySelector('header') To do this from a webpage, you can press Ctrl+Shift+J (Windows, Linux) or Command+Option+J (macOS). The Console is like a script-environment version of the Inspect tool. Right click on the part of the web page for which you want to see the source code, then click "Inspect".Īlternatively, to open the inspector without going to a particular part, press Ctrl + Shift + I.The Console tool is a great way to interact with the webpage in the browser. You right click and choose the one that starts with "Inspect". How to open Inspect Element in Windows Browsers (Chrome, Firefox, IE): The process for all the browsers is the same in Windows. If you're only looking at the backend, or in the style.css file, you might miss an important piece of code that completely changes how the user will see that part of the page. The best part is it allows you to see what's going on in the final render of the web page. It's something I use probably more than any other tool. It allows you to quickly jump to the important part of the code to see what's going on there. One of the most useful tools for a web developer is the Inspect Element tool.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |