customize chrome developer tool javascript debugger keyboard shortcuts?

I can't believe that neither a Google or SO search has turned up a definitive answer or even much discussion for this, but:

Is it possible to edit/customize keyboard shortcuts in the Google Chrome JavaScript debugger? if so, how?

I'm used to Eclipse's F5/F6/F7/F8 debugger step into/over/out of/resume keys, and want the same bindings in Google Chrome. F10/F11 are default Expose keys for OSX and therefore not ideal for debugger control.

I'm open to unorthodox solutions, e.g. Quicksilver/AppleScript.

Related, but not-quite-helpful, pages:

• https://stackoverflow.com/questions/1437412/
• Chrome Keyboard Shortcuts Documentation

Related:

Addy has started an issue 'Ability to customize keyboard shortcuts/key bindings for DevTools': https://code.google.com/p/chromium/issues/detail?id=174309

There's now an experimental setting to allow you to customise shortcuts!

Click on the settings button in DevTools:

Then Experiments, search for "key" and ticking Enable keyboard shortcut editor will add the Shortcuts item:

You can now customise shortcuts and there's a handy one for if you use VS Code:

You'll have to reload DevTools for it to take effect.

I did this with Karabiner. I'm using a full size keyboard (F1-F19 keys) so I mapped them to F13 to F16. This way the layout of the keys matches the layout of the buttons in Chrome. Keymap file:

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

Chrome Shortcut Manager didn't work for me, but using KeyRemap4MacBook did. More details here: https://stackoverflow.com/questions/14661878/google-chrome-developer-tools-keyboard-shortcut-customization/21053814#21053814

My solution is using Autohotkey, a tool that I use for shortcuts in any app.

I make and run an .ahk script like this:

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

It's simple: only when Chrome browser window is active, override F2 key and simulate Ctrl+b, which is official Chrome shortcut to toggle breakpoint.

I actually run my ahk script when Windows starts, so shortcuts are always active.

You can add more shortcuts. You can use different browser or app. One thing that I can't improve yet is listening for shortcuts only when web developer tools in browser are active, maybe there's a way.

There are key mappers for every OS which allow overriding default key combinations; here are a few:

• Windows
• Texter
• AutoHotKey
• OSX
• xType
• Linux
• AutoKey

Fork and extend the Chrome Shortcut Manager for native functionality.

References

• Texter

• AutoHotKey

• xType

• AutoKey

• Chrome Shortcut Manager

The only thing that worked for me was to disable the shortcuts at the OS level (or change them to something else).

In OSX, you can go to System Preferences > keyboard > Keyboard Shortcuts and change/disable the shortcuts that you need to work in Chrome.

Inspired by @jcollum's answer, here is another Karabiner private.xml definition. This one imitates my IntelliJ key bindings. See also keyboard shortcut toggling answer on 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 (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>

Inspired by @jcollum's answer, here is yet another Karabiner private.xml definition, this one implementing the specific Eclipse key bindings in the original question. See also keyboard shortcut toggling answer on 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>

Here is my Autohotkey Script for mapping Chrome Debugger Shortkeys

#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 

If you want to include the snippet in your existing ahk script, add it to the end of the script.

If anybody uses Ubuntu, setting a global shortcut is probably the best solution for the moment. Here's what worked for me:

1. Install xcape (https://github.com/alols/xcape). For Debian based systems you can run:

sudo apt-get install git gcc make pkg-config libx11-dev libxtst-dev libxi-dev
git clone https://github.com/alols/xcape.git
cd xcape
make
sudo make install

2. Run the following command to map for ex. F6 to the dev tools shortcut:

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

3. Set the shortcuts you prefer and put the relative commands in your .bash_profile for permanent results