CODEWITHSUNDEEP
macosgoogle-chromekeyboard-shortcutscustomizationdeveloper-tools
Timidfriendly
Timidfriendly

Reputation: 3284

Google Chrome Developer Tools keyboard shortcut customization on Mac

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?

Upvotes: 11

Views: 18612

Answers (4)

Abel Wenning
Abel Wenning

Reputation: 651

Opt + Cmd + j opens DevTools Console. It may be an easier combination (because 2 are adjacent, and 1 is other hand)

Upvotes: 0

isaacsgraphic
isaacsgraphic

Reputation: 174

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.

Upvotes: 14

Timidfriendly
Timidfriendly

Reputation: 3284

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>

Upvotes: 3

thisisart
thisisart

Reputation: 59

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.

Upvotes: 5

Related Questions