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

Question

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

是否可以在 Google Chrome JavaScript 调试器中编辑/自定义键盘快捷键？如果是这样，怎么办？

我习惯了 Eclipse 的 F5/F6/F7/F8 调试器单步进入/越过/退出/恢复键，并希望在 Google Chrome 中具有相同的绑定。 F10/F11 是 OSX 的默认 Expose 键，因此不适合调试器控制。

我对非正统的解决方案持开放态度，例如 Quicksilver/AppleScript。

相关但不太有帮助的页面：

• Google Chrome 的 Javascript 控制台键盘快捷键
• Chrome 键盘快捷键文档

Answer 1

相关：

Addy 发起了一个问题“能够为 DevTools 自定义键盘快捷键/键绑定”：
https://code.google.com/p/chromium/issues/detail?id=174309< /a>

Answer 2

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

单击 DevTools 中的设置按钮：

然后实验，搜索“key”并勾选启用键盘快捷键编辑器将添加快捷键项目：

.png" rel="noreferrer">

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

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

Answer 3

我用 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>

Answer 4

我的解决方案是使用 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 开发人员工具处于活动状态时才侦听快捷方式，也许有一种方法。

Answer 5

Chrome 快捷方式管理器对我不起作用，但使用 KeyRemap4MacBook 可以。更多详情请参见：Mac 上的 Google Chrome 开发者工具键盘快捷键自定义< /a>

Answer 6

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

在 OSX 中，您可以转到系统偏好设置 >键盘>键盘快捷键并更改/禁用在 Chrome 中使用所需的快捷键。

Answer 7

受 @jcollum 答案的启发，这里还有另一个 Karabiner private.xml 定义，这个实现了原始问题中的特定 Eclipse 键绑定。另请参阅 apple.stackexchange.com 上的键盘快捷键切换答案。

<?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>

Answer 8

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

• Windows
  • 发短信
  • 自动热键
• OSX
  • x类型
• Linux
  • 自动键

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

参考

• 短信

• AutoHotKey

• xType

• 自动键

• Chrome 快捷方式管理器

Answer 9

这是我的 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 脚本中包含该代码段，请添加它到脚本的末尾。

Answer 10

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

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

   sudo apt-get install git gcc make pkg-config libx11-dev libxtst-dev libxi-dev
   git 克隆 https://github.com/alols/xcape.git
   光盘xcape
   制作
   须藤进行安装
   

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

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

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