From the course: JavaScript: Enhancing the DOM (2013)

Unlock the full course today

Join today to access over 22,600 courses taught by industry experts or purchase this course individually.

Navigating the DOM with developer tools

Navigating the DOM with developer tools

From the course: JavaScript: Enhancing the DOM (2013)

Start my 1-month free trial

Navigating the DOM with developer tools

“

If you've been a web developer for any length of time, you've probably peeked at the source code for websites. It's usually under an option in the developer tools in your browser called View Source. The problem with View Source is it only shows you only the original HTML for the page, when it is loaded, as you add and delete elements to use interactions on a page. The DOM grows and shrinks dynamically. That's why most browsers have another option called the Developer Tools. In this movie, we're going to take a look at some of the tools for managing the DOM in Google Chrome. There's a few ways to get to these tools. The most obvious is going through the menus and choosing Developer Tools from the View menu. You may want to remember the keyword shortcut for your machine. I'm using a Mac, so mine is Cmd+Option+I. If you're using a PC, this would be Ctrl+Alt+I. When you first pull up the tools, notice that there's different tabs at the very top. There's tabs like Elements, Resources…

Contents