CODEWITHSUNDEEP
google-chrome-devtoolsindentationdevtools
p7adams
p7adams

Reputation: 662

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

Upvotes: 4

Views: 973

Answers (1)

skomisa
skomisa

Reputation: 17343

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.

Upvotes: 2

Related Questions