How To Open The Developers Console in Your Web Browser

The developer console of your browser can help you find errors in the JavaScript code of some of your web pages or inspect the elements within the HTML. We show you how to access the element inspector of the developers console in Google Chrome, Firefox, Safari and Internet Explorer. This way you can see the specific HTML of an element and search for its ID or CSS selector.

Accessing Inspect Element in Different Web Browsers

Inspect Element is useful enough that it is included as a developer tool in all major desktop web browsers. Here’s how to access Inspect Element in Google Chrome, Firefox, Safari, and Internet Explorer.

Google Chrome

To use Inspect Element in Google Chrome, you have a few different options:

  • Right-click any area of the web page (including blank areas) and then select Inspect from the menu.
  • Access the Google Chrome settings menu (the three vertical dots in the upper right-hand corner of the browser window control panel). In the drop-down menu, select More Tools, then Developer Tools.

Firefox

Similarly to Google Chrome, Firefox also provides multiple Inspect-Element access options:

  • Right-click any area of the web page (including blank areas) and then select inspect from the menu.
  • Access the Firefox settings menu. Choose Tools, then select Web Developer, and finally select Inspector.

Safari

Safari follows suit, but before you can use Inspect Element, you’ll need to access the Safari settings menu. In the upper left of your screen, select Preferences, and then check the box that says Show develop menu in menu bar. Once you’ve done that, then use the following options:

  • Right-click any area of the web page (including blank areas) and then select Inspect from the menu.
  • Access the menu bar and click Develop, then select Show Web Inspector from the dropdown menu.

Internet Explorer

Internet Explorer also offers developer tools which allow for Inspect-Element functionality:

  • Right-click on the page, and choose Inspect Element from the popup menu.
  • Access the control panel by clicking the gear icon in the upper right of the browser window, or by pressing Alt+X. Select F12 Developer Tools in the dropdown menu.

Keyboard shortcuts

You can also skip the different menus and instead access Inspect Element directly by using keyboard shortcuts. While on any web page, enter the following keyboard commands:

  • Mac: ⌘ + Shift + C
  • Windows/Linux: F12 or Ctrl + Shift + C