Chrome开发工具中的自动换行？

Question

我无法弄清楚如何让HTML元素在Chrome开发工具中换行。我正在使用一些冗长而复杂的SVG路径，我讨厌水平滚动以检查其他元素属性。在chrome dev工具的设置区域下检查自动换行。建议？

Answer 1

看起来现在还没有可用的Word Wrap :(似乎人们一直在问，我刚刚发布了我的投票信息

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

编辑，默认情况下看起来像是一项功能（使用'esc'打开控制台，然后点击右下角的设置齿轮图标）：

Answer 2

这是一个很老的线索，但不幸的是仍然相关。

自动换行仅适用于元素面板。来自文档：

  

与任何文本编辑器一样，您可以选择在“元素”面板中包含长行代码。

Leon的答案中的链接实际上是指网络面板，尽管其中一些评论表明其他人也在更普遍地看待这一点; e.g。

  

如果为所有内容提供wordwrap将会很好。

和......

  

我会捐出我的左肾用于包装！

无论如何，如果你主要是编辑html，那么你很幸运 - 只需使用Elements面板而不是Sources面板。不幸的是，我的大多数编辑都是用JS。

因此，我将在Chromium中打开一个新问题并在此处发布一个链接，以防有人想要支持它。

Answer 3

在Chrome的Issue 167287: Feature request: word wrap for sources panel中，开发人员说：

[2014年10月13日]

  

我们在这里严重依赖于代码镜像功能。   

---

  上游错误：https://github.com/codemirror/CodeMirror/issues/1356

和：

[2017年12月14日]

  

我对此性能感到有些害怕。当我们以更高性能的方式显示大型/小型文件时，将重新访问。 [状态：已分配→WontFix]

但是，解决CodeMirror问题的实际工作分为两部分，每一个都有其自己的错误：

• Split measuring of long/huge lines – Issue #1022 （2014年1月27日关闭）

• Experiment with a partial algorithm for redrawing lines – Issue #2090（仍然打开，但听起来似乎适用，而与自动换行无关）

因此，他们担心包裹超长行会使编辑器停顿下来。如果您可以说服他们，无论是否实际改进CodeMirror，他们可能愿意在“源”选项卡中添加一个用于换行的选项。

所以请随便乱扔

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