So, one of the things I hate about the Chrome Dev Tools is this:
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?
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
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:
