自定义 chrome 开发者工具 javascript 调试器键盘快捷键？

Posted 2023-02-16

【中文标题】自定义 chrome 开发者工具 javascript 调试器键盘快捷键？

【英文标题】：customize chrome developer tool javascript debugger keyboard shortcuts?

【发布时间】：2012-01-01 19:47:29

【问题描述】：

我不敢相信 Google 或 SO 搜索都没有找到明确的答案，甚至对此进行了很多讨论，但是：

是否可以在 Google Chrome javascript 调试器中编辑/自定义键盘快捷键？如果有，怎么做？

我习惯了 Eclipse 的 F5/F6/F7/F8 调试器 step into/over/ out of/resume 键，并希望在 Google Chrome 中使用相同的绑定。 F10/F11 是 OSX 的默认 Expose 键，因此不适合调试器控制。

我愿意接受非正统的解决方案，例如Quicksilver/AppleScript。

相关但不是很有帮助的页面：

Google Chrome's Javascript console keyboard shortcuts Chrome Keyboard Shortcuts Documentation

【问题讨论】：

不。我确实找到了这个：developers.google.com/chrome-developer-tools/docs/shortcuts

还有这个：***.com/questions/1437412/…，但没有编辑快捷方式。

好的，感谢您的更新。可惜他们不允许这样做。你会认为很多从 Eclipse 切换到 chrome-dev 的人会想要这样的东西。

@PaulSweatte 你有没有注意到我已经将另一个问题标记为可能是这个问题的欺骗？...两年前;)

DevTools 技术作家/开发者倡导者在这里。直到今天，这个功能仍然不存在。在 DevTools 中获取它可能只是优先级问题。通过issue #174309 加注星标，让 DevTools 团队知道这对您很重要。

【参考方案1】：

现在有一个实验性设置可让您自定义快捷方式！

点击 DevTools 中的设置按钮：

然后是 Experiments，搜索“key”并勾选 Enable keyboard shortcut editor 将添加 Shortcuts 项：

您现在可以自定义快捷方式，如果您使用 VS Code，有一个方便的快捷方式：

您必须重新加载 DevTools 才能使其生效。

【参考方案2】：

这是我的 Autohotkey 映射 Chrome 调试器快捷键的脚本

#IfWinActive ahk_class Chrome_WidgetWin_1 ; targetting only Chrome browser
F8::Send, F10   ; chrome debugger next step   map key F8      to chrome devtools F10
F9::Send, F8    ; chrome debugger continue    map key F9      to chrome devtools F8
F7::Send, F11   ; chrome debugger step in     map key F7      to chrome devtools F11 
^F7::Send, +F11 ; chrome debugger step out    map key Strg+F7 to chrome devtools Shift+F11 

如果您想在现有的 ahk 脚本中包含 sn-p，请将其添加到脚本的末尾。

【参考方案3】：

我的解决方案是使用Autohotkey，这是我在任何应用程序中用于快捷方式的工具。

我制作并运行这样的 .ahk 脚本：

#IfWinActive ahk_class Chrome_WidgetWin_1 ; Chrome browser
F2::Send, ^b ; toggle breakpoint (Ctrl+b)
^b::Send, ^m ; use Ctrl+b for something else

很简单：只有在Chrome浏览器窗口处于活动状态时，覆盖F2键并模拟Ctrl+b，这是Chrome官方切换断点的快捷键。

我实际上是在 Windows 启动时运行我的 ahk 脚本，因此快捷方式始终处于活动状态。

您可以添加更多快捷方式。您可以使用不同的浏览器或应用程序。 我还无法改进的一件事是仅在浏览器中的 Web 开发人员工具处于活动状态时才侦听快捷方式，也许有办法。

【讨论】：

这太棒了。我使用 autohotkey 来处理很多类似的事情。我使用代码的开头用元素检查器替换了双击右键（原始快捷方式是 ctrl + shift + c）。我要节省不少时间！如果有人想尝试一下：#IfWinActive ahk_class Chrome_WidgetWin_1 ; Chrome browser $RButton:: SetTimer , Fast, 175 Fast_Count+=1 return Fast: if (Fast_Count>=2) Send, ^+c Fast_Count = 0 else if (Fast_Count=1) MouseClick, right Fast_Count = 0 else Fast_Count = 0 return

【参考方案4】：

