How To: Open the Browser's Developer Tools

Step-By-Step Guideline for Opening the Browser's Developer Tools

Google Chrome:

1. Open Developer Tools:
   • Shortcut: Press Ctrl + Shift + I (on Windows/Linux) or Cmd + Option + I (on macOS).
   • Menu: Click on the three-dot menu in the top-right corner (⋮) → Select More tools → Developer Tools.
2. Open the Console Tab:
   • Inside Developer Tools, click on the Console tab, which will show you the JavaScript console where you can view logs, errors, and run JavaScript code.

Mozilla Firefox:

1. Open Developer Tools:

   • Shortcut: Press Ctrl + Shift + I (on Windows/Linux) or Cmd + Option + I (on macOS).
   • Menu: Click on the hamburger menu (≡) in the top-right corner → Web Developer → Toggle Tools.

2. Open the Console Tab:

   • Once DevTools are open, click on the Console tab.

Microsoft Edge:

1. Open Developer Tools:

   • Shortcut: Press Ctrl + Shift + I (on Windows/Linux) or Cmd + Option + I (on macOS).
   • Menu: Click on the three-dot menu in the top-right corner → More tools → Developer tools.

2. Open the Console Tab:

   • Switch to the Console tab within Developer Tools.

Safari:

1. Enable Developer Menu (if not enabled):

   • Go to Safari > Preferences > Advanced.
   • Check the box for Show Develop menu in menu bar.

2. Open Developer Tools:

   • Shortcut: Press Cmd + Option + I.
   • Menu: Click on the Develop menu in the menu bar → Show Web Inspector.

3. Open the Console Tab:

   • Inside the Web Inspector, click on the Console tab.