Every browser provides web development tools to test and debug code. Developer Tools will consist of different tools to diagnose website code issues and helps to fix them quickly.

The developer console helps to build a website easier and often used by developers to log messages to the console to test javascript.

In this posting, we will briefly explain how to open the Developer console on different browsers.

How to Open the DevTools in Chrome

  • To open the developer tools (also known as DevTools) in Google Chrome, click the three-dot option symbol on the browser's upper right side.
  • In the drop-down menu, click “More tools”.
  • Then click “Developer tools” in the side-drop menu.
Google chrome homepage with highlight on the steps to developer tools
Chrome developer tool
  • Lastly, select “Console” tab.

Shorcut key to open inspect as follows:

  • Use the Google Chrome hotkey, Press Ctrl + Shift + I, and select the “Console” Option.
  • Likewise, you can press Ctrl + Shift + J to open the Console tab directly.
Google chrome homepage with console tab
Chrome developer tool page

How to Open Developer Console in Firefox

  • To open the developer panel in Google Chrome, click the Firefox menu on the browser's upper left side.
  • In the drop-down menu, click “Web Developer”.
Mozilla firefox homepage with highlight on the steps to developer tools
Firefox developer tool
  • Then click “Web Console” on the side-drop menu.

Alternatively, to use the Mozilla Firefox hotkey, Press Ctrl + Shift + K.

Mozilla firefox homepage with console tab
Firefox developer tool page

How to Open Developer Console in Microsoft Edge

  • To open the developer tool in Microsoft Edge, click the three-dot option symbol on the browser's upper right side.
  • In the drop-down menu, click “More tools”.
Microsoft edge homepage with highlight on the steps to developer tools
Edge developer tool
  • Then click “Developer tools” in the side-drop menu.
  • Lastly, select “Console”.

To use the Microsoft Edge hotkey, Press Ctrl + Shift + I and select “Console” or Ctrl + 2.
Alternatively, you can also press the F12 key from the homepage and select “Console” or Ctrl + 2.

Microsoft edge homepage with console tab
Edge developer tool page

How to Open the Developer Console in Safari

  • To open the developer tool in Safari, you must enable the “Develop menu” first in the browser setting. To do this, press Ctrl +, or click the safari settings icon on the browser's upper right side.
  • In the drop-down menu, click “Preference”.
safari homepage with highlight on the steps to preference
Safari settings
  • On the Preference tab, click “Advanced”. Then check the “Show Develop menu in menu bar” and close the tab.
Microsoft edge homepage with settings tab
Safari advance settings
  • To open the console, click the “Develop” option in the menu bar.
  • Then, in the drop-down menu, click “Show error console”.
Microsoft edge homepage with highlight on the steps to console page
Safari developer tool

To use the Safari hotkey, Press Ctrl + Alt + C.

Alternatively, you can right-click the webpage and click “Inspect Element”. Then select “Console” on the tab menu of the developer window.

safari homepage with console tab
Safari developer tool page

How to Open the Developer Console in Opera

  • To open the developer tool in Opera, click the Opera menu on the browser's upper left side.
  • In the drop-down menu, click “Developer”.
Opera homepage with highlight on the steps to developer tools
Opera developer tool
  • Then click “Developer tools” in the side-drop menu.
  • Lastly, select “Console”.

Alternatively, use the Opera hotkey, Press Ctrl + Shift + I, and select “Console”.

Opera homepage with console tab
Opera developer tool page

If you have further questions or suggestions about these, feel free to drop a comment below. We promise to help with any difficulty.