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?

Answer 1

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.

Answer 2

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.

Answer 3

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>