Chrome includes various debugging options that may be quite useful when troubleshooting code. In fact, there are so many tools that the majority of them remain concealed, waiting to be discovered.
In this post, I’ve created a list of ten features that I often use and that others may not be aware of. They’ve helped me in optimizing my workflow, allowing me to accomplish more in less time.
#1. Preserve Log
Beginning with a simple one that has previously caused much frustration: preserving logs on the console. Assume you have a problem that occurs just before a page reloads or even during navigation – you try to log in to the console, but everything is cleared.
#2: Breakpoints for Event Listeners
As a user interacts, an issue frequently arises. Catching these events to investigate where and what runs on interactions can make your life safer. Fortunately, we can do this by navigating to the Sources page and checking the checkboxes for the ongoing events.
#3: Breakpoints for DOM Manipulations
The same can be said with DOM manipulations. A node’s properties are often modified, such as the addition of classes. Searching out the responsible code in a large repository would be time-consuming; instead, simply place a breakpoint for the element and let DevTools do the rest.
#4: Code Coverage
When it comes to speed optimization, we frequently leave dead code behind. You may profile your resources and identify which lines are not processed using the coverage tool. To get a more realistic image, it is necessary to perform at least some but not all key user interactions. By pressing Ctrl + Shift +P, you may access the Tools panel and begin recording by clicking the reload button. Anything in red has not been executed.
#5: Show Repaints
Unneeded repaints might also harm performance. Consider a countdown on your page, and each update causes the entire page to be repainted. By enabling paint flashing in the Render tab, you can solve these issues and observe which elements cause them. Ctrl + Shift + P will bring up the tools bar once more.
#6: Inspecting Animations
While we’re on the subject of rendering, let’s look at how to debug CSS animations. Enter “animation” into the tools menu by pressing Ctrl + Shift + P. That will launch the Animations tab, which will record any animation that occurs on your site. You may replay them to observe how they ease and experiment with the timing or duration.
#7: Screenshots
We frequently have to share screenshots with one another in order to validate changes. If you have to repeat several processes, this task might take a long time.
- Open a third-party app.
- Crop a section of the website
- Save it as a picture and send it.
This is possible within DevTools. You can generate photos from the entire page, individual nodes (the ones that have been chosen), or the viewport.
#8: Black boxing
Assume you’re troubleshooting a problem with a couple of breakpoints in your code. You’re following the stack trace, but the majority of the calls are coming from key framework files like React or jQuery. You may black box these essential files to prevent adding them to your debugger, which means DevTools will skip over them so you can focus on your own code.
#9: Local Overrides
Local Overrides is a favorite of mine, and I’m finding myself utilizing it more and more. It’s a robust tool that allows you to import local versions of production files and replace them with their packaged counterparts. This is especially beneficial when an issue occurs exclusively in a certain setting and cannot be replicated locally.
On the Sources tab, you may allow local overrides. Click on the chevrons next to the Page if you don’t see the Overrides link. You can extend your bundle by copying the pretty-printed file. Overrides are saved across page reloads.
If you’re interested in local overrides, I have a full lesson on the subject available at the URL given.
#10: Lighthouse
Last but not least, I continually find myself using the Lighthouse panel. This is for analyzing your site in several aspects like as performance, PWA, accessibility, and SEO. You may also audit other devices and replicate network connections. It provides brief information about what may be improved and how to improve it. Lighthouse is accessible via the Audits tab. If you don’t see the tab, simply click on the chevrons to show hidden tabs. Once your report has been prepared, you may store the findings as a JSON file and import them later to do comparisons.
These are the ten must-know features of Chrome’s DevTools that have assisted me in optimizing my workflow and performing more tasks in less time.
What features do you utilize on a daily basis? Tell us in the comments.
Thank you for reading, and wonderful debugging!
