Table of contents :
5: Chrome DevTools: More Features.
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
FIRST
You can search for, or filter certain CSS elements or properties on the Styles tab:Styles-tab: Search or Filterelements or properties. Styles-tab: Search or Filter elements or properties.
SECOND
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:Elements-tab: Search or Filter elements or properties. Elements-tab: Search or Filter elements or properties.Elements-tab: Search or Filter elements or properties 2. Elements-tab: Search or Filter elements or properties, after typing at least 3 characters.
-
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.
Other features - scroll into view. Other features - scroll into view.
-
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.
Other features - Reorder DOM nodes. Other features - Reorder DOM nodes.
-
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.
Other features - Computed tab. Other features - Computed tab.
-
Angle clock For changing angles:
Other features - changing angles. Other features - changing angles.Other features - changing angles. Other features - changing angles.Other features - changing angles. Other features - changing angles.