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:
- Use the Microsoft Edge UI.
- Choose the Settings and more (…) icon > More Tools > Developer Tools.
- Use the keyboard.
- Press F12 or Control+Shift+I (Windows, Linux) or Command+Option+I (macOS).
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
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:
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.
Step 02: Navigate to edge://settings/system and performance.
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.
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.