Note: if you’re using Linux, install the Microsoft-provided .deb package, .rpm package, or the tar.gz for Edge and VS Code, not a Flatpak or Snap version. These tend to be more difficult to work with as a developer, as permissions issues can cause headaches with getting extensions to work, attaching debuggers, and accessing files.
Here’s how I configured VS Code and the Edge Tools extension for general web development on my machine. I’m using Pop!_OS 22.04, but this will also apply to Ubuntu, and other Debian-based distros. I’m also using a similar configuration on Windows, but I have not tested on macOS. With VS Code open, search for “Microsoft Edge Tools for VS Code” under Extensions and install it:
One of the coolest features of this extension is the ability to debug static content fully within VS Code, with zero configuration and no other dependencies. To verify this, I made a small app using Vue.js, and started a debugging session with the Edge Tools extension by simply right clicking the root “index.html” file and selecting “Open with Edge.” I can set breakpoints, step thru the code, view network traffic, inspect data and page elements, modify CSS, and more – all within VS Code!
This is a neat feature – a good use case might be taking some working sample code out of StackBlitz, CodePen, etc. and running/debugging it on your local machine to experiment with a snippet before integrating into a larger project. Most developers are going to want a more configurable set up however, as this quick debug config is pretty limited. I immediately ran into an issue with a particular project where I was unable to configure a 3rd party authentication service to work when running the app locally (read more about the issue on this StackOverflow question I posted). The Edge Tools extension uses a url with a “file://” scheme, and the auth service configuration did not allow such a url to be set as the callback. I needed to have a proper localhost web server running so that my app would have a url like “http://localhost:port”, which was allowed by the auth service. To accomplish this, I installed the Live Server extension for VS Code. This is a lightweight and easy to use local development web server and it can also be found and installed under Extensions in VS Code:
The Live Server extension is not strictly necessary for the Edge Tools, however. If you are using a framework like Angular, React, Vue.js, etc. you may be using Node.js and/or various CLI tools as part of your development stack to build and serve the app. VS Code’s built-in Node.js support and the Edge Tools extension integrate very nicely with projects configured in this way, and the the examples below still apply to projects that do not use Live Server.
To further configure the debug settings, it’s advisable to add some debug configurations to the VS Code “launch.json” file. This allows easy one-click debugging for any number of desired configurations, and is especially useful with sharing run and debug configs with teammates. The Edge Tools extension makes this easy by automatically adding them, creating a “launch.json” file if it does not exist. Click the extension’s icon on the left hand panel, and then click the “Generate launch.json” button:
If you already have an existing “launch.json” file in your project, click the “Configure launch.json” button to add additional configurations to the file:
This will update the “launch.json” file and add a couple options to the”Run and Debug” menu:
The “launch.json” entries are not quite complete – the url of the project must be specified. I also set an additional Edge runtime argument, and set some project folders which should be ignored during debugging with the “skipFiles” property:
Having the browser window, the browser dev tools, and a code editor open all within VS Code is a cool feature, but I needed a little more screen real estate to effectively run and debug an app. Fortunately, the Edge Tools extension also works with a stand-alone instance of the Edge browser. I found this gave me all the advantages of “traditional” web development using a browser and its built-in dev tools alongside my code editing environment, but with an enhanced experience because of the tight integrations between Edge and VS Code. To accomplish this, open the Edge Tools extension settings, and ensure “Headless” mode is checked:
Start Live Server by right clicking the root “index.html” > Open with Live Server, or clicking “Go Live” in VS Code’s status bar. If you’re using an alternate tool or framework to build and serve your app, start it as you normally would (ex:
Select the “Launch Edge and attach DevTools” debug configuration from the debug menu and start it up:
An instance of Edge will be started with the VS Code debugger attached, and all the debugging capabilities are still accessible.
Having the Edge Dev Tools tab open in VS Code isn’t necessary – that can be closed without affecting the current debugging session. It can be re-opened via the debug toolbar menu > “Open Browser Devtools.”
I personally like the integration of the Edge dev tools window in VS code, and I frequently use both in my development workflow. I find that the Edge console can be a good supplement for the built-in debug console. While debugging, I often alternate between different window configurations. Sometimes I like just using the built-in console like this:
And sometimes I use a window configuration like this, with the Edge Dev Tools’ “Network” tab displayed. In the example below, I am able to inspect the current web socket connection for a streaming service in my app, and view the individual messages within VS code:
And for even greater flexibility, the dev tools can also be opened from the running Edge instance and used as they normally would. In fact, the integrated Edge dev tools window in VS Code is actually a screen cast of the regular browser dev tools. Another typical configuration I use looks like this, where VS Code only has various code files open, and I’m doing most of the debugging via the external Edge dev tools. Everything still works as expected in this configuration; breakpoints can be set either in VS code or the browser dev tools window but I am able to use just the browser for all testing and debugging if desired. Here is how that config looks on my Windows machine – Edge and VS Code have nearly identical UIs across platforms, which makes it great for developers who use multiple operating systems:
Another feature not to be overlooked is the in-line code analysis provided by the Edge Tools extension. I have found this is to be a good supplement to ESLint. This feature is fully integrated into into the “Problems” tab; here is how the extension displays errors and issues:
One final recommendation I have for using screen real estate as efficiently as possible is to dock the debug toolbar. I find there really isn’t a good place for it when set to “floating.”
Open the VS Code settings from File > Settings > Features > Debug > Tool Bar Location and set this value to “docked.”
With this setting, the debug toolbar is docked on the left hand panel, and is only visible when “Run and Debug” is selected in VS Code.
I also have the StatusBar Debugger extension installed which, as the name implies, adds debug controls to the VS Code status bar. I like having the supplementary, but non-intrusive, debug controls on the UI when the “Run and Debug” panel is not active in VS Code as this is a good compliment to the debug keyboard shortcuts.
The Edge Tools for VS Code extension has proven to be extremely versatile, and I’ve made the switch to using this as my main web development environment for my day to day work. The only major drawback I observed was that the Vue.js Devtools Edge extension is not accessible from the Edge dev tools tab in VS Code. While I have not verified this, I would imagine other similar extensions, such as the React Developer Tools, behave the same way. I did not find this to be that large of an inconvenience however, as the Vue.js extension is still fully usable from within the normal Edge dev tools window. Despite this, I still highly recommend any web developer give this a try. Here are some additional links for further reading on configuring and using the Microsoft Edge Tools VS Code extension:
- Step 1: Install the Microsoft Edge Browser. ...
- Step 2: Install the Microsoft Edge Tools Extension. ...
- Step 3: Choose Full-browser or Headless Mode and Enable the Network Panel. ...
- Step 4: Connect MS Edge to your Web Application.
Are you comparing the developer tools in the MS Edge Chromium browser and Google Chrome browser? If yes, the developer tools in the MS Edge Chromium browser offers similar features that you can find in the Google Chrome browser. Both browsers use the same Chromium browser engine.How do I disable Microsoft Edge Developer Tools? ›
In Search settings, enter Developer Tools. By default, the Open the DevTools when the F12 key is pressed setting is toggled on. Choose Open the DevTools when the F12 key is pressed to toggle the setting to off. Select F12 to confirm that DevTools no longer open.What is Microsoft Edge dev tools? ›
The Microsoft Edge browser comes with built-in web development tools, called Microsoft Edge DevTools. DevTools is a set of web development tools that appears next to a rendered webpage in the browser. DevTools provides a powerful way to inspect and debug webpages and web apps.How do I bring up the HTML code in Edge? ›
You can use the "Ctrl + Shift + C" shortcut or right-click on the blank space of the Edge browser page > "Inspect" (bottom), then open the source code editable version of the web page, and then edit it, as shown in the following figure Show.Why should I use Edge instead of Chrome? ›
Edge's privacy settings are easier to understand and manage. You can choose between three levels of tracking prevention and see a list of blocked trackers. Microsoft Edge tracking prevention settings. Chrome only lets you send a “do not track” request to websites.Does Edge use less RAM than Chrome? ›
Google Chrome consumed approximately 850MB - 950MB; in contrast, Edge only consumed 650MB - 700MB of RAM. Chrome has done remarkably better than the last time we put these two browsers to the test, but Microsoft Edge is lighter on your limited RAM and does not compromise on performance.Why is Edge faster than Chrome? ›
Microsoft Edge does have one significant performance advantage over Chrome: Memory usage. In essence, Edge uses fewer resources. Chrome used to be known for how little RAM was used, but these days, it's become bloated.How do I remove dev tools from chrome? ›
- Log in to your G Suite account at admin.google.com.
- Navigate to Device > Chrome > Settings.
- Scroll down to User Experience > Developer Tools.
- Select the "Never allow the use of built-in developer tools" option from the dropdown.
If the DevTools window is undocked in a separate window, Ctrl W will close it if it is the active window. You can use Ctrl Shift D to toggle between a docked and undocked DevTools window. So if the window is undocked, you can quickly press Ctrl Shift D , I to close it. More shortcuts here.
Navigate to the "Default apps" screen and scroll down. Near the bottom of the screen, you'll see Microsoft Edge under the “Web browser” listing. Click the Microsoft Edge icon and you'll see a pop-up with a list of your installed browsers. Select a different browser to be your default.Do all browsers have dev tools? ›
- Press Win + I to open the Settings app.
- Navigate to the Apps tab and click on Installed apps.
- Scroll down to locate Microsoft Edge's preview build.
- Click the three-dot menu icon next to it and select Uninstall.
First go to Settings/Apps/Default Apps. Set your browser as default. Note- If the browsers don't show up on VSCODE then you need to set it to default in the settings. Save this answer.Can I run VS Code offline? ›
Of course you can use vscode offline. Just install the extensions from Microsoft. They work best from my experience. And you will get everything you need.How do I run VS Code in Windows 11? ›
Visit the VS Code install page and select the 32 or 64 bit installer. Install Visual Studio Code on Windows (not in your WSL file system). When prompted to Select Additional Tasks during installation, be sure to check the Add to PATH option so you can easily open a folder in WSL using the code command.How do I view the HTML code of a website in Chrome? ›
- Click the menu icon. on the browser toolbar.
- Select More tools, then View Source.
To switch on Automatic HTTPS in Edge, type edge://settings/privacy in the address bar and hit Enter. Scroll down, and under Security, turn on the toggle for Automatically switch to more secure connections with Automatic HTTPS.How do I switch from Edge to HTML in Chrome? ›
- Select the HTML file.
- Right-click on HTML file.
- Hover the mouse pointer on Open with option. It will show you the list of the installed browsers.
- You can click on the desired browser to open the file with that browser.
Cons. No history search. Small number of sites don't work. Fewer extensions than competitors.Is it better to use Google or Microsoft Edge? ›
Both browsers have a decent enough set of privacy and security features, but Edge is easier to navigate and provides more control for its users. However, Chrome has a more consistent update schedule, meaning that malware or exploits will get patched faster than Edge.Which is safer Google Chrome or Edge? ›
In fact, Microsoft Edge is more secure than Google Chrome for your business on Windows. It has powerful, built-in defenses against phishing and malware and natively supports hardware isolation on Windows—there's no additional software required to achieve this secure baseline.What is the fastest browser? ›
Google Chrome is the fastest web browser you can get on a Windows machine. It surpassed the competition in three out of four tests, outranking even Microsoft's latest Edge browser—which is now based on Chromium—in all but one test.What is the most secure web browser 2022? ›
- Comparison of Best Browser.
- #1) Firefox.
- #2) Google Chrome.
- #3) Microsoft Edge.
- #4) Apple Safari.
- #5) Opera.
- #6) Brave.
- #7) Vivaldi.
- 1 Which browsers use the least memory? 1.1 7- Safari. 1.2 6- Google Chrome. 1.3 5- Mozilla Firefox. ...
- 3 Scraping the Barrel: Best Browser for a Low-End PC? 3.1 K-Meleon. 3.2 UR Browser. 3.3 Midori. ...
- 6 FAQ. 6.1 What browser should I use in 2022? 6.2 What browser uses the least RAM?
- Firefox. Firefox is a robust browser when it comes to both privacy and security. ...
- Google Chrome. Google Chrome is a very intuitive internet browser. ...
- Chromium. Google Chromium is the open-source version of Google Chrome for people who want more control over their browser. ...
- Brave. ...
But as you can see from the results above, Edge consistently performed better than Chrome While not to a massive degree, the speed boost is another point in Edge's favor.What is the difference between Google Chrome and Google Chrome Dev? ›
The Beta channel gives you a 4–6 week preview of features coming to the Stable version of Chrome browser. The Dev channel gives you a 9–12 week preview.
Change where DevTools is docked by using the Command Menu
menu button, and then click Run command. Or, press Shift + Ctrl + P on Windows/Linux or Command + Shift + P on macOS.
- Open DevTools Command+Option+J (Mac) or Control+Shift+J (Windows, Linux)
- Type the hotkey to open the command menu – Cmd+Shift+P (Mac) or Ctrl+Shift+P (Windows, Linux)
Disabling Developer options is straightforward; you can do this by visiting the Settings and then Developer options. Depending upon your device's Android OS version and manufacturer's brand, navigate to Developer options by following the above steps. Disable the toggle button next to the Developer options.Can developer mode be turned off? ›
You can disable the Developer options and hide the menu by opening Settings, and then tapping Developer options. Tap the switch at the top of the screen to turn off Developer options.Should I turn developer options off? ›
This option allows your device to receive commands and files from a computer. Not only this, you can install custom read only memory and settings onto your android device by USB debugging. However, it is not wise to leave this option on because of security reasons, so turn it off once the work is done.How do I turn off Edge forever? ›
- Navigate to C:\Windows\SystemApps.
- Locate the folder named “Microsoft.MicrosoftEdge_8wekyb3d8bbwe”
- Rename the folder; for example, by appending “_DISABLED” to the end of the folder name.
You aren't able to uninstall edge as this is part of the operating system, however chrome will give you the option to set it as the default browser once installed.Will uninstalling Microsoft Edge cause problems? ›
Windows will run happily even if Edge has been force-uninstalled.What browser do most developers use? ›
- Mozilla Firefox Developer Edition.
- Google Chrome.
The best conventional browser for web development in 2021 is the developer edition of Mozilla's Firefox. The standard edition of Firefox is an excellent browser, packed with features, and privacy-focused. The developer edition adds to this with a suite of tools aimed at developers.
Polypane. Polypane is a bit different than standard web browsers such as Google Chrome, Mozilla Firefox, and even the Brave Browser. While Poylpane can work as a standard browser, it is designed more as a browser and developer app that is optimal for developers who require guidance and assistance as they work.Why did Microsoft abandon Edge? ›
There are plenty of reasons for Edge's failure. But a significant one is the lack of add-ons for the browser — a paltry 118 at last count, even though Microsoft has been courting developers to write add-ons for Edge ever since the browser was introduced four years ago. That's compared to many thousands for Chrome.Is there a better browser than Edge? ›
Google Chrome leads the web browser market with a 63.63% share, according to Statcounter. Apple Safari follows with 19.37%, Mozilla Firefox at 3.65%, Microsoft Edge (Chromium) at 3.24%, and Opera at 2.16%. Internet Explorer is still in use with 0.81%, while Microsoft Edge “Legacy” is fading out at 0.32%.What is replacing Microsoft Edge? ›
The benefits of switching to Chromium — Since the new Chromium Edge will be based off the same browser as Google Chrome, Edge will now support all the same extensions.How do I revert back to old Microsoft Edge? ›
Open the local Group Policy Editor and go to Computer Configuration>Administrative Templates>Microsoft Edge Update>Applications>Microsoft Edge>. Select Rollback to target version and then select Enabled. Select Target version override and pick the browser version you want to roll back to.How do I open Microsoft Edge in Visual Studio? ›
Launch Microsoft Edge from Visual Studio
- Open ClientApp/src/components/Counter. ...
- Select the dropdown list next to the green Play button and IIS Express.
- Select Script Debugging > Enabled.
In Microsoft Edge, select Extensions, located to the right of your browser address bar. Note: If you don't see Extensions to the right of your browser address bar, select Settings and more > Extensions. Select Open Microsoft Edge Add-ons. Find the extension you'd like to add and select Get.How do I use Microsoft Edge developer tools? ›
To open the developer tools tool in Microsoft Edge: Open the browser. Press F12 on the keyboard. Optional: Press Ctrl+Shift+I keys or click the Setting and more ellipsis icon, then click More tools > Developer Tools.How do I open DevTools in VS Code? ›
Clicking the Open button uses pub global activate to activate the DevTools package for you. Next, DevTools launches in your browser and automatically connects to your debug session. While DevTools is active, you'll see them in the status bar of VS Code.
- To open DevTools, right-click the webpage, and then select Inspect. Or, press Ctrl + Shift + I (Windows, Linux) or Command + Option + I (macOS). DevTools opens.
Enable Java in the browser through the Java Control Panel
In the Java Control Panel, click the Security tab. Select the option Enable Java content in the browser. Click Apply and then OK to confirm the changes. Restart the browser to enable the changes.
The simplest way to debug a webpage is through the Debug: Open Link command found in the Command Palette (Ctrl+Shift+P). When you run this command, you'll be prompted for a URL to open, and the debugger will be attached. If your default browser is Edge, VS Code will use it to open the page.Why does Microsoft Edge turn off extensions I've installed? ›
Some extensions change browser settings like your default search engine, new tab page, and other types of site data. To prevent extensions from changing the preferences you set up when you installed Microsoft Edge , the browser automatically turns off extensions that might change your preferred settings.How do I install Google Chrome on Microsoft Edge? ›
- Open Microsoft Edge.
- Select Download Chrome.
- Carefully read the Terms of Service, then select Accept and Install.
- Select Run to start the installer immediately after download.
- The installer will ask permission to run, select Yes.
- Google Chrome will begin installing automatically.
EdgeHTML is written in C++. The rendering engine was first released as an experimental option in Internet Explorer 11 as part of the Windows 10 Preview 9926 build.How can I improve my Edge performance? ›
- From the Control Panel, open Internet Options.
- Click the General tab.
- Under Browsing history, click Settings.
- In the Temporary Internet Files and History Settings box, enter 200 in the disk space box.
- Restart the browser.
Thanks to Dying Light Developer Tools you can take the quarantine zone in your own hands to create new maps, tell original stories, and design over-the-top scenarios. Watch our video guide to learn the ins and outs of the editor and get your creative juices flowing.How do I view Dev Tools in Chrome? ›
- Right-click a page and select "Inspect Element". This displays the HTML code for the element you clicked.
- Select View > Developer > Developer tools.