Configure Visual Studio 2019 to Launch Chrome With Developer Tools When Debugging

Configure Visual Studio 2019 to Launch Chrome With Developer Tools When Debugging

Sometimes when debugging an app, I’ll need to frequently open the developer tools in Google Chrome for assistance. Sure, it’s easy to just press F12, but after a while, I got sick of having to do that each time. I thought it would be nice to have Visual Studio launch Chrome with the developer tools window already open.

After doing some digging, I discovered that Chrome has a command line option to open devtools: --auto-open-devtools-for-tabs. This should be simple enough – just configure a new browser for Visual Studio to use.

To add a new browser to Visual Studio, follow these steps:

Step 1

Click the down arrow to the right of IIS Express, and select the Browse With... option (see fig. 1)

Step 2

The Browse With dialog box will open. Click the Add button (see fig. 2)

Step 3

In the Program field, enter the path to Google Chrome. On many machines it is located at "C:\Program Files (x86)\Google\Chrome\Application\chrome.exe", however sometimes it may be installed in your local profile (e.g. C:\Users\<username>\AppData\Local\Google\Chrome).

In the Arguments field, enter the command line switch to open devtools, --auto-open-devtools-for-tabs. This is what tells Chrome to open with the developer tools window open.

In the Friendly Name field, enter something descriptive, for example, Google Chrome w/ DevTools (see fig. 3)

If you want to have this version of Chrome run every time you debug, go ahead and select Set as Default. Otherwise, you can select your web browser first before debugging.

Wait a minute – I followed all of your steps, and Chrome isn’t opening with the DevTools Window!

If you’re like me, you may have tried this only to discover that when you debugged your app, Chrome opened, but didn’t have the DevTools window open. The reason for me was that I already had another instance of Chrome open (I had music streaming in a separate Chrome instance). There are a couple ways to fix this:

1. Close the other instance of Chrome. I didn’t want to lose my music, so that was a solid “no” for me.
2. Update the parameters to use a different user-data directory. Chrome has another command line parameter to use a different data directory, and this is what I chose to do. I updated the command line arguments to this: --auto-open-devtools-for-tabs --user-data-dir=c:\dev\chrome. This essentially tells Chrome to use a separate directory just for debugging and did the trick for me

I actually went a step farther and also added the -incognito (single dash is intentional) parameter to my list since I almost always open an incognito window so everything is fresh and I’m not getting cookie / caching conflicts, etc.

Hope this helps!