Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
In the last movie, we learned how to work with the developer tools. And how to activate the console. In this movie, we're going to focus just on the console. So the quickest way to get to the console is by hitting Command+Option+J. And I'm using a Mac right now. On a PC, Command is usually Ctrl, Option is usually Alt. So this would be Ctrl+Alt+J. It might be more convenient, though, to call the console within the elements panel. So, you can do that by clicking on the Elements panel and then hitting the Esc key. That toggles the console on and off. The DOM can be accessed by using selectors.
So if I just type in document, it selects the entire DOM and I can click on it, just like I can with the Elements tab. The DOM has added completion, so as soon as I start typing doc, it's suggesting that I probably want the document, so I can hit Tab and then Return to execute that command. If you type in a period after document, then it's going to select from this list of options, all the methods and properties available to this element. So if I start typing b for the body, it shows me a shorter list, and I can use the arrow keys to move up and down this or just click on it with the mouse.
Now this shows the list of all the nodes in the body in an array notation. I can also hit the up and down arrows to cycle through the list of current commands. You can also do that by hitting Ctrl+P or Ctrl+N. When you see an array notation like this it means you can access an element by typing in the array notation. So if I use brackets here and then select element 1, it's going to return the header. I'm going to hit up a few times so as to get this all entire list of nodes.
So I'll get to the footer tag like this, and maybe something more complicated. We'll try header and then find the navigation inside and ordered list element and then I'm going to use the greater than sign and then a list item element in there. So if hit Return, it gets the first item that match that rule. Now I know there are other list elements in there. So if I want all the elements that match the rule, and I'm going to hit up all the way to the left. So I'm hitting Cmd+Left to get to the left side.
And I'm going to hit the dollar sign to have two dollar signs. Then, Cmd+Right to get to the right side and hit Enter. And that gives me a list of all the elements that match that rule. The console is also going to store the last used element in a special variable called dollar sign, underscore. So if I type dollar underscore here, I get the last selection. Now you can get focused to an element in the DOM with the inspect method. So I'm going to grab this selector right here that got the first list item and I'm going to type in inspect, and I'm going to paste that in there. Now this is actually grabbing the element in the elements tab. Notice that the LI is selected right here.
So it didn't just get the element, it actually got it and selected it from the elements tab. You can ask the console to report unevents when they happens. For example, you can execute a monitor events command, and then type in a target. So I can say document.getElementByID (SOUND) and then main. And then put a comma and then click. So I'm going to look for click commands in the main element of this DOM. So I'm going to hit Enter and nothing looks like it's happening but I, if I happen to click anywhere within the main element and the DOM, notice that it's reporting that as a click event.
And I can get information about the event by opening these triangles up. Finally, if your console's getting a little bit messy, you can hit Ctrl+L to clear the console. There's really a lot of power in the Chrome developer tools. With complete access to and special methods for manipulating the DOM, it's really the best place to explore the inner structure of your documents.
Get unlimited access to all courses for just $25/month.Become a member
61 Video lessons · 99486 Viewers
56 Video lessons · 112717 Viewers
71 Video lessons · 81536 Viewers
131 Video lessons · 39137 Viewers
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.