Intro to Google Chrome DevTools

#devtools #beginners #chrome #googlechrome

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.

Google Chrome DevTools can help with debugging by letting you:

insert breakpoints into your code, which let 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

Navigate to a Chrome web page
On Mac, press Command + Option (alt) + J. On Windows, press Control + Shift + J.
(optional) 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 circle with a diagonal line button on the top-left corner 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. Once selected, the element will 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 or 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 already be 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.

This video demonstrates how to add a breakpoint using Chrome DevTools

Latest comments (4)

Mauro Garcia • Jan 21 '21

Great article! I suggest you change the google tag for "beginners" because this article could be very helpful for devs who are just starting and don't know how to debug in the browser.