Word wrap in Chrome Dev Tools?

In Chrome's Issue 167287: Feature request: word wrap for sources panel, developers said:

[Oct 13, 2014]

We depend heavily here on codemirror capabilities.


Upstream bug: https://github.com/codemirror/CodeMirror/issues/1356

and:

[Dec 14, 2017]

I am a bit scared of the performance concerns of this. Will revisit when we have a more performant way of displaying large/minified files. [Status: Assigned → WontFix]

However, the actual work to fix that CodeMirror issue was broken down into two pieces, each with it's own bug:

  • Split measuring of long/huge lines – Issue #1022 (Closed on Jan 27, 2014)

  • Experiment with a partial algorithm for redrawing lines – Issue #2090 (still open, but sounds as though it applies regardless of word-wrap?)

So, they're worried that wrapping super-long lines would grind the editor to a halt. If you can convince them otherwise, with or without actually improving CodeMirror, they would probably be willing to add an option for wrapping in the Sources tab.

So go mess around with:

  • https://github.com/codemirror/CodeMirror
  • https://github.com/ChromeDevTools/devtools-frontend

This is quite an old thread, but unfortunately still relevant.

Word wrap only works in the Elements panel. From the documentation:

As with any text editor you can choose to wrap long lines of code in the Elements panel.

The link in Leon's answer actually refers to the Network panel, although several of the comments suggest that others are also looking at this more generally; e.g.

It would be good if wordwrap is offered for all content.

and ...

I would donate my left kidney for word wrap!

Anyway, if you're mainly editing html, you're in luck - just use the Elements panel instead of the Sources panel. Unfortunately, most of my editing is with JS.

So I'll open a new issue in Chromium and post a link back here, in case anyone wants to support it.


Looks like there is no Word Wrap available for now :( and seems like people have been asking forever, I just posted my vote for word wrap too

https://code.google.com/p/chromium/issues/detail?can=2&start=0&num=100&q=&colspec=ID%20Pri%20M%20Iteration%20ReleaseBlock%20Cr%20Status%20Owner%20Summary%20OS%20Modified&groupby=&sort=&id=73193

Edit: looks like it is a feature by default now (click on the three dots on the top right, then click on Settings):

enter image description here