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:
Click the down arrow to the right of
IIS Express, and select the
Browse With... option (see fig. 1)
Browse With dialog box will open. Click the
Add button (see fig. 2)
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.
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.
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:
--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!
1 thought on “Configure Visual Studio 2019 to Launch Chrome With Developer Tools When Debugging”
Great tip! Thanks!