使用 Chrome 开发者工具的代码折叠快捷键

Question

在设置-偏好设置-源代码中，我们可以在Chrome Dev上启用代码折叠。但我没有找到使用键盘快捷键，例如折叠全部等的方法。我已经在快捷键部分窗口和完整列表中搜索了，但没有成功。我认为在当前版本上无法实现。如果有人知道，请告诉我，我会非常高兴知道。

- user11888395

Answer 1

没有这样的快捷键，因此请尝试在https://crbug.com上建议添加此功能。

同时，您可以手动添加它：

1. make sure "code folding" is enabled in devtools settings (in the "Sources" group)

2. run this code in devtools-on-devtools (see the instruction below)

   [
     ['Shift-Ctrl-[', 'fold'],
     ['Shift-Ctrl-]', 'unfold'],
     ['Shift-Ctrl--', 'foldAll'],
     ['Shift-Ctrl-=', 'unfoldAll'],
   ].forEach(([key, cmd]) => {
     CodeMirror.keyMap['devtools-common'][key] = CodeMirror.commands[cmd];
   });
   

3. close devtools-on-devtools

这仅适用于当前的开发者工具实例。

为方便起见，您可以将代码保存在代码片段中，并稍后从那里运行，或通过在命令面板（Ctrl-P或Cmd-P热键）中键入代码片段名称来运行它。

如何打开devtools-on-devtools:

1. 先打开开发者工具，然后在菜单中切换其停靠位置到一个分离的(浮动的)窗口

   

2. 现在，在已分离的开发人员工具中按下CtrlShifti或MacOS上的⌘⌥i

   将在新窗口中打开devtools-on-devtools

- wOxxOm

---

谢谢你的建议。使用“foldAll”和“unfoldAll”可以工作，但是使用“fold”和“unfold”就不行了？？？ - user11888395

它在我的Windows上可以工作，所以我猜如果你的操作系统不同，你可能需要调整热键。同时确保你正在尝试折叠的块实际上是可折叠的，并且光标位于该块的开头。为了使折叠在块内任何位置都能起作用，你可以编写自己的函数（不是微不足道的，但可行的）。 - wOxxOm

非常感谢，但需要编辑，您写了两次“unfoldAll”。 - Igor Fomenko

我已经编辑过了。我切换到支持的热键，这些热键在开发工具中实际上是有效的。那些旧的热键是从CodeMirror的sublime keymap中复制的，需要两个不同的热键来调用unfoldAll，但它们在开发工具中无法使用。 - wOxxOm

我无法在 Electron 的开发工具中打开开发工具。你知道如何绕过这个问题吗？ - Igor Fomenko

Chrome DevTools已更新为使用CodeMirror 6，其中命令方法需要一个codeMirror实例作为参数，因此您可以将我的答案合并到您的答案中作为更新。(document.getElementsByClassName("CodeMirror")[1].CodeMirror) - bpstrngr

Answer 2

CodeMirror 6原生支持折叠快捷键（参见foldKeymap）：

• Ctrl-Shift-[（macOS上为Cmd-Alt-[）：折叠选定的行（如果可能）。
• Ctrl-Shift-]（macOS上为Cmd-Alt-]）：展开所选行上的折叠范围。
• Ctrl-Alt-[：折叠所有顶级可折叠范围。
• Ctrl-Alt-]：展开所有折叠代码。

- Benedikt Meurer

---

这应该是被接受的答案。 - John Yepthomi

Answer 3

顶部答案很好，但是自那以后chrome devtools已经更新，现在使用CodeMirror 6，需要将codeMirror实例传递给函数：

CodeMirror.commands.foldAll();
Uncaught TypeError: Cannot read properties of undefined (reading 'operation')
    at CodeMirror.commands.foldAll (foldcode.js:105:8)
    at <anonymous>:1:21

foldcode.js中的104-109行：

  CodeMirror.commands.foldAll = function(cm) {
    cm.operation(function() {
      for (var i = cm.firstLine(), e = cm.lastLine(); i <= e; i++)
        cm.foldCode(CodeMirror.Pos(i, 0), null, "fold");
    });
  };

我可以通过调试codemirror事件并将cm实例保存为全局变量（temp1）来解决它，但如果有人能提供更好的自动化解决方案，我会很感激。

编辑：我在document.getElementsByClassName("CodeMirror")[1].CodeMirror找到了codeMirror实例，因此一个可行的解决方案是：

CodeMirror.commands.foldAll(document.getElementsByClassName("CodeMirror")[1].CodeMirror)

快捷设置似乎仍然无法正常工作。(附带 HTML 标签)

 CodeMirror.keyMap["devtools-common"]["Ctrl-k"]=function()
{let {CodeMirror:instance}=
 document.getElementsByClassName("CodeMirror")[1];
 CodeMirror.commands.foldAll(instance);
};

编辑2：哦，它只需要大写的K，所以是“Ctrl-K”。现在快捷键也有效了。万岁！

顺便说一句，我已经在Chromium bugtracker的折叠功能线程上发表了评论，希望将其包含进去，因为在编辑/阅读文件时非常有用。目前还没有回应，不知道是否有人还在关注那里的评论： https://bugs.chromium.org/p/chromium/issues/detail?id=328431

- bpstrngr