Guidelines / indentation lines in Google Chrome Dev Tools

Question

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.

Answer 1

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:

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.