In today's tech landscape, JavaScript has emerged as one of the leading programming languages, consistently ranking among the top five most used and in-demand languages. It enables developers to build entire applications with ease. To effectively harness the power of JavaScript, every software developer should master the tools that provide insights into their applications. When issues arise or when you need to understand the behavior of your app, utilizing developer tools (DevTools) is essential. In this article, I will share valuable insights and tips I've discovered while working on numerous front-end applications.
1. Unlocking Efficiency: The Power of DevTools Shortcuts
As front-end developers, we frequently need to access our DevTools, and while opening them manually may seem quick, using keyboard shortcuts can save significant time over repeated use. By incorporating shortcuts into your workflow, you can work more efficiently and focus on what truly matters—building great applications. Here are some useful shortcuts to get you started. For a comprehensive list of shortcuts, you can refer to the official documentation here: Chrome DevTools Shortcuts.
| Action | Mac | Windows / Linux |
|---|---|---|
| Open whatever panel you used last | Command+Option+I | F12 or Control+Shift+I |
| Open the Console panel | Command+Option+J | Control+Shift+J |
| Open the Elements panel | Command+Shift+C or Command+Option+C | Control+Shift+C |
2. The Console Can Appear on Every Tab, Not Just the Console Tab
Sometimes, you may want to access the console to execute commands or monitor logs without switching to the Console tab. Fortunately, you can do this from any tab in DevTools. Simply press the Esc key to bring up the console, allowing you to interact with it seamlessly while working in other panels. The following image illustrates a case where the Console appears under the Elements tab.
3.You Can Get the Computed Style Value of Every Element—and Filter Them
In the Elements tab, instead of scrolling through each group of properties, you can use the Computed Styles section to quickly determine the current value of any property you are interested in.
In the following image, you can see that when inspecting an element under the Elements tab, selecting the Computed sub-tab provides an overview of the layout (0) of that element, including its border, margin, padding, and inner size. You can also filter (1) the CSS properties to find the value of a specific property. These properties may appear grouped (2), and you have the option to display all properties (3), including user agent default values (which appear semi-transparent in the list) and properties that have been overridden by your app’s code (which appear opaque).
4. Never Lose a Log: Preserving Your Console and Network Logs
In some cases, you may want to preserve logs when reloading the app or navigating away, whether to see what happens before users leave the app or for other use cases. To achieve this, both the Network and Console tabs have a "Preserve logs" checkbox that you can enable. Once checked, your logs will be preserved.
In the Network tab, the "Preserve logs" checkbox is located on the toolbar beneath the tabs.
For the Console tab, you first need to click on the gear icon (cog) in the top left corner, just below the close button. This will reveal a list where you can find the checkbox to preserve logs, as shown in the accompanying image.
5. You Don't Need to Use Console.log All the Time
Sometimes, you may want to log a value that changes frequently in your console. A common approach is to use console.log directly in your code, allowing you to see the latest value with each change. However, this method can be limiting, as some value changes do not trigger any events.
Fortunately, there is a powerful tool that allows you to watch the result of an expression directly in your Chrome console: it’s called “Live Expression.” To create a live expression, simply navigate to the Console tab and click on the eye button. You can then enter any expression, and every time the evaluation of that expression changes, the updated value will appear in your console under the live expression. You can see an example in the following video.
Conclusion
In summary, mastering Chrome Developer Tools can significantly enhance your front-end development experience. From utilizing shortcuts to leveraging features like Live Expressions, these tools can streamline your workflow and improve your debugging process. I’d love to hear about your experiences with Chrome DevTools! Please leave a comment below sharing your tips, tricks, or any challenges you've faced. Let’s learn from each other and continue to grow as developers!
Top comments (1)
Nice one