Inspect Element shortcut Edge on Windows 10

Guide to Inspect Element shortcut and View Source Page – If you’re a developer, you’ll have to look at the source code of web pages on a regular basis. Inspect element tool can also be used to locate a specific code and design section of a web page. If you’re using Microsoft Edge and looking for the View Source and Inspect Element options, you should know that they’re disabled by default.

When you right-click on a web page, the options Inspect Element and View Source appear in the context menu. When you right-click on a website page, popular browsers like Chrome and Firefox display these two options by default.

Because most users don’t need these features, Microsoft Edge has turned them off by default. So, in order for them to appear on Edge, you’ll need to make some adjustments to the Developer settings. Instead of displaying the tools on the right-click context menu, you may use keyboard shortcuts to launch them immediately.

Open Microsoft Edge DevTools or Inspect Element Shortcut

Microsoft Edge DevTools may be used in a variety of ways, allowing you to rapidly access different elements of the UI. To open DevTools, use either of the following options:

  1. Use the Microsoft Edge UI.
    • Choose the Settings and more () icon > More Tools > Developer Tools.
  2. Use the keyboard.
    • Press F12 or Control+Shift+I (Windows, Linux) or Command+Option+I (macOS).
Inspect Element shortcut img1

Open the Elements panel to inspect the DOM or CSS

To inspect the styles or attributes of a Document Object Model (DOM) node while viewing a rendered webpage in the browser, do one of the following:

  • Right-click the element in the rendered webpage and select Inspect.
  • Press Control+Shift+C (Windows, Linux) or Command+Option+C (macOS).

Open the Console panel

Press Control+Shift+J (Windows, Linux) or Command+Option+J (Mac) to enter the Console window and view logged messages or run JavaScript (macOS).

Open the previous panel

Press Control+Shift+I (Windows, Linux) or Command+Option+I (MacOS) to return to the previous open panel.

Auto-open DevTools on every new tab

Open Microsoft Edge from the command line and use the –auto-open-devtools-for-tabs flag to automatically open DevTools on every new tab.

For cmd on Windows:

start msedge --auto-open-devtools-for-tabs

Paste the following code For Powershell on Windows:

Start-Process -FilePath "msedge" -ArgumentList "--auto-open-devtools-for-tabs"

For bash on macOS:

/Applications/Microsoft\ Edge\ Beta.app/Contents/MacOS/Microsoft\ Edge\ Beta --auto-open-devtools-for-tabs

Paste the following code For bash on Linux:

microsoft-edge-dev --auto-open-devtools-for-tabs

Toggle the F12 keyboard Inspect Element shortcut on or off

Complete the following steps to alter the F12 keyboard shortcut that launches the DevTools:

Step 01: First, click the Edge icon that appears on Windows 10 taskbar.

edge tap

Step 02: Navigate to edge://settings/system and performance.

dev setting

Step 03: When you tap the F12 key, pick Open the DevTools to toggle the option off or on in Developer Tools. Toggle the option off to prevent DevTools from being launch via the F12 keyboard shortcut.

toggle on or off

Step 04: Verify that F12 no longer opens DevTools after you turn off the toggle.

That’s all for this article, stay connected because we will go through every keyboard shortcut of edge in the next couple of articles. So if you have any confusion contact us through our website or email us at [email protected] or by using LinkedIn.

Leave a Comment