Posted   by 

Ms Edge Chrome



Google Chrome remains the king of the web browsers, with a 66% market share as of September 2020.Microsoft’s newest Edge browser, which uses the Chromium open-source engine, is in fifth-place at. Apr 09, 2021 However, Edge tends to perform a bit better than Chrome—not only in web browsing benchmarks, but in hardware usage. While Chrome has become notorious for gobbling up RAM and other resources. Jun 22, 2020 Final Verdict: Microsoft Edge and Chrome Are Becoming More Alike Every Day. Many of the differences discussed here are evident in the current versions of Chrome and Microsoft Edge. However, some will disappear before long.

-->

When you install Microsoft Edge, you get a browser. Also, you get a powerful way to inspect, debug, and even create web projects. The Developer Tools shipped with the browser are based on the tools in the Chromium open-source project, so you may already be familiar with the tools. To keep descriptions shorter in this article, the Microsoft Edge Developer Tools are now referred to as DevTools .

Use DevTools to review and learn more about the following development tasks.

  • Inspect and change the current webpage live in the browser.
  • Emulate how your product behaves on different devices and simulate a mobile environment complete with different network conditions.
  • Inspect, tweak, and change the styles of elements in the webpage using live tools with a visual interface.
  • Debug your JavaScript using breakpoint debugging and with the live console.
  • Find accessibility, performance, compatibility, and security issues in your products and learn how to use DevTools to fix each.
  • Inspect the network traffic and review the location of the problems.
  • Inspect where the browser stored content in various formats.
  • Evaluate the performance of your product to find memory problems and rendering issues.
  • Use a development environment to sync changes in DevTools with the file system and override files from the web.

And a lot more. It all starts when you open DevTools and customize each tool to your needs.

Open the DevTools

To open and explore the DevTools, use one any of the following actions.

  • Hover on any element on the webpage, open the contextual menu (right-click), and then choose Inspect. This action opens the Elements tool.
  • Select F12.
  • Select Ctrl+Shift+I on Windows/Linux or Command+Option+I on macOS.

There are two main ways to interact with the DevTools.

  • Use the mouse
  • Keyboard shortcuts. Keyboard shortcuts provide a quick way to access functionality and are needed for accessibility. The Microsoft Edge DevTools team works hard to make all the tools available using the keyboard and assistive technologies such as screen readers. For more information about how to open the different features in the DevTools, navigate to Microsoft Edge DevTools keyboard shortcuts.

Dock the DevTools in your browser

When you open the DevTools, it docks to the left of your browser. To change the docked location of the DevTools, complete the following actions.

  1. Choose the Customize And Control DevTools (...) button.
  2. To the right of Placement of the DevTools relative to the page (Dock side), choose a Dock side option.
Chromecast

For more information, navigate to Change Microsoft Edge DevTools placement (Undock, Dock To Bottom, Dock To Left).

In Dock side, choose any of the following layout options.

  • Undock into separate window. Helps you work with several monitors or if you need to work on a full screen app.
  • Dock to left or Dock to right. Helps you keep the DevTools side by side with your web product, and is excellent when you emulate mobile devices. The Dock to left and Dock to right options work best with high-resolution displays. For more information about emulation devices, navigate to Emulate mobile devices in Microsoft Edge DevTools.
  • Dock to bottom. Helps you when you do not have enough horizontal display space, or you want to debug long text in the DOM or Console.

Learn about the core tools

DevTools give you an amazing amount of power to inspect, debug, and change the web product currently displayed in the browser. Most of the tools display the changes live. Live updates make the tools incredibly useful to refine the appearance and navigation or functionality of a web project without the need to refresh or build it. The DevTools also allow you to change web-based third-party products on your computer.

DevTools grew over a period of several years. You may assume that DevTools are difficult to learn when you first open any of tools. The following text quickly introduces the different parts. The main toolbar offers you a few sections and the sections are ordered from left to right.

  • The Inspect Tool allows you to choose an element on the current webpage. After you activate it, you may move your mouse over different parts of the webpage to get detailed information about the element and a color overlay to display dimensions, padding, and margin.

  • The Device Emulation tool displays the current web product in an emulated device mode. The Device Emulation tool allows you to run and test how your product reacts when you resize the browser. It also gives you an estimation of the layout and behavior on a mobile device.

  • The Tools tab group is a group of tabs that represent different tools that are used in different scenarios. You may customize each of the tools and each tool may change based on the context. To open a dropdown menu of more tools, choose the More tabs (>>) button. Each of the tools is introduced later in the following section.

  • Next to the Tools tab group are optional error and issues shortcuts. The shortcuts display when JavaScript errors or issues occur on the current webpage. The Open Console to view # errors, # warnings (JavaScript Errors) button displays a red circle with an X followed by the number of JavaScript errors. To open the Console and learn about the error, choose the JavaScript Errors button. The Open Issues to view # issues (Issues) button is a blue message icon followed by the number of issues. To open the Issues tool, choose Issues button.

  • The Settings button displays a gear icon. To open DevTools Settings webpage, choose the Settings button. The Settings webpage displays a menu to change Preferences, turn on Experiments, and much more.

  • The Send Feedback button displays torso with a chat bubble next to it. To open the Send Feedback dialog, choose the Send Feedback button. The Send Feedback dialog allows you to enter information to describe what happened and automatically includes a screenshot. Use it to connect with the DevTools team to report problems, issues, or suggest ideas.

  • The Customize and control Devtools (...) button opens a dropdown menu. It allows you to define where to dock the DevTools, search, open different tools, and much more.

