Chrome DevTool Features To Improve Your Front End Development Part II
Google Chrome DevTools is a tool many front end developers use daily to make their development work flow much easier. Like so many of the tools we use, however, most of us probably learned just enough of the basics to get by. We all understand there are greater work flow improvements to be gained if we invested the time and effort in learning more features tools like these can do for us. But that’s the thing, more time and effort… ugh. Well, here’s an article that attempts to minimize that effort and shares a few of the more useful features in Chrome DevTools that I've found.
Fuzzy Search File Names
While on any tab in DevTools, pressing
p for MacOS) will open up a search dialog where you can perform a fuzzy search for file names.
Go To Anything Command List
Again, on any tab, pressing
p for MacOS) opens a "Go To Anything" type of dialog with a list of commands that can be searched for and executed by clicking on them.
Adding the keyword
For the rest of these features, we'll be looking at the different panels that are found under the Sources tab. So, make your way to the Sources tab, then slide open the the Watch panel. In the Watch panel, you can add variables or expressions you’d like to "watch" to see what they are evaluating to as you step through your code in real time (more on this below).
Call Stack Panel
This panel is further divided into Local and Global scopes, among others, showing you which functions and variables you have access to in that particular scope.
Stepping Over, In, and Out Of Functions
F10 key) will let you execute a function and "step over it" to save time. This can be useful when you are trying to get to a particular part of the script execution without having to wade through the details of each function. The Step In command (
F11 key) will let you "step into" the current function to then step through the execution of that function line by line if you wish. The Step Out command (
F11) will let you "jump out" of a function that you previously stepped into if you wish to stop going through each line of that function. Once you are done stepping through your code, you can resume the code execution by pressing
F8 key or the blue play button all the way to the left shown below.
console.log() lines when you debug your code. In Part 3, I'll share some ways to monitor the network and page performance in DevTools.