How to open the Dev Tools
As a web developer, one of the most powerful tools in your arsenal is the browser's developer tools.
Here is a list of all the ways to access the dev tools for your browser and operating system.
With your mouse
Permalink to “With your mouse”In the window
Permalink to “In the window”You can enter the dev tools with the mouse by right clicking on any element. In the menu that appears, select "Inspect" or "Inspect Element":
- Chrome:
Right click > Inspect
- Firefox:
Right click > Inspect Element
Through settings
Permalink to “Through settings”You can also enter the dev tools through your browser's settings menu.
- Chrome:
Three dot menu > More tools > Developer tools
- Firefox:
Three bar menu > Web Developer > Toggle Tools
Keyboard shortcuts
Permalink to “Keyboard shortcuts”Beyond the mouse, there are shortcuts that you can use to open the dev tools without leaving your keyboard.
The shortcuts differ by browser and operating system, so I've tried to group them logically below.[1] Windows and Linux commands are the same, so I've comibined them into "Win/Lin".
Elements/Inspector
Permalink to “Elements/Inspector”The default tab, it allows you to inspect and edit the elements in the DOM, their properties, and styles.
Chrome & Firefox
Permalink to “Chrome & Firefox”- macOS: command + option + c
- Win/Lin: control + shift + c OR F12
Console
Permalink to “Console”This tab prints the console calls from your code and allows you to write JavaScript that interacts with the current web page.
Chrome
Permalink to “Chrome”- macOS: command + option + j
- Win/Lin: control + shift + j
Firefox
Permalink to “Firefox”- macOS: command + option + k
- Win/Lin: control + shift + k
Debugger
Permalink to “Debugger”This tab shows all the source code for your project and allows you to debug with breakpoints.
Firefox
Permalink to “Firefox”- macOS: command + option + z
- Win/Lin: control + shift + z
Network
Permalink to “Network”This tab logs all network requests and provides detailed information about the responses.
Firefox
Permalink to “Firefox”- macOS: command + option + e
- Win/Lin: control + shift + e
Most recent
Permalink to “Most recent”This will open the most recently opened tab. In my experience, it's the shortcut that I reach for most often.
Chrome & Firefox
Permalink to “Chrome & Firefox”- macOS: command + option + i
- Win/Lin: control + shift + i
Phew! That was a bigger undertaking than I first imagined. If I made any mistakes, please let me know.
I hope that helps! Happy tooling!
I spent a good deal of time debating how to outline this article. I eventually decided to group things by dev tool tab instead of browser or operating system. There is more in common than not, so this seemed the simplest. ↩︎