In the Tools tab group, you may open the different tools that are available in the DevTools. The following list describes the most commonly used tools in the DevTools.

Ms Edge Chrome

  • Welcome. Includes information about the new features of DevTools, how to contact the team, and provides information about certain features.
  • Elements. Allows you to edit or inspect HTML and CSS. You may edit both in the tool and display the changes live in the browser.
  • Console. Allows you to display and filter log messages. Log messages are automated logs of the browser like network requests and developer-generated logs. You may also run JavaScript directly in the Console in the context of the current window or frame.
  • Sources. A code editor and JavaScript debugger. You may edit projects, maintain snippets, and debug your current project.
  • Network. Allows you to monitor and inspect requests or responses from the network and browser cache. You may filter requests and responses to fit your needs and simulate different network conditions. Other specialized tools are also available, such as Performance, Memory, Application, Security, and Audits.

Power tip: Use the command menu

The DevTools provides lots of features and functionality to use with your web product. Access the different parts of the DevTools in many ways, but the fastest way to access the features you need is to use the command menu. For more information, navigate to Run commands with the Microsoft Edge DevTools Command menu. To open the command menu, complete one of the following actions.

  • Select Control+Shift+P (Windows, Linux) or Command+Shift+P (macOS).
  • Choose Customize And Control DevTools (...), and then choose Run Command.

The command menu allows you to type commands to display, hide, or run features in the DevTools. With the command menu open, enter the word changes, and then choose Drawer Show Changes. The Changes tool opens which is useful when you edit CSS, but is difficult to find in the DevTools UI.

Customize the DevTools

DevTools are customizable to meet your needs or the way you work. To change settings, complete one of the following actions.

  • Choose Settings (the gear icon on the top right)
  • Select F1 or ?.

In the Preferences section, you may change several parts of the DevTools. For example, you may use the Match the browser language setting to use the same language in the DevTools that is use in your browser. For another example, use the Theme setting to change the theme of the DevTools.

You may also change the settings of advanced features including the following features.

  • Workspaces.

  • Filter library code with the Ignore List.

  • Define the Devices you want to include in the device simulation and test mode. For more information, navigate to Emulate mobile devices in Microsoft Edge DevTools.

  • Choose a network Throttling profile.

  • Define simulated Locations.

  • Customize keyboard shortcuts. To use the same shortcuts in the DevTools as Visual Studio Code, complete the following actions.

    1. Choose Match shortcuts from preset.
    2. Choose Visual Studio Code.

Try experimental features

The DevTools team provides new features as experiments in the DevTools. To get the full list of experiments, navigate to the DevTools Settings, and then choose Experiments. You may turn each of the experiments on or off. Help decide which one of the experiments is valuable to you. For more information on the experiments, navigate to Experimental features.

Getting in touch with the Microsoft Edge DevTools team

Use the following options to discuss the new features and changes in the post, or anything else related to DevTools.

  • Send your feedback using the Send Feedback icon or select Alt+Shift+I (Windows, Linux) or Option+Shift+I (macOS) in DevTools.
  • Tweet at @EdgeDevTools.
  • Submit a suggestion to The Web We Want.
  • To file bugs about this article, use the following Feedback section.

If you want to preview the latest features coming to the DevTools, download Microsoft Edge Canary, which builds nightly.

See also

Alongside all the features and improvements in the roadmap for the new version of Microsoft Edge based on the Chromium engine, Microsoft includes a compatibility mode using the Internet Explorer rendering engine to load old websites.

The feature is known as “IE Mode,” and it has been designed for organizations to load internal sites without using a separate browser or having to redesign the site. The new approach loads the pages within Microsoft Edge like a regular website without using and managing multiple browsers.

If you want to start using it, the version of Microsoft Edge available through the stable channel now includes the “Internet Explorer compatibilities” settings to quickly enable IE Mode and a separate option to open Edge when browsing an incomparable website with Internet Explorer. Alongside the settings, it also possible to use the Group Policy Editor to configure the compatibility mode.

In this guide, you will learn the steps to enable IE Mode to load legacy websites using the Internet Explorer rendering engine on Chromium Edge for Windows 10. (You can also watch this video tutorial to configure the feature.)

How to enable IE mode on Microsoft Edge

To enable IE mode on Edge, use these steps:

  1. Open Microsoft Edge on Windows 10.

  2. Click the Settings and More (ellipsis) button on the top-right corner.

  3. Select the Settings option.

  4. Click on Default browser.

  5. Under the “Internet Explorer compatibility” section, turn on the “Allow sites to be reloaded in Internet Explorer mode” toggle switch.

  6. Click the Restart button.

