Skip to main content

Enable Developer Tools for Your Browser

Read this article for instructions on how to access developer tools in your browser.

Jeffrey Eng avatar
Written by Jeffrey Eng
Updated over a week ago

For Students

Google Chrome DevTools

Developer tools are enabled by default on Google Chrome. You can open them using a keyboard shortcut or through the Chrome menu.

Keyboard Shortcuts

To open Google Chrome DevTools, press F12 on Windows or Option + ⌘ + I on Mac.

Chrome Menu

To open DevTools via the Chrome user interface:

  1. Click the three vertically aligned dots in the top right corner of your Chrome window to open the Customize and Control Google Chrome menu.

  2. In the dropdown menu, select More Tools.

  3. In the More Tools sub-menu, select Developer Tools.

Inspect

You can also access the tools by right-clicking the page and selecting "Inspect".

Safari Web Inspector

Safari refers to its developer tools as the Web Inspector. Before you can use the Web Inspector, you must first enable Safari's developer features.

To enable developer tools on the Safari desktop application:

  1. Open a Safari browser window.

  2. In the top menu bar of your Mac, click Safari and navigate to Settings.

  3. In the Safari Settings window, open the Advanced tab.

  4. Check the box labeled "Show features for web developers."

Safari developer tools are now enabled, and the Develop menu will appear in the top menu bar of your Mac whenever a Safari window is active.

You can access Safari's developer tools by opening either the Web Inspector or the JavaScript Console. Both options open the same tools. Opening the Web Inspector defaults to the Elements tab, whereas opening the JavaScript Console defaults to the Console tab.

Safari Web Inspector with the Elements tab open.

Keyboard Shortcuts

To open the developer tools to the Elements tab, press: Option + ⌘ + I

To open the developer tools to the Console tab, press: Option + ⌘ + C

Develop Menu

Select the Show Web Inspector option in the Develop menu to open the Safari developer tools to the Elements tab.

Select the Show JavaScript Console option in the Develop menu to open the Safari developer tools to the Console tab.

Microsoft Edge DevTools

Just like Google Chrome, the Microsoft Edge developer tools are enabled by default.

Keyboard Shortcut

You can access them by pressing F12 or Ctrl + Shift + I.

Inspect

The DevTools are similarly accessible by right-clicking a page and selecting Inspect.

Edge Menu

To access Edge developer tools using the menu:

  1. Click the three horizontal dots at the top right of the window.

  2. In the dropdown menu, select to More tools.

  3. In the More tools sub-menu, select Developer tools.

Opera

For Mac users:

To open developer tools, select View > Show Developer Menu.

A new sub-menu 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.

If your browser is not listed here or you require additional help, please read the respective documentation for your web browser.

Did this answer your question?