In this guide we're going to walkthrough an effective tool offered in modern web browsers: the developer tools.

As you most likely know, HTML and CSS are used to structure and style websites. However, if you are new to web development you may be surprised that you can see the code for any web page by right-clicking on the page and clicking the View page source button.

This is a powerful tool, and I'll show you why. You can follow along by going to the devcamp.com website (or any other site you want to inspect).

If you look at the right-hand side of the web developer panel, you'll see all the style elements. When you know CSS, this panel can be incredibly helpful for debugging styles on a website. If you play around with this panel you'll see that you can make style changes and see the changes rendered in real time on the page. You can add new styles as well and see what they'll look like. This is a great tool since it allows you to test out style changes directly in the browser as opposed to making changes in the CSS files.

One item to note here is that the changes you make are temporary and only visible for the session you are in. For example, let's say that you change the text color of a button to blue, you're the only one who can see the change. If another person is accessing the same site that you're on, they'll still see only the text sent from the server. Also, if you refresh the page, the change you made is lost. Therefore, the web developer tools are available so that you can test out style changes. And after you have picked out the styles that you want, you can implement them in the source code.

Moving down the line of features, if you select a particular element using the inspector tool, you can see the <div> ID associated with it, like this:

This feature allows you to change the color or make any other changes that you want to see in the browser. In the above example, any change you make to the text color will apply to all the paragraphs on the page since it's selecting the <p> tags. However, if you want to change only one paragraph, you can add a CSS selector to just select the style for that one paragraph.

If you like what you see, you can take this change to your CSS file, so the change is permanent. A good way of thinking about this features is that it is like a staging area where you can play around with code to see what styles you want to the application permanently.

Additionally, if you right-click on any image on a web page, some sites won't have the option to save or download the file. However, if you still want access to the source image, look for the source URL in the CSS panel and click on it. This will take you to the original image where you can save it.

I'd suggest you explore various websites, make changes to the CSS styles in order to get a feel for using the tools.

So that is an introduction for how to use the web developer tools inside a browser.