Google Chrome Developer Tools keyboard shortcut customization on Mac

Question

I use Firefox Firebug to debug but would switch to Google chrome if I could customize the keyboard shortcuts.

I need to activate and hide the 'developer tools > inspect Element', 1000 times a day. Trying to type CMD + SHIFT + C with one hand, it's a nightmare. I navigate with the mouse

The extension 'Shortcut Manager' has limited built in options. The ability to add Javascripts doesn't help me, where would you start on a task like this?

Because 'inspect Element' has no presence in the Mac menu, I can't even target it that way.

Any ideas?

There is no firebug plugin, only firebug Lite (a pure JS application running within a page) Bleh! for obvious reasons. Plus nobody is maintaining Firebug Lite at the moment. Double bleh! — Timidfriendly, Feb 02 '13 at 12:37
duplicate: http://stackoverflow.com/questions/8192714/customize-chrome-debugger-keyboard-shortcuts — ericsoco, Jul 10 '13 at 04:58

score 11 · Answer 1 · answered Nov 30 '16 at 16:13

There's a simple way to do this without any add-ons.

To open Chrome dev tools with just F12 on a Mac: Open up System Preferences > Keyboard. Check the box marked "Use all F1, F2 etc. keys as standard function keys".

Then go to the Shortcuts tab, and select App Shortcuts from the side menu. Make a new shortcut by hitting the + button, and select Google Chrome as the application. In the Menu Title input, type Developer Tools and then simply type F12 (or your own preferred shortcut) in the Keyboard Shortcut input.

This is the best answer totally ;) – chemitaxis Aug 22 '17 at 13:25 — chemitaxis, Aug 22 '17 at 13:25

score 5 · Answer 2 · edited Mar 12 '13 at 09:53

5

For Mac: System Preferences > Keyboard > Keyboard Shortcuts tab > Application Shortcuts left-tab > [plus button] Application: Chrome ... Menu title: Developer Tools (or equivalent) ... Keyboard Shortcut: F12 (if you like it like Firebug)

hope this answers your q :)

EDIT: I realize you're referring to "inspect element" which I believe on my version of Chrome is cmd+opt+C instead of your reference of cmd+shift+C (cmd+opt+c is it that hard?). Regardless, I'm +1 on having customized key commands in Chrome, as I dislike the cmd+1, 2, 3, etc when in Developer Tools when I'm trying to browse tabs and get stuck.

edited Mar 12 '13 at 09:53

nsgulliver

12,655
23
43
64

answered Mar 12 '13 at 09:33

thisisart

59
3

Nope, it's not that hard. But a little harder. My solution makes very easy and less error prone for me. Your mileage may vary. – Timidfriendly Dec 01 '16 at 10:35

score 3 · Answer 3 · answered Jan 10 '14 at 20:29

I was able to solve my problem by using the program 'KeyRemap4MacBook' https://pqrs.org/macosx/keyremap4macbook/index.html.en

I keep the default Chrome shortcuts and just alias them with the short I am used too.

To achieve this I had to click on the 'Misc & Uninstall' button. Then by 'Custom Settings' click the 'Open private.xml' button. My contents of this file are shown below.

<?xml version="1.0"?>
<root>
    <appdef>
        <appname>CHROME</appname>
        <equal>com.google.Chrome</equal>
    </appdef>


    <item>
        <name>CHROMETOFIREFOX</name>
        <appendix>this is to remap chrome inspect element to Command + `</appendix>
        <identifier>private.swap_chrome_to_ff_settings</identifier>
        <only>CHROME</only>
        <autogen>
        __KeyToKey__
        KeyCode::BACKQUOTE, ModifierFlag::COMMAND_L | ModifierFlag::NONE,
        KeyCode::C, ModifierFlag::SHIFT_L | ModifierFlag::COMMAND_L
        </autogen>
    </item>
</root>

Thanks for this! For more examples of Karabiner mappings, see the answers to this related question: http://stackoverflow.com/q/8192714/2562319 . Includes mappings for F13-F16 http://stackoverflow.com/a/30926295/2562319 , IntelliJ http://stackoverflow.com/a/37977748/2562319 , and Eclipse http://stackoverflow.com/a/37977899/2562319 . — jbyler, Jun 22 '16 at 20:57

Google Chrome Developer Tools keyboard shortcut customization on Mac

3 Answers3

Linked