DEV Community 👩‍💻👨‍💻

Cover image for Open Edge Developer Tools automatically by launching debug with Visual Studio 2022
Emanuele Bartolesi
Emanuele Bartolesi

Posted on

Open Edge Developer Tools automatically by launching debug with Visual Studio 2022

During my daily activities, I use Visual Studio constantly to work with Blazor projects.
Since Blazor is a frontend technology that exchanges data with APIs, the developer toolbar of the browser is a very important tool.
My flow to debug an application is: press F5, wait until the browser is loaded, press F12, open the dev tools (and sometimes move the developer toolbar in the right position).
It may seem like a quick activity but repeating this activity many times during the working hours, takes a lot of time and it's annoying.
I found a trick to reduce this manual activity.

From the Visual Studio toolbar on the top, click on the debug menu, on the arrow close to the name of the project.

Image description

Click on "Browse with", in the new window, click on "Add..." and insert the following values:

Image description

For debugging purposes, I use the Edge Developer, but this trick works with the other versions as well.
The path of my dev instance is: "C:\Program Files (x86)\Microsoft\Edge Dev\Application\msedge.exe"
As arguments, you can set: "--auto-open-devtools-for-tabs".
The friendly name is up to you, for instance, I use the name "Edge Dev with Tools"
Click Ok and save.
I set as Default this new browser definition.

Now you can launch your debugging session as always and the developer tools will open automatically at startup.
With my screen I use the developer tools in a separate window, as you can see in the screenshot below.

Image description

Happy debugging!

Latest comments (0)

We are hiring! Do you want to be our Senior Platform Engineer? Forem is hiring a Senior Platform Engineer

If you're interested in ops and site reliability and capable of dipping in to our Linux stack, we'd love your help shoring up our systems!