Intro to Chrome DevTools

Google Chrome DevTools Are A Web Developer's Best Friend

This article covers the Console, Sources, and Elements tab, and provides instructions for inserting breakpoints to reliably halt your code's execution at a certain line.

Chrome DevTools can help with debugging by letting you:

• insert breakpoints into your code, which lets you determine the value of variables at a certain point in your code's execution flow
• alter your app's DOM, or the DOM of any Google Chrome web page
• let you execute JavaScript code and see the results of a console log
• display the innards of a resolved promise from a fetch request
• warn you of problems with your code
• make you the cool hacker kid in middle school

Opening Chrome DevTools

1. Navigate to a Chrome web page
2. On Mac, press Command + Option (alt) + J; On Windows, press Control + Shift + J
3. Alternatively, you can double click anywhere on a page and select Inspect.

The Console Tab

This is where you can execute JavaScript code for experimentation purposes or to select and alter a DOM element. Additionally, the result of running console.log will live here.

If too many error messages and warnings clutter up this tab, click the button (found on the top-left corner) of a circle with a diagonal line to clear the console.

The Sources Tab

Here you can view the contents of your local files and insert breakpoints at specific lines.

The Elements Tab

In this tab the HTML skeleton of the web page is revealed. Click the button on the very top-left corner (the square with an eclipsing mouse cursor) to select an HTML element on your web page. The element will then be highlighted in the HTML skeleton. To manipulate the DOM, alter some HTML in the skeleton and see the resulting change in the DOM upon pressing Enter.

Inserting A Breakpoint Into Your Code

Breakpoints work just like JavaScript's debugger or Ruby's binding.pry/byebug. However, if you find that your favorite debugging tool is not working, you can count on breakpoints to help you out.

Let's say you navigated to localhost:3000 on Google Chrome and have opened up the Sources tab in the Chrome DevTools. To insert a breakpoint:

1 - Navigate to the desired file

In the left window of the Sources tab, you will see a list of folders. The localhost:3000 folder should be already opened and listing its contents. Your current project's files will likely be listed under "Users/{your name}/Projects/{your project's name} in the "localhost:3000" folder. Follow the tree of folders and files until you get to the file into which you wish to insert a breakpoint.

2 - Insert a breakpoint

In the middle window of the Sources tab, you will see the code from the file selected in the left window of the Sources tab. The code will look familiar as it is the same code you wrote in your local text editor. Click on the line number of the code at which you want to stop the execution flow. For instance, if you want to stop execution at line 36, click on the number 36; a blue rectangle with a pointed right edge should highlight the number you clicked on.

3 - Do something to activate the line of code you just selected

This could be as simple as refreshing the page, or pressing refresh and then clicking on an element in your DOM. In any case, you must first refresh the page.

4 - The execution flow has stopped

You should see a faint yellow box appear on the page that says "Paused in debugger". You can click on the blue "play" icon to resume execution flow.

5 - See the value of your variables

With the execution stopped, you can navigate to the Console tab of the DevTools and type in a variable name to get its current value.

The following video demonstrates how to add a breakpoint using Chrome DevTools

This article represents just the tip of the iceberg when it comes to Google Chrome's DevTools. Other DevTool tabs like Network and Performance can augment your productivity even more.

The official Chrome DevTools documentation can be found below:

Thanks for reading!