10 Tips to Improve Productivity using Chrome Dev Tools
If you are a web developer, I’m pretty sure you are already familiar with Chrome Dev Tools. It has a massive list of features to support web development. But most of us use the bare minimum, just to get the work done.
In this post, I’m presenting ten tips on Chrome Dev Tools, that will help to boost your productivity and take you to the next level.
1. Command Menu
One of the features I love about my editor (VS Code) is the Command Pallet feature. It gives developers the ability to execute a lot of commands right from the keyboard. All you have to press ctrl + shift+p and you have hundreds of commands available. This feature is being implemented in multiple applications, and now it is available in Chrome Dev Tools as well.
Let’s imagine you wanted to take a screenshot of an HTML node on your web page. All you have to do is;
- Open Chrome Dev Tools.
- Select the node you want to extract.
- Press
ctrl+shift+pand typeScreenshot.
There are multiple options to take a screenshot, and you can proceed with any of them.
Tip: Share your reusable components between projects using Bit (Github). Bit makes it simple to share, document, and organize independent components from any project.
Use it to maximize code reuse, collaborate on independent components, and build apps that scale.
Bit supports Node, TypeScript, React, Vue, Angular, and more.
2. The Console can do a lot of things.
When debugging web applications, I tend to use Console logs to check the application behavior. However, if you do extensive logging to the Console, it makes it difficult to narrow down the log messages efficiently. Let’s explore the options available that help to distinguish each message.
Info, Warn, and Error log levels.
In applications, we have different levels of log messages. Errors, Warnings, and Info are the most common. You already have this support in Chrome Dev Tools using console.info console.warn and console.error methods. Let's see them in action.
Printing an array as a table.
Imagine you have an array of objects, and you want to see all the items and attributes. You can easily use the plain console.log. However, it will just give us a textual output. You can also use the method, console.tableto print information in a tabular format that makes it more human-readable.
Adding styling to the log output
You can add CSS styles to the log output to highlight any log items.
Grouping log messages
If you have a number of logs, debugging/log analyzing time would drastically reduce if you can group log messages. Console offer three methods, console.group, console.groupCollapsed and console.groupEnd for this.
Measure the time difference between operations.
While there are other ways of measuring JavaScript execution time, you can also use console.time and console.timeEnd to easily measure it.
3. Copy request as a fetch/cURL/ NodeJS fetch
When we invoke APIs from the frontend, if the intended result is not there, we typically use Postman or cURL for further investigation. Rather than manually entering the URL, headers, and parameters into these tools, you can copy the request as a fetch call, cURL, or as a NodeJS fetch call, by opening the Network tab in Chrome Dev Tools.
4. Reference to the currently selected tag
If you want to perform some actions on an HTML node, you can simply get a reference to it. In Chrome Dev Tools $0 in the Console will always refer to the currently selected node.
5. Breakpoints
I’m pretty confident you have used breakpoints in Chrome Dev Tools. However, other than the basic functionality, Chrome Dev Tools support few extended capabilities with breakpoints.
Conditional Breakpoint.
Imagine you have to iterate through hundreds of elements to find out if one element contains inside an array, using the debugger. You can right-click on the breakpoint and add a condition to check the matching attribute values to simply break at the right iteration.
DOM Change breakpoints
I have come across situations where multiple scripts modify DOM elements. In these situations, it is a pain to find the right script block that did the modification. Chrome Dev Tools simplifies this by allowing us to add a breakpoint to the HTML node, on the subtree modification event.
In addition to this, Chrome Dev Tools have the breakpoint support for XHR requests, Exceptions, Functions, and Event Listeners.
6. Pretty Print minified code
When trying to narrow down an issue in a production web app, chances of having to debug minified JS code are very high. If you open the minified file in Chrome Dev Tools, it gives a pop up to pretty-print the file. There is another button with curly braces symbols at the bottom of the editor, which has the same functionality. This will help you to get the minified code into a readable state.
7. Toggle element State
In web apps, we use hover effects to improve the user experience. However, debugging style issues of hover effects is pretty hard, if you don’t know how to toggle the element state using Chrome Dev Tools. All you have to do is, select the element, go to the styles section and check the hover in Forced Element State Section.
Similar to hover it can toggle active, focus, focus-within and visited states.
8. Ability to preserve log
When you debug your web application, if a page reload is happening, you will lose the previous network logs. This makes it challenging to inspect network calls if there are page redirections. You can use the “Preserve log” checkbox in the Network tab, to keep all the logs intact.
9. Debugging arbitrary functions
Using the Chrome Dev Tools Console, we can rewrite functions while debugging. This functionality saves time without the need to edit the original source files and refresh the page. Since these functions are not listed under the Sources tab, debugging such function seems hard. However, you can overcome this by entering the function name in the Console and double click on the method output to navigate to the VM. Using that, you can place breakpoints as if it was on a source file.
10. Design Mode
When we modify HTML, it normal to wait for the page refresh to see the changes. You can save time by usingdesignMode that allows instant modifications to the page. To toggle design mode, enter the following code in the Console.
document.designMode="on"
Final Thoughts
Chrome Dev Tools is a pretty powerful tool as it comes with a number of features to help developers to build applications fast. Today I have selected ten points, which will help developers immensely. However, there are many features which are equally valuable. Let me know in the comments below, what really works for you.
