DEV Community

Cover image for Opening Developer Tools on Chrome, Opera, Firefox & Microsoft Edge
Ebenezer Enietan (Niza)
Ebenezer Enietan (Niza)

Posted on

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

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.

Top comments (2)

Collapse
 
fruntend profile image
fruntend

Сongratulations 🥳! Your article hit the top posts for the week - dev.to/fruntend/top-10-posts-for-f...
Keep it up 👍

Collapse
 
niza profile image
Ebenezer Enietan (Niza)

Thank you