Google Chrome - Is it possible to have a button to open the Developer Tools

Question

So I am trying o make the switch from Firefox to Chrome and one big hurdle for me is moving from Firebug to Chrome\'s developer tools. The developer tools works fine, I\'d just

Answer 1

If you're happy with simply pressing a key, then you can have F12 work like so (instructions tested on OSX 10.8):

• Open Keyboard Shortcuts Preferences
• Click "Mission Control" from the list
• Untick "Show Dashboard" (disable default beahviour of F12)
• Click "Application Shortcuts" from the list
• Click the "+" below the right-hand list
• Select Google Chrome from the drop down list
• In "Menu Title", type Developer Tools
• Click in "Keyboard Shortcut", then press F12

Open Chrome, and press F12 - Dev Tools should open right up!

---

I have set F12 to open Dev Tools, and F5 to Refresh the page

Answer 2

Maybe Fn-F12 will do the trick? (IIRC, you can switch between the default behavior of F-keys in your system settings). Otherwise, it's ⌥⌘I or ⌥⌘J (the latter opens the console by default.) There is a good doc about the Web Inspector/DevTools shortcuts.

That said, Google Chrome's design is explicitly minimalistic to avoid UI clutter and reduce the chance of the user getting confused by the things they actually never use, so there is no way to invoke DevTools using a UI button.