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:

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

Timidfriendly

Chrome Shortcut Manager didn't work for me, but using KeyRemap4MacBook did. More details here: Google Chrome Developer Tools keyboard shortcut customization on Mac

jcollum

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>

jbyler

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>

jbyler

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>

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

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.

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.

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

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

Run the following command to map for ex. F6 to the dev tools shortcut:
```
xcape -e 'F6=Control_L|Shift_L|I'
```
Set the shortcuts you prefer and put the relative commands in your .bash_profile for permanent results

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.

来源：https://stackoverflow.com/questions/8192714/customize-chrome-developer-tool-javascript-debugger-keyboard-shortcuts

标签

google-chrome

google-chrome-devtools

keyboard-shortcuts

customization

javascript-debugger