Once you complete the steps, when sites require Internet Explorer, you can use Microsoft Edge to reload the page using IE mode.

Open site with IE Mode on Edge

After the IE Mode is enabled, you need to reload a page with the compatibility mode manually.

Ms Edge Chrome Based

To open an incompatible website with IE Mode on Edge, use these steps:

  1. Open Microsoft Edge on Windows 10.

  2. Click the Settings and More (ellipsis) button on the top-right corner.

  3. Select the More tools submenu and choose the “Reload in Internet Explorer mode” option.

After you complete the steps, the website should reload in compatibility mode. If the feature is not enabled, then the option won’t be available in the menu.

If you want to exit IE Mode, you can use the same instructions, but on step No. 3, select the Exit Internet Explorer mode option.

Open Internet Explorer sites on Microsoft Edge

On Windows 10, Microsoft Edge also lets you configure the browser so that when someone is using Internet Explorer incompatible or all sites will load within Edge.

To let IE open websites with Edge, use these steps:

  1. Open Microsoft Edge on Windows 10.

  2. Click the Settings and More (ellipsis) button on the top-right corner.

  3. Select the Settings option.

  4. Click on Default browser.

  5. Under the “Internet Explorer compatibility” section, use the “Let Internet Explorer open sites in Microsoft Edge” drop-down menu and select the option to handle browsing when using Internet Explorer, including:

    • Never – IE will never switch to Edge to load the site.
    • Incompatible sites only – IE will still load sites, but websites designed for a modern browser will load in Edge.
    • Always – IE will always switch to Edge to load websites.

Once you complete the steps, when surfing the web in Internet Explorer, websites will open on Microsoft Edge, according to your configuration.

How to enable IE mode with Group Policy on Microsoft Edge

Alternatively, you can also enable IE Mode on Chromium Edge with Group Policy. However, you will need to download and install the policy template before you can configure the Group Policy settings.

Edge

Install Microsoft Edge policy template

To install the policy template to enable IE Mode on Edge, use these steps:

  1. Open Microsoft Edge for business website.

  2. Under the “Policy File” section, click the Download button.

  3. Select the version of Microsoft Edge. (Usually, you want to use the latest stable version available.)

  4. Select the build (latest version available).

  5. Select the platform — for example, Windows 64-bit.

  6. Click the Get policy files option.

  7. Click the Accept & download button.

  8. Double-click to open the MicrosoftEdgePolicyTemplates.zip file.

  9. Click the Extract all button from the “Compressed Folder Tools” tab.

  10. (Optional) Select the location to extract the files.

  11. Check the Show extracted files when complete option.

  12. Click the Extract button.

  13. Browse the following path inside the (extracted) “MicrosoftEdgePolicyTemplates” folder:

  14. Select the msedge.admx and msedgeupdate.admx files and click the Copy option from the “Home” tab.

    Quick tip: You only need to copy the “msedgeupdate.admx” file if you want to control the update settings of Microsoft Edge.

  15. Browse to the following path:

  16. Click the Paste button from the “Home” tab.

  17. In the “admx” folder, inside the “MicrosoftEdgePolicyTemplates” folder, open the language folder that represents your language — for example, en-US.

  18. Select the msedge.adml and msedgeupdate.adml files and click the Copy option from the “Home” tab.

    Quick tip: You only need to copy the “msedgeupdate.adml” file if you also copy the file on step No.12.

  19. Browse to the following path that matches your language:

    In the above command, make sure to change en-US for the folder that matches your language.

  20. Click the Paste button from the “Home” tab.

Once you complete the steps, the new policies to enable or disable IE Mode on Edge Chromium will install in the Group Policy Editor.

Enable IE Mode on Microsoft Edge

Ms Edge Chromium Download

To enable IE Mode on Chromium Edge with Group Policy, use these steps:

  1. Open Start.

  2. Search for gpedit and click the top result to open the Group Policy Editor.

  3. Browse the following path:

  4. Double-click the Configure Internet Explorer integration policy.

  5. Select the Enabled option to enable IE Mode for Microsoft Edge.

  6. Under the “Options” section, select the Internet Explorer mode from the dropdown menu.

  7. Click the Apply button.

  8. Click the OK button.

Ms Edge Vs Chrome

After you complete the steps, websites will render in compatibility mode, and you’ll notice a familiar IE icon on the left side of the address bar letting you know the website is using Internet Explorer.

Edge

Ms Edge Chrome Addons

These steps enable IE Mode for intranet websites. If you want to load external websites using Chromium Edge, you need to enable and set up the “Configure the Enterprise Mode Site List” policy, which includes the creation of an XML file with the list of domains that you want to load automatically with the Internet Explorer mode.

Update February 11, 2021: This guide has been revised with the steps to configure IE Mode on the Chromium version of Microsoft Edge using the new compatibility settings and updated the process to install the Group Policy templates.