Part 6. Using Dev Tools

View Page Source

Luckily for us, Chrome Dev Tools are already part of our web browser, so we can use them anytime we want simply by performing a right-click almost anywhere on the webpage. This will produce a menu something like the one shown below.

Near the bottom of this pulldown menu, you will find View page source. This is a handy way to see the source code for any webpage. When you do that, the browser will open the entire listing of the HTML code used to display the web page in a separate tab. But that's not all! You can also view any image file or any other linked file. Look for filenames that are displayed in blue text with underlines. If you click on them, then separate browser tabs will open with the contents of those files, like the style.css CSS stylesheet. Go ahead! Try it yourself on this web page, if you like. This is a great tool that allows you to see all of the code, images, and linked files used to create a web page. And for any image that you have opened in a separate tab, you can also right-click on that image, and then select Save image as... to download the image. And of course, you can copy-and-paste any or all of the text from these files for your own projects. Lots of early web developers learned how to write code simply by using these tricks of the trade to view the source code written by other programmers.

Of course there are many other options available to you on this pulldown menu, but we will leave it up to you to explore what each and every one of them does. But besides View page source, the ability to Inspect code is also very useful, and we will look at that next.

Inspect

The very last line in this pulldown menu is Inspect, which opens up Chrome Dev Tools, and that offers you lots of options. Like with Emmet, there are more bells and whistles here than we would like to explain. And you can use Inspect on webpages written by other people as well as your own webpages. These developer tools allow you to view the Console as a debugging tool when you are writing JavaScript code, so that is an invaluable tool. You can use use Dev Tools to test the mobile-responsiveness of your web pages, and that can save you hours of time rather than testing your code on dozens of different devices.

But just to be clear, why don't you right-click on this webpage, and then select Inspect from the pulldown menu. That action will open Chrome Dev Tools on the right side of the screen. Yes, there is lot here to see and learn about, but we wanted you to know how to open Chrome Dev Tools, even if we are going to skip a long tutorial at this point.

Mostly what we wanted to show you here is that these tools exist for your benefit. And Google has documented them better than we possibly could here, so please take the time to explore everything that Chrome Dev Tools can do for you. There are lots of other instructional videos and tutorial guides here as well. And who knows Chrome Dev Tools better than the people who invented them?

But we admit openly here that this can be a very deep rabbit hole to dive into right now. And we will show you other ways to troubleshoot your code if you find Chrome Dev Tools to be difficult and unwieldy. Eventually, when you get deeper into our CSS Coding Course, you will see how we sometimes use borders and HTML background-colors to indicate where our elements begin and end. For now, just realize that these Chrome Dev Tools exist as more handy items in your toolbox.

One last thing to mention here is that Chrome Dev Tools are available in a similar form on any Chromium-based web browser, not just Google Chrome. That includes Brave, Edge, and Opera. We should also mention that Mozilla Firefox and Apple's Safari web browsers also have development tools, but they work much differently that Chromium-based Dev Tools. We believe that the Chromium-based Dev Tools are superior to the others. And we've explained many times in the past why we believe that Google Chrome and Chromium-based web browsers are the best.

Go Back Home