Opening Developer Tools on Chrome, Opera, Firefox & Microsoft Edge

#webdev #javascript #productivity #tooling

Recently, I tried to help someone fixed some JavaScript error then I realize I don't know how to find the developer console on safari so... here is what I found.

To open the Chrome Developer Tools menu:

From the Chrome Menu > More Tools > Developer Tools
Right-click anywhere on a webpage and select Inspect
Use the keyboard shortcut F12 or CTRL + Shift + C (Shift + command + C on Mac)

To open the developer tools in Mozilla Firefox:

Open the browser.
Press F12 on the keyboard. or Press the Ctrl+Shift+I keys or click Menu > Web Development > Inspector.
Right-click anywhere on a webpage and select Inspect

Use the developer tools in Safari on Mac

If you’re a web developer, the Safari Develop menu
If you don’t see the Develop menu in the menu bar, choose Safari > Settings, click Advanced, then select “Show Develop menu in menu bar.”
Press the Command +option+I keys

To open the developer tools tool in Microsoft Edge:

Open the browser.
Press F12 on the keyboard. or Press Ctrl+Shift+I keys or click the Setting and more ellipsis icon, then click More tools > Developer Tools.
Right-click anywhere on a webpage and select Inspect

To open the developer tools tool in Opera:

For Mac users, to open developer tools, select View > Show Developer Menu. A new submenu called Developer will appear on the menu bar. To use the tools, select Developer > Developer Tools.
For Windows and Linux users, to open developer tools, go to O Menu > Developer > Developer Tools.

Your AI Code Assistant

Automate your code reviews. Catch bugs before your coworkers. Fix security issues in your code. Built to handle large projects, Amazon Q Developer works alongside you from idea to production code.

Get started free in your IDE