Have you ever used a tool every day but realized you barely know its full potential? I have. Chrome DevTools is a key part of my workflow, yet for a long time, I had only scratched the surface of what it could do. Once I took a closer look, I discovered just how powerful it is. Whether you’re experimenting with a personal project or managing a large-scale web app, Chrome DevTools can streamline your workflow, help you fix tricky bugs, and give you insights into what’s happening behind the scenes.
Let’s unlock the full potential of this tool, starting with the Elements tab.
What are Chrome DevTools?
Chrome DevTools is a set of built-in tools that come with Google Chrome and other Chromium-based browsers like Arc (one of the tools I use). It lets you inspect your site’s HTML, debug JavaScript, simulate how your site works on mobile devices, monitor network requests, and more — all within the browser. No extra software is required.
If you’ve mostly used the Elements tab to tweak CSS, you’re not alone. This guide (and series) will dive deep into each DevTools tab to help you master them and make your development workflow more efficient.
Why Start With the Elements Tab?
The Elements tab is likely the tool you use most. It gives you direct access to your page’s HTML and CSS, allowing you to inspect, modify, and test your DOM and styles in real-time. This isn’t just about viewing source code — it’s where you can interact with your code, diagnose issues, and test solutions without editing local files.
Inspecting the DOM
The Elements tab provides a view of the DOM tree — the hierarchical structure of your HTML — allowing you to see exactly how elements are organized. Each element, like <div>, <h1>, or <img>, is displayed so you can explore your webpage from the inside out.
Modifying Attributes
A handy feature is the Edit attributes function. You can dynamically change attributes like class, id, and style directly in the DOM. For example, if a button with multiple classes isn’t behaving as expected, you can toggle or edit the classes and immediately see the effect.
This saves time compared to editing CSS files and refreshing the page. You can also check if a button is non-responsive due to attributes like disabled or pointer-events: none, and inspect event listeners to see if JavaScript is properly attached.
Additionally, the Elements tab allows you to inspect if the button has event listeners attached to it. If no event listener is present, that could explain why your click event isn’t being triggered. By inspecting the Event Listeners section, you can verify whether any JavaScript is bound to the button and troubleshoot why it might not be working as expected.
Searching the DOM
When dealing with complex web pages, navigating through deeply nested elements can be tedious. Luckily, you can search the DOM by tag name, class, ID, or even text content. Just press Cmd + F (Mac) or Ctrl + F (Windows/Linux), and you can locate elements instantly.
If you’re troubleshooting a modal with the class modal-header, you can simply type that into the search field to quickly find and inspect that section.
Copying Elements
You can also copy the outer or inner HTML of any element directly from the Elements tab. This is useful when you need to transfer a specific part of your page into another environment for testing.
Another commonly used example is the live editing of HTML on the page. Let’s say you want to experiment with different HTML structures, add an attribute, or temporarily hide a section of your site. Instead of diving into your text editor, saving the file, and refreshing the page, you can just right-click on any element in the Elements tab and select Edit as HTML. You’ll be able to make your changes directly in the browser, and Chrome will immediately reflect those updates.
This is incredibly handy when you’re testing small changes or fixes. Or even how headlines react to very long words. If something works, you can later add those changes to your actual codebase.
CSS Styles Pane
The Styles pane is probably the most used feature in the Elements tab. It displays all the CSS rules that apply to the selected element, organized by specificity. You can click on any property and update its value in real time.
Think of it as a live playground for your CSS. Trying to adjust padding? Just type a new value. Want to see how your page looks with a different font? Change the font-family and see the results immediately, all without touching your source files.
Side note: I think the most used CSS snippet there for me is:
outline: 1px solid red;
With this snippet I make the elements outline visible which can be useful if you want to check for example which element is spilling out of your viewport.
Understanding Specificity Hierarchy
The Styles Pane doesn’t just list CSS rules — it organizes them by specificity. This means that you can see which CSS rule is being applied and which ones are being overridden by more specific selectors. This feature is incredibly helpful when you’re dealing with conflicting CSS rules and want to figure out why certain styles aren’t being applied.
So next time you add a rule to change an element’s font size, but it’s not showing up, have a look a the Styles Pane. It will show you if a more specific rule (like an inline style) is overriding your change.
Inspecting Inherited Styles
CSS properties often get inherited from parent elements. The Styles Pane highlights which properties are inherited, helping you understand why certain styles are applied even when they aren’t explicitly defined for an element.
If an element’s font-family isn’t explicitly set, the Styles Pane will show that it’s being inherited from a parent container or body rule, giving you insight into how inheritance affects the element’s appearance.
Tools Above the Styles Pane
Just above the list of CSS rules, you’ll see some icons that can make your life even easier.
1. Filter Styles
This lets you search through all the applied styles for a specific property. For example, if you want to find out where background-color is being set, just type it in the filter box and it’ll show you the exact line where the property is defined.
2.Pseudo-Class Toggler
The :hov button lets you simulate different pseudo-classes like :hover, :focus, or :active. This is useful when you want to debug styles that only appear when a user interacts with an element, like a button’s hover state.
A very handy and often used tool by me. For example if I am debugging a navigation menu that has hover and active states. Using :hov, I can simulate the :hover and :active states to tweak styles without having to physically hover over the menu with my mouse.
3. .cls Class Editor
With the .cls button, you can quickly add or remove classes from the selected element. It’s great for testing out different class combinations without going back into your code.
4. Plus (+) Add New Rule
The + button allows you to add a new CSS rule to the selected element. It’s a fast way to test out new styles on the fly before committing them to your stylesheet. It also automatically adds all the classes for you.
5. Toggle Common Rendering Emulations
This Brush icon lets you simulate various rendering conditions, like forcing light mode in the browser or toggle back to dark mode 🤤.
Computed Styles Tab
Sometimes, the Styles Pane can be overwhelming with all the rules listed in order of specificity. That’s where the Computed Styles Tab comes in — it shows you the final, computed values of all CSS properties for the selected element. This includes properties that have been inherited or overridden by browser defaults.
For quickly checking, which font-family is used. This is my to-go Tab. I quickly can search the font-family line and get the info that I need.
DOM Breakpoints
Another powerful feature of the Elements tab is DOM Breakpoints. This is a game-changer when you’re dealing with dynamic content — especially when elements are being added, removed, or modified via JavaScript.
You can set breakpoints on DOM elements to pause execution whenever they’re modified. You can track:
- Subtree modifications: When child nodes are added, removed, or changed.
- Attribute modifications: When attributes like
classoridare modified. - Node removal: When the element itself is removed.
If you’ve ever struggled with elements mysteriously disappearing from the DOM (like modals or notifications), you can set a DOM breakpoint to pause execution when that happens, allowing you to inspect what’s causing the issue. (Right click on the element in the elements tab, in the menu under Break on). Now the browser will pause execution when the modal is removed, and you can inspect the JavaScript responsible for that change.
Accessibility Pane
The Accessibility pane gives you a bird’s-eye view of how accessible your site is. It shows ARIA roles, contrast ratios, and the name of each element, helping you ensure that your site is usable for everyone, including those who rely on assistive technologies.
Key Features:
- Role: Shows the element’s role (e.g., “button”, “heading”, “navigation”).
- Name: The label or name that screen readers will use for this element.
- Contrast Ratio: Shows the contrast between text and background colors, alerting you if the ratio is too low.
- ARIA Attributes: Lists all ARIA attributes tied to the element, like
aria-labeloraria-hidden.
Common Accessibility Issues the Pane Can Help You Identify and Fix:
- Missing or incorrect ARIA roles
- Low contrast ratio for visually impaired users
- Unlabeled form elements for screen readers
Properties Tab
The Properties Tab in the Elements tab of Chrome DevTools displays the JavaScript properties and methods attached to the selected DOM element. It’s especially useful when debugging standard web applications that use custom attributes or data storage directly on DOM elements.
Example: Debugging Custom data-* Attributes
Let’s say you’re building a web application that uses data-* attributes to store extra information on DOM elements. For instance, you might have a list of items where each item has a custom data-id attribute to store a unique identifier.
Here’s an example:
<ul>
<li data-id="123">Item 1</li>
<li data-id="456">Item 2</li>
<li data-id="789">Item 3</li>
</ul>If you need to inspect or debug these custom data attributes, the Properties Tab will show them under the dataset object when you select the element.
- Right-click on one of the
<li>elements and select Inspect. - In the Properties Tab, look for the
datasetproperty, which will show the customdata-idvalue, likedataset: {id: "123"}.
This is especially useful when you’re passing extra information between the front end and JavaScript logic, as it allows you to check if the correct data is being stored and accessed via the DOM.
Bonus-Tip
If you’re working with CSS Grid or Flexbox layouts, Chrome DevTools provides a visual way to understand and debug these complex layouts using Grid and Flexbox Overlays. This is especially helpful for identifying layout issues or understanding how your elements are distributed across the grid or flex container.
How to Use It:
- Select an element in the Elements tab that uses Grid or Flexbox.
- In the Layout Pane, enable the Overlay feature by checking the corresponding box for Grid or Flexbox.
Why It’s Useful:
These overlays give you a clear visual representation of how the grid or flex structure is laid out. This makes it much easier to spot issues, especially in more complex layouts with nested grids or multiple flex containers. The overlays highlight each grid line or flex item alignment, making it easier to debug problems like misaligned items or incorrect sizing.
Practical Application:
For example, if a grid item isn’t aligning correctly, you can activate the Grid Overlay to see exactly where the item is positioned within the grid. Similarly, for Flexbox, you can visualize how the items are distributed along the flex axis and see how they’re stretching or shrinking based on the container’s rules.
Conclusion
The Elements tab and its associated tools — including the Styles, DOM Breakpoints, Accessibility, and Properties panes — offer a comprehensive toolkit for debugging and refining your web pages. Not only can you inspect and modify HTML and CSS, but you can also ensure your content is accessible to all users and debug dynamic JavaScript properties.
Your Turn!
Do you have any favorite tricks or tips for working with the Elements tab that I haven’t covered? How do you use this tab in your daily workflow? Drop your thoughts in the comments — I’d love to hear from you!
Got questions? Let’s tackle them together! And keep an eye out for future posts, where I’ll highlight the best tips shared by readers.
In the next part of this series, I’ll dive into the Console Tab, where you’ll learn how to interact with your page using JavaScript, debug errors, and log information directly to the browser.
