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.
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.
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:
- 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.
- Blackbox scripts that match a regex expression
Sometimes frameworks and libraries may span several scripts. We can capture them with regex patterns. Press
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.
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
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.
In this post, I briefly touched on the command menu (Press
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 👋