10 Advanced Chrome DevTool Tricks Every Frontend Developer Should Know

#browser #frontend #javascript #html

Trick 1: Find the unwanted CSS

Have you ever struggled to find a buggy or unwanted CSS style after selecting an element in Chrome DevTools? Scrolling through every class and property in the Styles tab can quickly become exhausting. After a while, you might even start scratching your head, still unable to pinpoint the source of the issue.

Computed tab to rescue

The easiest way to troubleshoot is by using the Computed tab, which provides an aggregated view of all styles applied to the element.

When you click the small blue arrow next to a property in the Computed tab, DevTools will take you directly to the actual selector where that style is defined—saving you time.

Trick 2: Emulate preferred theme

Simply go to Elements → Styles and click the brush icon in the toolbar. From there, you can select the user’s preferred theme and see how your website behaves in different theme modes—perfect for testing dark and light themes without changing your system settings.

Trick 3: Emulate different states of an element

You can emulate different states of an element in Chrome DevTools by clicking the :hov button in the Elements → Styles tab toolbar. This lets you apply states like :hover, :active, :focus, :focus-visible, :focus-within, and :target to see how your element looks and behaves in each state—without needing to interact with the page manually.

Trick 4: Track event listener and its location

If you want to track all events attached to an element and see exactly where they exist in your codebase, select the element in Chrome DevTools and open the Event Listeners tab. Click on any event you want to inspect, and DevTools will show the exact file name, line number, and all listeners assigned to that event. Clicking the event will even take you directly to its location in the file—making debugging much faster and easier.

Trick 5: Magic selector in Chrome console

Did you know Chrome DevTools has a handy “magic” jQuery-style selector for referring to previously selected elements?

$0 refers to the last element you selected in the Elements panel or via a node selector.
$1 refers to the element selected just before that, and so on.

Trick 6: Find out unused CSS or JavaScript code

Have you ever wondered which CSS or JavaScript is unused and could be removed to optimize your site’s loading time? Chrome DevTools has a feature called Coverage that helps you find exactly that.

To enable it, click the three-dot menu in the top-right corner of DevTools, go to More Tools → Coverage.

Click the Start Recording button, visit all possible pages and overlays (popup, dialog, etc.), then stop recording. It will show a list of files along with the amount of unused CSS and JavaScript. Clicking a file opens the editor, where unused portions are highlighted in red.

⚠️ One important thing to keep in mind: just because a CSS rule or JS code isn’t used on the current page doesn’t mean it’s never used. It might be required on other pages or hidden content revealed through buttons or interactions. To get accurate results, navigate through all relevant pages and interactions while recording, then stop the recording before making any decisions.

Trick 7: Find the culprit that is slowing you down

Go to the Performance tab and start recording. Reproduce the scenario where the application slows down on the client side. Stop the recording and review the timeline for frame drops. Green bars indicate good performance, while yellow or red bars indicate performance issues. In the flame chart, identify the widest bars. The function at the bottom with the widest bar represents the primary bottleneck. Click it to locate the exact code causing the slowdown.

Keep recordings between 5–10 seconds to make analysis manageable and avoid unnecessary noise.

Trick 8: Select color with accessibility guide

Go to Developer Tools → Settings → Experiments, and enable “New Advanced Perceptual Contrast Algorithm (APCA)”, which replaces the previous contrast ratio and AA/AAA guidelines.

Then select a color and click the color box icon. A popup window will appear. Choose the background color using the color selector, and you will see a thin guideline in the color selector.

Trick 9: Record your interactions or issue reproducing steps and share with others

Open your preferred website in its initial state. In Chrome DevTools, click More tabs (>>) and open the Recorder tab. Click Create recording, then click Start recording and perform the actions you want on the website.

You can replay the recording and export or import it in different formats to share with others. This tool should be essential for both QA engineers and developers.

Trick 10: Enable AI innovations

Not mentioning it in this era is almost impossible. Go to Chrome DevTools → Settings → AI Innovations and enable all the available options. Once enabled, you will gain access to a wide range of AI features across many areas of Chrome DevTools.

For example, you will see an AI button in many places, allowing you to add items to the chat context and start interacting with them. You can also use AI to understand console errors and even ask why something is slow in the Performance panel.