seanmcp.com

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.


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":

You can also enter the dev tools through your browser's settings menu.


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".

The default tab, it allows you to inspect and edit the elements in the DOM, their properties, and styles.

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

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

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

This will open the most recently opened tab. In my experience, it's the shortcut that I reach for most often.


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!


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

Reply by email Psalm 118:19