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

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

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

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

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

Console

This tab prints the console calls from your code and allows you to write JavaScript that interacts with the current web page.

Chrome

  • macOS: command + option + j
  • Win/Lin: control + shift + j

Firefox

  • macOS: command + option + k
  • Win/Lin: control + shift + k

Debugger

This tab shows all the source code for your project and allows you to debug with breakpoints.

Firefox

  • macOS: command + option + z
  • Win/Lin: control + shift + z

Network

This tab logs all network requests and provides detailed information about the responses.

Firefox

  • macOS: command + option + e
  • Win/Lin: control + shift + e

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

  • 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!

Footnotes
  1. 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. ↩︎

About

Sean McPherson

My name is Sean McPherson (SeanMcP), and I am a software engineer and educator in Pittsburgh, PA. I have given conference talks, lead workshops, and organized meetups. Here I write articles about programming for developers of all levels.