Table of contents :
There are many more things you can do with the DevTools, I will mention only a few. You can find more at the links in the next chapter.
Some more features of Chrome DevTools:
Search and filter
You can search for, or filter certain CSS elements or properties on the Styles tab:
You can search and filter text on the Elements tab. First, make sure the elements tab is selected, now press CTRL+F, after that you get a search box near the bottom of the screen:
Scroll into view Rightclick on an element in the elements
pane. Choose scroll into view. It will bring the element into
view in the upper part of the screen.
Reorder DOM nodes Suppose you have 4 li-nodes in an ul element.
You can grab the tiny arrow in front of one of the li-nodes with your
mouse and move it up or down inside the ul-element.
Computed tab To the right of the Styles-tab you see the
Computed tab. While the Styles-tab shows you each and every style,
including the ones that are overridden, the Computed-tab only shows the
styles that are actually being applied to this element.
Angle clock For changing angles: