Search code examples
google-chrome-devtoolsindentationdevtools

Guidelines / indentation lines in Google Chrome Dev Tools

Is it possible to have guidelines / indentation lines inside Google Chrome dev tools? Check attached photo.

I was looking for it for quite a long time and it's nothing there.

It would be very helpful in web development process.

enter image description here

Solution

  • I don't know of any way to display all the guidelines, but DevTools already does what you want to some extent:

    • Select the Elements tab.
    • Select and expand any element with a triangle and a vertical guideline will be displayed.
    • Hover over any subordinate element and a second fainter guideline will be displayed.

    Here's a screen shot:

    guidelines

    The guidelines aren't too obvious in that screen shot so I added two large red arrows to point to them, but they are easier to see on the actual screen.

    I am not using any theme, so perhaps you can't see those two guidelines because of the dark theme you are using? If so, try using a different theme, or no theme at all.