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.
    Styles-tab: Search or Filter elements or properties.
    Start typing in the box and selected elements or properties will start to be highlighted on the tab.

    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.
    Type at least 3 characters and you will see for instance:
    Elements-tab: Search or Filter elements or properties 2.
    Elements-tab: Search or Filter elements or properties 2.
    Elements-tab: Search or Filter elements or properties, after typing at least 3 characters.
    After typing the third character you will see IF there is a match, and if so, how many.

  • 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.
    Other features - scroll into view.
    If you do not see the menu-item, the element is already in 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 - scroll into view.
    Other features - Reorder DOM nodes.
    (If you grab the "li", and not the arrow itself, it does not work)

  • 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.
    Other features - Computed tab.
    When you click a small arrow, it shows you the stylesheet and element it belongs to.

  • Angle clock For changing angles:
    Other features - changing angles.
    Other features - changing angles.
    Other features - changing angles.
    There is a property transform with an angle. Clicking on it gives you:
    Other features - changing angles.
    Other features - changing angles.
    Other features - changing angles.
    You can change the angle by moving the hand with the mouse:
    Other features - changing angles.
    Other features - changing angles.
    Other features - changing angles.
    You can also scroll your mouse to change the angle.