From the course: Learning Chrome Web Developer Tools
Join today to access over 22,600 courses taught by industry experts or purchase this course individually.
Examine elements in the Console - Chrome Tutorial
From the course: Learning Chrome Web Developer Tools
Examine elements in the Console
- [Instructor] I'm working on the Binaryville site, and I want to dig into the structure and view the nesting of elements in the nav bar. I can do that in the Elements panel, but I sometimes find it distracting to have all the code for the rest of the page there when I only want to look at one section. One alternative to viewing this in the Elements panel is to use the Console where I can enter JavaScript code to select an element. So I'll enter document.querySelector nav, and the returned value is the dom representation of the nav element with a triangle icon on the left that I can use to drill down into the hierarchy. So opening that up, I've got that h2, a div, and I can just keep digging in, just like I would in the elements panel but without all of the other elements on the page. When I'm spending a lot of time at the command line, sometimes it makes more sense for me to just do this here to look at the code, rather…
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.