customize chrome developer tool javascript debugger keyboard shortcuts?

Question

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:

nope. i did find this though: https://developers.google.com/chrome-developer-tools/docs/shortcuts — ericsoco, Jul 31 '12 at 22:17
and also this: http://stackoverflow.com/questions/1437412/google-chromes-javascript-console-keyboard-shortcuts but nothing on editing the shortcuts. — ericsoco, Jul 31 '12 at 22:20
Ok, thanks for the update. It's too bad they don't allow for this. You'd think a lot of people switching from Eclipse to chrome-dev would want something like this. — Ben Siver, Aug 01 '12 at 13:26
possible duplicate of [Google Chrome Developer Tools keyboard shortcut customization](http://stackoverflow.com/questions/14661878/google-chrome-developer-tools-keyboard-shortcut-customization) — Paul Sweatte, Jun 09 '15 at 05:09
@PaulSweatte did you notice I already marked that other question as a possible dupe of this one?...two years ago ;) — ericsoco, Jun 13 '15 at 03:39
DevTools tech writer / developer advocate here. As of today this feature still doesn't exist. Getting it native in DevTools is probably just a matter of prioritization. Let the DevTools team know it's important to you by starring [issue #174309](https://bugs.chromium.org/p/chromium/issues/detail?id=174309). — Kayce Basques, Jul 31 '17 at 22:31

score 14 · Answer 1 · answered Apr 06 '14 at 13:07

14

answered Apr 06 '14 at 13:07

s10wen

193
2
7

Thanks for the heads up! Cross-linked. – ericsoco Apr 07 '14 at 04:37
1

That issue just got updated as "Status: Available". So I imagine we'll start seeing something rollout soon. – SteveShaffer Apr 29 '16 at 01:46
Looking forward to that day we can comfortably show/hide Console with one hand. – Leo May 19 '16 at 22:00
@LeoTM: show/hide console with `Esc`. Also: status changed on that to 'Assigned' on July 8 – ebpa Jul 13 '16 at 01:51
1

@ebpa `Esc` only applies once the console is open, not straight from browser. Nice just starred the issue, will keep checking up. – Leo Jul 13 '16 at 17:25

score 9 · Answer 2 · answered Sep 04 '21 at 10:56

9

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.

answered Sep 04 '21 at 10:56

John Leonard

909
11
18

Weirdly this just doesn't seem to work *at all*. Or maybe it just doesn't accept certain hotkeys? I tried both cmd+2 and ctr+2 for "step over" and even after restart it just doesn't respond at all. The GUI shows the new hotkey in the tooltips though.. – boxed Jan 17 '23 at 07:24
Works for me and I guess a few others if it was upvoted :) have you tried F10 for step over? – John Leonard Jan 17 '23 at 11:12
The default shortcuts work yes. But changing them? Nope. Had to use karabiner to map the keys I wanted. – boxed Jan 18 '23 at 12:52

score 3 · Answer 3 · edited May 26 '16 at 13:44

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>

score 2 · Answer 4 · edited May 23 '17 at 11:46

2

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

edited May 23 '17 at 11:46

Community

1
1

answered Jan 10 '14 at 20:37

Timidfriendly

3,224
4
27
36

Note that KeyRemap4MacBook has since been renamed to Karabiner. In addition to the link given in this answer, see other answers on this page that reference Karabiner, for similar solutions on Mac OS X. – jbyler Aug 16 '16 at 22:30

score 2 · Answer 5 · answered Dec 19 '17 at 09:56

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.

That's dope. I use autohotkey for a bunch of things like that. I used the beginning of your code to replace a double right-click with the element inspector (original shortcut is ctrl + shift + c). I'm gonna save a decent amount of time! If anyone wanna try that out: `#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` — Max, May 30 '20 at 13:35

Paul Sweatte · Answer 6 · 2017-03-21T14:09:27.597

1

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

edited Mar 21 '17 at 14:09

answered Aug 21 '12 at 18:33

Paul Sweatte

24,148
7
127
265

This looks promising! Thanks for the heads-up. Marking this as answered, pending it actually does what it claims to (haven't tested it yet). – ericsoco Aug 22 '12 at 19:03
3

This doesn't support rebinding the developer tools. – danyim Feb 13 '15 at 20:30
@ericsoco It does not look like the answer - does not work for me. If you managed to make it work for dev tools, could you tell us how? – Konstantin May 20 '15 at 08:14
Agree, that this does not allow to customize DevTools shortcuts. Plus, using an extension that was last time updated 5,5 year ago (December 2009) isn't something, that I'd like to do. – trejder Jun 08 '15 at 07:46
1

@trejder nope, I was trigger-happy on the acceptance. Still haven't found a good answer. There are some key mapper tools out there that are not application-specific, but that's more work than I think is justified for this specific need. – ericsoco Jun 13 '15 at 03:41
@raacer http://superuser.com/questions/980733/how-to-send-using-autokey-on-ubuntu-14-04 – Paul Sweatte Mar 04 '16 at 16:00

score 1 · Answer 7 · answered Apr 09 '13 at 16:37

1

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.

answered Apr 09 '13 at 16:37

Filipe Correia

5,415
6
32
47

1

This has no effect in Chrome Developer Tools. – Donald T Sep 11 '14 at 16:28
@jcollum can you elaborate on what is missing? This is all the information that I have and would like to know a better solution if there is one. – Filipe Correia Jul 12 '16 at 17:45
Well you need to go to App Shortcuts after opening Keyboard Shortcuts. Then... do what? Don't know. That's why it's incomplete. – jcollum Jul 14 '16 at 17:47
Ok, I see what you mean. I don't agree, though, so I'll leave it as it is. It seems very obvious to me how to do it once you open the shortcuts window. – Filipe Correia Jul 15 '16 at 16:15
In Mojave, I see no applications listed in App Shortcuts. This is such a pain. :( – ankush981 Sep 06 '20 at 12:44

score 1 · Answer 8 · edited Apr 13 '17 at 12:45

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>

score 1 · Answer 9 · edited Apr 13 '17 at 12:45

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>

score 1 · Answer 10 · answered Apr 18 '18 at 07:51

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.

score 0 · Answer 11 · answered May 30 '17 at 08:21

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

customize chrome developer tool javascript debugger keyboard shortcuts?

11 Answers11

Linked