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

Posted 2023-03-07

【中文标题】Chrome 开发工具中的自动换行？

【英文标题】：Word wrap in Chrome Dev Tools?

【发布时间】：2012-10-17 15:58:39

【问题描述】：

我无法弄清楚如何让 html 元素在 Chrome 开发工具中换行。我正在处理一些又长又复杂的 SVG 路径，我讨厌水平滚动来检查其他元素属性。在 chrome 开发工具的设置区域下检查自动换行。有什么建议吗？

【问题讨论】：

现在看来可以了，请查看我的更新答案

【参考方案1】：

现在似乎没有可用的自动换行 :( 并且似乎人们一直在问，我也刚刚发布了我对自动换行的投票

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

编辑：现在看起来这是一个默认功能（点击右上角的三个点，然后点击设置）：

【讨论】：

在查看“响应”时，“网络”选项卡仍然没有自动换行。 :(

干杯.. 我正在寻找禁用包装的选项！

【参考方案2】：

这是一个相当古老的线程，但不幸的是仍然相关。

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

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

Leon 回答中的链接实际上是指网络面板，尽管一些 cmets 表示其他人也在更普遍地看待这个问题；例如

如果所有内容都提供自动换行，那就太好了。

和...

我会捐出我的左肾来换行！

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

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

【讨论】：

你在这方面有什么收获吗？烦人

现在Sources 选项卡中有一个功能可以“漂亮地打印”（Format）选项卡的内容：单击底部看起来像 的图标Sources 选项卡的左侧。 （有时会出现通知提及此功能，但不确定如何触发。）

@TT-- 感谢您的提示！在左侧选择文件并在右侧查看其响应 时，Network 选项卡中也可以使用相同的“漂亮打印”。只需在左下角查找 。

【参考方案3】：

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

[2014 年 10 月 13 日]

我们在这里严重依赖 codemirror 功能。

---

上游错误：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，他们可能愿意在 Sources 选项卡中添加一个选项。

所以去搞砸吧：

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