Master_T
Master_T

Reputation: 7913

Horizontal scrolling in Chrome Dev Tools elements inspector?

So, one of the things I hate about the Chrome Dev Tools is this:

enter image description here

Basically, when the html is deeply nested the elements tab starts to wrap lines to try and fit everything in the panel, instead of using an horizontal scrollbar, which would make much more sense here.

I can't believe such an awkward layout is intended, it's literally unreadable... is there a setting to prevent this?

Upvotes: 17

Views: 10350

Answers (2)

Ben Viatte
Ben Viatte

Reputation: 503

Enabling word wrap technically solves the problem, but leads to another equally annoying situation, the "horizontal scroll hell" mentioned by user karvonen.

But it turns out Mozilla devtools avoids both problems quite ingeniously by only adding a horizontal scrollbar when the nested elements get too far. I switched to Mozilla devtools just for that:

enter image description here

Upvotes: 6

Frederik Voordeckers
Frederik Voordeckers

Reputation: 1331

Found a setting in the DevTools that solved this issue:

If you uncheck Word wrap everything should be fine.

The setting is located here: DevTools Settings > General > Elements > Word wrap

enter image description here

Upvotes: 25

Related Questions