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
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”:
Right click > Inspect
Right click > Inspect Element
You can also enter the dev tools through your browser’s settings menu.
Three dot menu > More tools > Developer tools
Three bar menu > Web Developer > Toggle Tools
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. Windows and Linux commands are the same, so I’ve comibined them into “Win/Lin”.
The default tab, it allows you to inspect and edit the elements in the DOM, their properties, and styles.
Chrome & Firefox
- macOS: command + option + c
- Win/Lin: control + shift + c OR F12
- macOS: command + option + j
- Win/Lin: control + shift + j
- macOS: command + option + k
- Win/Lin: control + shift + k
This tab shows all the source code for your project and allows you to debug with breakpoints.
- macOS: command + option + z
- Win/Lin: control + shift + z
This tab logs all network requests and provides detailed information about the responses.
- macOS: command + option + e
- Win/Lin: control + shift + e
This will open the most recently opened tab. In my experience, it’s the shortcut that I reach for most often.
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. ↩︎