Chrome dev tools deep dive : Elements

1. Search

CTRL + F allows you to search for strings in the DOM but you can also search using CSS selectors and XPath expressions.


2. Color picker

Ever wanted to figure out what colours exist on a web page? Or prefer some other colour format?

Here comes the color picker:

  • Shift click on the color box to change colour formats (e.g. hsl, rgb)
  • Pop up the color picker by clicking on the box

3. Force Element State

You want to inspect the hover style of some DOM element – you can hover over it but you lose the pseudo-state as soon as you exit the element boundaries. A better way is to force the element into the desired state.

There are two ways:

  • Right-click the element
  • Using the styles panel

4. Drag / Drop elements to new positions

Want to quickly move some element to some new location? So drag drop it. This comes in handy for issues relating to z-indices and ordering.


5. Debug on DOM modifications

This allows you to break whenever a DOM element or its children are modified. Very useful for debugging dynamically-injected DOM elements. There are three possible options:

  • Subtree modifications – DOM hierarchy changes under the chosen node (e.g. child insertions and deletions)
  • Attributes – inline style changes, attribute changes, animations
  • Node removal – when the node is deleted

You can use the DOM breakpoints tab to view all such breakpoints.

When an event triggers the breakpoint, the browser will stop at that point. This is nearly always jQuery; you can then walk up the stack to find the code that triggered the DOM modification.


6. The Styles tab

Allows you to edit existing CSS styles, add new ones and also view the source. CTRL + Click on a particular rule will open it up in the sources definition. Clicking on the full style too will open up that file.


7. Computed Styles

This shows the active styles applied to an element. It also comes in handy for figuring out what rules come from the browser’s default stylesheet.

To see all the applied rules on an element, check the show all checkbox and it expands. It’s also a very good way to learn more CSS.


Enjoyed this? Here are some more posts in this series:

  1. Chrome dev tools deep dive : Console
  2. Chrome dev tools deep dive : Network
  3. Chrome dev tools deep dive : Sources

4 thoughts on “Chrome dev tools deep dive : Elements

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.