Menu
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?
641
Pressing the “FN + F11” key twice from your keyboard will fix this issue for you.
To find out which elements cause a horizontal scrollbar, you can use the devtools to delete elements one by one until the scrollbar disappears.
To enable horizontal scrolling, we can use the CSS property overflow-x. If we assign the value scroll to the overflow-x property of the container element, the browser will hide horizontally overflowing content and make it accessible via horizontal scrolling.
Go horizontal This isn't an ideal layout for most web debugging tasks, so click-and-hold the layout icon (in the top right of the DevTools Panel's menubar) to see the horizontal-layout option.
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
196
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
