From the course: Learning Chrome Web Developer Tools
Inspect elements - Chrome Tutorial
From the course: Learning Chrome Web Developer Tools
Inspect elements
- [Instructor] I'm working with my site in the browser. And I'm trying to remember exactly how I coded the Merchandise heading in the HTML. I could switch back to my editor and dig into my code. But Chrome DevTools gives me another option to do this right in the browser without switching apps, the Elements panel. For me, the easiest way to open the Elements panel directly is to use a keyboard shortcut, Ctrl + Shift + C for Windows, or Command + Shift + C on the Mac. This brings focus to the body element. The Elements panel lets me examine the code for the current web page as rendered by the browser. This includes both HTML representing the current DOM, and CSS applied to those elements. If there's a particular element I want to examine, I can go straight to its code in the DOM by right clicking the element and then clicking Inspect on the context menu. I want to check out the code for the Merchandise heading. So I'll right click, and click Inspect. And because it's highlighted, I can easily see that it's an h2, and I can see the class values applied to it. If the DevTools aren't open, selecting Inspect on the context menu opens them, makes Elements the current panel and then highlights the element I selected in the DOM, especially in a webpage structure like this one with a number of levels of nesting. This method saves me time, because it automatically drills down in the HTML to the element I selected, saving me the trouble of clicking the triangle at each level to view the element's children. It's important to note that the Elements panel displays code representing how the current document is rendered in the browser window and not simply the HTML that was loaded. This means that when a page includes any sorts of programmatic transformations, such as data from external sources, content generated using a framework like React, or any changes you've scripted yourself, the code in the Elements panel reflects the result of those changes and not just the contents of the original HTML file. After the Elements panel is open, DevTools provides me a few additional tools for examining DOM nodes. As I move the mouse pointer through the DOM in the Elements panel, the element that the pointer is over is highlighted in the browser window. The highlighted block includes colors that show at a glance, the content in blue, padding in green, and margins in orange. This element doesn't have any padding, so there's only blue and orange. But here, this div, we can see the blue around the content and the top, there's some padding, and then on the sides, there's that orange margin. And there's a screen tip that's also displayed at the top left of the element showing its element type and the properties applied to it. And this behavior works in reverse as well. This button in the top left corner of the DevTools, lets me do just what its screen tip says, select an element in the page to inspect it. I'll click the button to activate it, and now it's blue. And then as I move my pointer around the browser window, the element I'm pointing to is highlighted using that three color scheme. And it displays that same screen tip as before. In addition, the view in the Elements panel changes to reveal the code for the element I'm pointing to. And if I'm not sure quite where the element I'm looking for is, maybe I have a big page, DevTools has one more trick, with the Elements panel selected, I can press Command + F on Mac, or Ctrl + F on Windows to open a search box that lets me search the DOM. Now I have a note that I used the color f0c808, but I don't remember where. So I'll press Command + F on my Mac, and down here at the bottom, I have my search box, and I'll type f0c808, and I can see right here that I have five hits, and the Elements panel scrolls to highlight the first one in the DOM code in yellow. And if I hover over that code, the element is highlighted. Right, that's where I used it, the navbar buttons. So the Elements panel gives me a visual way to explore the result of the code I've written in the browser, and it offers a few different ways to do that.
Practice while you learn with exercise files
Download the files the instructor uses to teach the course. Follow along and learn by watching, listening and practicing.
Download courses and learn on the go
Watch courses on your mobile device without an internet connection. Download courses using your iOS or Android LinkedIn Learning app.