Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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?

like image 948
Timidfriendly Avatar asked Feb 02 '13 12:02

Timidfriendly


People also ask

How to enable developer tools in chrome on Mac?

On Chrome Mac 1 Press “Option + Command + I” shortcuts key s. 2 Go to three dots menu button and navigate to “More Tools > Developer Tools”. 3 Click on the “View” menu and go to “Developer > Developer Tools”. 4 Right click on the browser content area and choose “Inspect Element” option.

What are the shortcuts for Chrome Developer Tools?

Here are the complete shortcuts for Chrome Developer Tools in Windows and Mac. Toggle developer tools to previously used position. If you have not changed the position, then it will move the developer tools to a separate window. Ctrl + . / Ctrl + , Ctrl + .

How to open Chrome Dev Tools with just F12 on Mac?

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.

How do I enable developer tools on my keyboard?

In the Menu Title input, type Developer Tools and then simply type F12 (or your own preferred shortcut) in the Keyboard Shortcut input. For Mac: System Preferences > Keyboard > Keyboard Shortcuts tab > Application Shortcuts left-tab > [plus button] Application: Chrome ...


1 Answers

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.

like image 157
isaacsgraphic Avatar answered Oct 02 '22 09:10

isaacsgraphic