In this video, we're going to walkthrough a valuable feature.

As you know, HTML and CSS give shape to websites. If you want to see the code of any web page, you can right-click on the page and choose the "View page source" button as it differs page to page.

This option is not helpful when you want to debug a page. Let's say you upload a page, only to later realize there's an error you need to fix. "View page source" will not assist you in solving these issues, but the developer tools will. To get to these tools, right-click the browser and click on an option called "inspect". This brings up a panel for you, such as below:

This can be a powerful tool, and I'll show you why. To follow along, go to devcamp.com or any other site you like.

The leftmost button allows you to select any element on the page.

If you look at the right-hand side, you'll see all the style elements. Though we haven't covered CSS yet, this is a good example of what it would look like. When you master CSS, this panel can be really helpful for debugging. You are able to make changes and edit styles, then see them real time on the page.

However, one thing to note here is the change you make is visible only for you and only in this session. If another person is accessing the same site, they'll still see only the default. Also, if you refresh the page, the change you made is lost, and only the original will be visible.

Now, if you select a particular element, you can see the <div> ID associated with it, like this:

CSS, in general, will encompass a set of similar elements to edit and change colors and/or styles. In the above example, any change you make to the text color will apply to all the four paragraphs. However, if you want to change only one paragraph, you can what is called a CSS selector to just select the style for that one paragraph. This is just a quick preview, and will be further discussed in a later tutorial.

If you like what you see, you can take this change to your CSS file, so the change is permanent. Otherwise, this is more like a staging area where you get to play around with the visuals of the code.

Another element is, if you right-click on any image on the web page, you won't have the option to save or download it. If you still want access to the source image, look for the source URL on the CSS panel and click on it. This will take you to the original image.

Explore the site and make some changes to the CSS style to get a feel of it. If you see, there are quite a few tabs on the right side. The "Styles" tab is probably where you'll spend a lot of time. The "Computed" tab gives you a graphic representation of the layout. "Event listeners" and "Properties" are advanced stuff, and I rarely find the need to use them. "DOM Breakpoint" are where you'll set breakpoints to check for certain behavior.

CSS can be confusing to start with. It's best to read it from top to bottom, as you may have two conflicting styles that can cause for one to not work properly.

So, that is an introduction to know how to use web developer tools inside a browser.