Chrome Devtools tips and tricks Part 2

At the time of writing, I am using Stable Chrome 80.

Sources panel allows you to look at the code you sent to the browser. It could be mangled code or if you have integrated your source code with Chrome devtool’s workspaces, you would be able to see your own code and the code you sent to the browser on this panel.

As I do not use workspace, this article would not contain any information about it. However, workspace is worth checking out if you wish to stop switching between editor and browser application while developing your app.

I use Sources panel when I have to debug large applications whose code base I am unfamilar with. While the debugger is powerful, it can be excessive. I would use it to pin point the general area of where the bug lies, or use its step through feature to get a sense of how the application flows, then use console log for fine-grained debugging. Additionally, the debugger frequently freezes for me so I don’t rely on it in my day-to-day debugging. Nevertheless, it has proved useful on many accounts and here are the things I would share about it.

The debugger keyword

If you wish to check when or whether a “path” is executed, and you have access to the source code, you can add the keyword debugger; in your source code. On Chrome devtools (I can’t say for the other browsers since I don’t know whether this trick works on them), the debugger would pause on the line of this keyword if it lies in its execution path.

Blackbox scripts

When stepping through your code, the debugger might bring you into your polyfills, frameworks or any third party libraries you use. To prevent that, you can blackbox these script(s). You can black box scripts in the following ways:

1. Blackbox a script from the editor pane

When you are in a script that you wish to blackbox, right-click anywhere within the source of the script. On the context menu, select Blackbox script. Doing so would blackbox this particular script you are in.

2. Blackbox scripts that match a regex expression

Sometimes frameworks and libraries may span several scripts. We can capture them with regex patterns. Press Ctrl + Shift + p to open up the command menu. Type in blackbox you would see [Settings] Show Blackbox. Press enter and you be able to blackbox a single script or pattern of scripts. When you are done, you can press Esc to return to Sources panel.

Run REPL on paused line of code

When you are paused on a line of code, you can still use the browser’s Read-Eval-Print Loop (REPL). At sources panel, press Esc and this would bring up console in the drawer. By default, Chrome Devtool Console drawer’s JavaScript context dropdown is set to top and it represents the main document’s browsing context, which is the environment the browser displays it’s DOM. So you can console.log out values of variables that have been executed, before the script was paused.

Snippets

Snippets are scripts that are stored on Chrome Devtools. They have access to the page’s JavaScript context. You can use them when you find yourself repeating a code on your console. You can’t pass in arguments into snippets though. Here are some ways to creatively use snippets.

In this post, I briefly touched on the command menu (Press Ctrl + Shift + p) and drawers (Press Esc). The command menu provides you a list of features that Chrome Devtools offers so if you wish to explore Chrome Devtools features, you can do so from this menu. In fact, some of my feature discovery were made from scanning through this menu! Many features are tucked away in drawers as well so do look into them. One of them is code coverage, which shows how much of the code you sent to the browser is actually ran.

That’s it for Source panel. Thanks for reading 👋