A Beginner’s Quick Start to Google Chrome’s Developer Tools

What are Developer Tools

Developer tools are used to help you find, modify, and fix your problems concerning layouts and functionality for a webpage. These tools are accessible through all browsers. However, for this blog we will be focusing specifically on Google Chrome. To learn specifics on diagnosing and debugging, I recommend you click here to be redirected to Google Chrome’s webpage for a more detailed Dev Tools guidance. I also recommend watching this YouTube video from Traversy Media, he does an excellent job or explaining the basics.

How to Access the Dev. Tools

There multiple ways to get to the Developer Tools in Chrome. In the top-right hand corner of your Google Chrome page will be three vertical dots; click on that, select “More Tools,” then “Developer Tools.” On Macs, the keystrokes are : Command(Cmd) + Option(alt) + I. For Linux/Windows: F12, Ctrl + Shift + I. The one that I most often use however, is right-clicking on the area of interest and selecting “Inspect” from that menu. By doing it the last way, the tools will highlight the specific portion of code related to area you chose.

Navigating the Dev. Tools

In order to diagnose and modify your code, you first need to learn where everything is. Once you’ve opened your Developer Tools, you should see something similar to this:

Screen shot of what it looks like when you first access Developer Tools

This can look overwhelming at first, and it will take a while to learn everything there is to know about the tools, so breathe. Also, keep in mind that no matter what changes you make to code here, it won’t be permanent. There is one way to make it permanent, but that is a bit too advanced for a beginner’s guide. Let’s slow it down a bit.

There are two ways you can inspect an element .Let’s look at the first icon in the top-left hand corner; you can click on that or use Cmd + Shift + C. Rather than righting-clicking an element to inspect, you can chose to hover over the element on the webpage and have it highlighted in the code.

Now, if you are an app developer, you will love the option to see your content across multiple platforms. The second icon in the top-left hand corner or (Cmd + Shift + M), will allow you to switch between mediums. How would the webpage look on a computer vs. a mobile phone/tablet?

You’ll also see multiple tabs up at the top. Since this is a beginner’s guide, I’ll only briefly talk about three of them. If you’re starting off as a front-end developer, I highly suggest you familiarize yourself with the tabs I’m about to explain. The first one, “Elements,” is where you can inspect and live-code the HTML and CSS of that page. If you’re on this tab, the “Styles” tab will already be opened. This is where you can play around with you CSS. You can try to toggle off and on the various checkboxes, and you could also put in new styles and see what the page could potentially look like.

Screen shot of the Elements tab within the Developer Tools

The second tab, “Console,” is where you can see all the outputs from your console.log written in your Javascript code, show you any failed network requests, and any errors with stacked traces.

Screen shot of the Console tab within Dev. Tools

The last tab, “Sources,” simply put, is fancier version of Ruby’s Pry. For those that aren’t familiar with Ruby’s Pry, it’s a way to stop/break your code from running past a certain point. However, it goes beyond binding.pry’s simple break in the code. Once stopped, you can “Step In,” “Step Over,” and “Step Out” of the many files and lines of your code until you figure out what is breaking it. For more information, click here.

Screen shot of the Sources tab within Dev. Tools

Cool Tricks for Anyone to Use

There are so many cool ways you can manipulate webpages using Dev Tools. Here are just two simple “hacks” that any user , not just a developer, can do.

I know many of us can relate to this first one: forgetting the password. Most of us use programs like Last Pass or Google to save all our passwords so we can atomically sign into whatever account we’d like. If you needed to reset passwords, that’s when it becomes problematic, how do you see pass the **asterisks**or dots? Using my favorite method, hover over the area of where the password is already pre-filled, right-click and open the Dev Tools. Once opened, the portion containing the password will be highlighted. Look at the code, replace “input type = password” with “input type = text” and that’s it. You’ll now see your password written out in text instead of hiding behind little black dots.

Screen shots of changing the input types to display written text

The second trick is how to download/save a picture or video when the option to download isn’t given. User discretion: this trick does not always work 100% . Again, you hover over the area of interest, and open up the Dev. Tools. The area highlighted should be the content you’d like to save. Expand the div classes you’re currently in, and you should see a “src” attribute with the url link to said picture or video. If you double click on that, and copy and paste it in another tab, you’ll see your content there in full resolution, ready and able to download.

Final Remarks

There is so much more to learn about the Developer Tools, I cannot stress that enough. It makes coding and diagnosing issues easier and way more convenient. Every person, not just developers, should have a basic understanding of what the Dev. Tools has to offer. This blog barely scratched the surface of how to use the tools, but I hope it was enough to inspire you to look into the subject. There really is no better way than to try it out yourself! Happy Coding!