As you're working with the DOM, you might find it useful to take advantage of the developer tools, which are available in most browsers. Since we're using Chrome in this course, one of the developer tools we've been using quite frequently is the JavaScript console. And as I mentioned, you asked access that using Command Option j on a Mac Ctrl Shift j on a PC. Well, there are other developer tools with the console, you can bring up the developer tools using Command Option I on a Mac or Ctrl, Shift I on a PC, or you can simply access them from the menu. Now before bringing up the developer tools, I'm going to go to the page we displayed in the previous movie where I was introducing the DOM. Now I'm going to Command Option I to bring up this developer tools.
Now in order to so we can see things a bit better, I have reduced the size of the text within the developer tool so that I can show more. I'm also going to dock this to the bottom of our page. Now when I first access the developer tools, you'll notice that the elements panel is the one that's showing. In the past when we've access the JavaScript console, the console is always been selected. But now we're on the elements panel. And that's what I want to look at.
Because if you'll notice, there's a representation of the DOM in the elements panel. And I can navigate through that by clicking on these triangles that opens up the parts and I can see the children of a particular node and I can continue to navigate Down through it. And also notice that as I mouse over each of these elements that highlights them in the HTML page, using the elements panel can be very helpful as you work with and try to understand the DOM. Now another form of highlighting that can sometimes be helpful is if I activate the page inspector by clicking this little icon here, once it's active, I can then move over the different parts of the HTML page. And they are highlighted down here in the elements panel. So if I'm trying to find a particular thing within the DOM, this can be a way to do that.
The highlighting will continue to occur until I turn off the page inspector. Now something else that can be helpful as I select different Notice down below you can see the breadcrumbs at the bottom of the elements panel. This gives me a path of where I'm at HTML tag, body tag, div tag with an ID of content, div tag with a class of bullets, a ul tag, and then an Li tag with an ID of v3, and you can see the ID right there. Now something else you can do that may help you in working with the DOM is you can edit these DOM elements. For example, I can double click that highlights that and then I can add text, press return, and it shows up in the HTML page. Now these changes will last just as long as this page is within the browser.
If we refresh the page, the changes will go away. I can change the ID Sam doing something working with this particular page in JavaScript, and I'm testing some things and I need to change an ID for that purpose, I can do that. You can also deal with style elements. So the CSS, CSS, which is over here, I can change the visibility of that particular Li tag, for example, I can change the margin to 500 and see what it does. So there's different things which we're able to change. Another way to add it is you can right click, and then add it as HTML.
So say I wanted to add it, this entire ul tag, I can right click, add it as HTML. And then I have access to change any part of that When I'm done, I can click out swear, and the change is applied. So that's a quick introduction to some of the additional developer tools which are available. Using these Developer Tools when you're working with the DOM can be very helpful. Let's move on to the next topic.