如果有人使用 Ubuntu，设置全局快捷方式可能是目前最好的解决方案。这对我有用：

安装 xcape (https://github.com/alols/xcape)。对于基于 Debian 的系统，您可以运行：

sudo apt-get install git gcc make pkg-config libx11-dev libxtst-dev libxi-dev
git clone @987654322@
cd xcape
make
sudo make install

运行以下命令来映射 ex。 F6 到开发工具快捷方式：

xcape -e 'F6=Control_L|Shift_L|I'

设置您喜欢的快捷方式并将相关命令放入您的.bash_profile 以获得永久结果

【参考方案5】：

每个操作系统都有键映射器，允许覆盖默认键组合；这里有一些：

窗口 发短信者 自动热键 OSX xType Linux 自动键

Fork 并扩展 Chrome 快捷方式管理器以实现本机功能。

参考文献

Texter

AutoHotKey

xType

AutoKey

Chrome Shortcut Manager

【讨论】：

这看起来很有希望！感谢您的提醒。将此标记为已回答，等待它实际执行它声称的操作（尚未测试）。

这不支持重新绑定开发者工具。

@ericsoco 它看起来不像答案 - 对我不起作用。如果你设法让它适用于开发工具，你能告诉我们怎么做吗？

同意，这不允许自定义 DevTools 快捷方式。另外，我不想使用 5.5 年前（2009 年 12 月）最后一次更新的扩展。

@trejder 不，我很高兴接受。还是没有找到好的答案。有一些关键的映射器工具不是特定于应用程序的，但这比我认为满足这种特定需求的工作要多。

【参考方案6】：

受@jcollum 回答的启发，这里是另一个Karabiner private.xml 定义。这个模仿了我的 IntelliJ 键绑定。另请参阅 apple.stackexchange.com 上的 keyboard shortcut toggling 答案。

<?xml version="1.0"?>
<root>
  <item>
    <name>Custom via private.xml</name>

    <appdef>
      <appname>ChromeLike</appname>
      <equal>com.google.Chrome</equal>
      <equal>com.vivaldi.Vivaldi</equal>
      <prefix>org.epichrome.app.</prefix>
    </appdef>
    <item>
      <name>Remap debugger keys in Chrome (IntelliJ)</name>
      <appendix>Change consumer keys to function keys matching IntelliJ shortcuts</appendix>
      <identifier>private.app_chromelike_switch_consumer_to_intellij_debugger</identifier>
      <only>ChromeLike</only>
      <autogen>__KeyToKey__ ConsumerKeyCode::MUSIC_PREV, ModifierFlag::NONE, KeyCode::F11</autogen> <!-- F7 Step Into -->
      <autogen>__KeyToKey__ ConsumerKeyCode::MUSIC_PLAY, ModifierFlag::NONE, KeyCode::F10</autogen> <!-- F8 Step Over -->
      <autogen>__KeyToKey__ ConsumerKeyCode::MUSIC_PLAY, ModifierFlag::SHIFT_L, KeyCode::F11, ModifierFlag::SHIFT_L</autogen> <!-- S-F8 Step Out -->
      <autogen>__KeyToKey__ ConsumerKeyCode::KEYBOARDLIGHT_HIGH, ModifierFlag::NONE, KeyCode::F11, ModifierFlag::SHIFT_L</autogen> <!-- F6 Step Out -->
      <autogen>__KeyToKey__ ConsumerKeyCode::MUSIC_NEXT, ModifierFlag::NONE, KeyCode::F8</autogen> <!-- F9 Resume -->
    </item>

  </item>
</root>

【参考方案7】：

受@jcollum 回答的启发，这里是另一个Karabiner private.xml 定义，这个定义在原始问题中实现了特定的Eclipse 键绑定。另请参阅 apple.stackexchange.com 上的 keyboard shortcut toggling 答案。

<?xml version="1.0"?>
<root>
  <item>
    <name>Custom via private.xml</name>

    <appdef>
      <appname>ChromeLike</appname>
      <equal>com.google.Chrome</equal>
      <equal>com.vivaldi.Vivaldi</equal>
      <prefix>org.epichrome.app.</prefix>
    </appdef>
    <item>
      <name>Remap debugger keys in Chrome (Eclipse)</name>
      <appendix>Change consumer keys to function keys matching Eclipse shortcuts</appendix>
      <identifier>private.app_chromelike_switch_consumer_to_eclipse_debugger</identifier>
      <only>ChromeLike</only>
      <autogen>__KeyToKey__ ConsumerKeyCode::KEYBOARDLIGHT_LOW,  ModifierFlag::NONE, KeyCode::F11</autogen> <!-- F5 Step Into -->
      <autogen>__KeyToKey__ ConsumerKeyCode::KEYBOARDLIGHT_HIGH, ModifierFlag::NONE, KeyCode::F10</autogen> <!-- F6 Step Over -->
      <autogen>__KeyToKey__ ConsumerKeyCode::MUSIC_PREV, ModifierFlag::NONE, KeyCode::F11, ModifierFlag::SHIFT_L</autogen> <!-- F7 Step Out -->
      <autogen>__KeyToKey__ ConsumerKeyCode::MUSIC_PLAY, ModifierFlag::NONE, KeyCode::F8</autogen> <!-- F8 Resume -->
    </item>

  </item>
</root>

【参考方案8】：

我用Karabiner 做到了这一点。我正在使用全尺寸键盘（F1-F19 键）所以我将它们映射到 F13 到 F16 .这样键的布局与 Chrome 中按钮的布局相匹配。键盘映射文件：

<?xml version="1.0"?>
<root>
  <appdef>
    <appname>CHROME</appname>
    <equal>com.google.Chrome</equal>
  </appdef>

  <item>
    <name>CHROMEDEBUGGINGKEY</name>
    <appendix>This maps the F13-F16 keys to Chrome debugging keys</appendix>
    <identifier>private.swap_chrome_to_debug_settings</identifier>
    <only>CHROME</only>
    <!--<autogen>__KeyToKey__ KeyCode::SPACE, KeyCode::TAB</autogen>-->
    <autogen>
      __KeyToKey__
      KeyCode::F13, KeyCode::F8
    </autogen>
    <autogen>
      __KeyToKey__
      KeyCode::F14, KeyCode::F10
    </autogen>
    <autogen>
      __KeyToKey__
      KeyCode::F15, KeyCode::SEMICOLON, ModifierFlag::COMMAND_L
    </autogen>
    <autogen>
      __KeyToKey__
      KeyCode::F16, KeyCode::SEMICOLON, ModifierFlag::COMMAND_L, ModifierFlag::SHIFT_L,
    </autogen>
  </item>
</root>

【参考方案9】：

相关：

Addy 提出了一个问题“为 DevTools 自定义键盘快捷键/键绑定的能力”： https://code.google.com/p/chromium/issues/detail?id=174309

【讨论】：

感谢您的提醒！交联。

该问题刚刚更新为“状态：可用”。所以我想我们很快就会开始看到一些东西推出。

期待那一天，我们可以用一只手轻松地显示/隐藏控制台。

@LeoTM：使用Esc 显示/隐藏控制台。另外：状态在 7 月 8 日更改为“已分配”

@ebpa Esc 仅在控制台打开后才适用，而不是直接从浏览器中应用。很好，刚刚为该问题加注星标，将继续检查。

【参考方案10】：

Chrome 快捷方式管理器对我不起作用，但使用 KeyRemap4MacBook 可以。更多细节在这里：Google Chrome Developer Tools keyboard shortcut customization on Mac

【讨论】：

请注意，KeyRemap4MacBook 已被重命名为 Karabiner。除了此答案中给出的链接，请参阅此页面上引用 Karabiner 的其他答案，以获取 Mac OS X 上的类似解决方案。

【参考方案11】：

唯一对我有用的是在操作系统级别禁用快捷方式（或将它们更改为其他内容）。

在 OSX 中，您可以转到 System Preferences > keyboard > Keyboard Shortcuts 并更改/禁用在 Chrome 中工作所需的快捷方式。

【讨论】：

这在 Chrome 开发者工具中无效。

@jcollum 你能详细说明缺少什么吗？这是我所拥有的所有信息，如果有的话，我想知道更好的解决方案。

打开键盘快捷方式后，您需要转到应用程序快捷方式。然后……做什么？不知道。这就是它不完整的原因。

好的，我明白你的意思了。不过我不同意，所以我会保持原样。打开快捷方式窗口后，我似乎很清楚该怎么做。

在 Mojave 中，我看到应用快捷方式中没有列出任何应用程序。这是一种痛苦。 :(