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:
CodeKraft 
4 thoughts on “Chrome dev tools deep dive : Elements”