customize chrome developer tool javascript debugger keyboard shortcuts?

Solution 1:

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

Solution 2:

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.

Solution 3:

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>