Well, with the Browser Preview extension, you can do just that. Setting up your Visual Studio Code browser preview is just a few clicks away. Let's see how to do it. Why The Browser Preview Extension As someone who records lots of videos, I'm constantly searching for the best way to display both my browser and my VS Code window at the same time. It is a source-code editor while Visual Studio is an IDE (integrated development environment). VS Code supports development operations such as debugging, task running, and version control, like Visual Studio. In this blog, we will learn about developing, debugging, testing, and deploying ASP.NET Core applications using Visual Studio Code. View In Browser. Extension for vscode to view a html file in a browser. Use command or context menu in the explorer. Open the command list (Press F1 or Ctrl + Shift + P) 2. Select `View In Browser` Keybindings 1. Press Ctrl + F1 Context Menu!contextmenu(https://github.com/hellopao/view-in-browser/raw/master/./images/contextmenu.png).
UPDATE: Why my own MacGyver solution was brilliant in its horrible way, the folks over at World of VS have taken up the challenge and created a proper Visual Studio extension that you should use. I'll chat with them and get some details and maybe a write-up of how they did it. So, while I encourage you to enjoy my tale below, go get the World of VS Default Browser Switcher now!
I've heard and seen lots of complaints about how it's hard to set the default browser that Visual Studio launches when you launch a debug session for a website.
Step 0 - Adequate
Folks spend time hunting around the Tools|Options dialog in Visual Studio looking for setting. They eventually realize it's not in there at all, but instead you have to right-click on an ASPX page within a Web Project and click 'Browse With...'
From this dialog you can click Set Default, which is totally obvious, right my daimies? Um, no. This doesn't work for ASP.NET MVC people who use other view engines and might not even have a .ASPX file in their solution. Plus, it's slow and irritating. Sa da tay.
It IS interesting that I can add other browsers, like Google Chrome to this dialog via Add. Note that Google Chrome installs in C:UsersScottappdataLocalGoogleChromeApplicationchrome.exe which may not be c:Program Files where you usually go hunting for these things.
'What my thought process was' - or - 'CSI: Visual Studio Default Browser'
Where is this browser information stored? That was my first question. Remember that your computer is NOT a black box. Even good programmers make this mistake and they 'flip this switch and hope that light turns on' without confirming that the switch and the light are connected with good wire and they know how electricity works.
I can guess all day, or I can open up ProcMon and just see for myself. Seriously, learn how to use this freaking tool. You can flip light switches all day or you can just open up the wall and see the wires. If you know how to use Process Monitor competently, people of both sexes will immediately find you more attractive. It's true. I get all sorts of free Tacos and Chips when folks look can I run ProcMon like Keanu Reeves can look sad.
I fired ProcMon up set it to only show the devenv.exe process, and I took a chance and set 'contains browser' for the path. If this didn't work I'd open the flood gates and start sifting a bit. I could also have said 'highlight' things with the word browser if I liked.
I launch VS, open the Browse With dialog and sweet sassy mollassy. Look at all that good stuff.
Oh, fonts too small, let me zoom in.
Looks like we're reading values out of the registry at HKCU:SoftwareMicrosoftVisualStudio10.0WebBrowserConfigTimestamp and...
...reading out of the browsers.xml file at C:UsersScottAppDataLocalMicrosoftVisualStudio10.0browsers.xml.
What's in that file? I'm guessing XML with no schema, given it was probably 2003 when someone wrote this.
I've seen folks attempt to change this with various extensions in Visual Studio and using automation calls within Visual Studio, but to the best of my knowledge, this feature has been in here for years and years and there's no way to get at it programmatically.
Step 1 - Slightly Awesome
Interestingly as well, my first attempt at changing the browser programmatically consisted of this brilliance:
But, it seems that those registry keys are serious and really used for something, because each time I opened Browse With... I found my changes thrown away, probably because VS isn't watching for file for change notification, but rather caching the file in memory.
Looks like a job for PowerShell (yes, I know can do this with batch files, but PowerShell is way batter, so nyah. Learn it.)
Embed Visual Studio Code In Browser
First I need to figure out what's going on in this registry. If I got to that key (by right-clicking the key within ProcMon and clicking Jump To), then right-click on the key in the Registry Editor I get:
Ok, so that's the location of the file we already know about, and looks like the file size in hex, as well as some magic goo for CacheFileDateLastMod and LastConfigurationTimestamp.
One at a time. The CacheFileSizeBytes is easy. Did you know that the Windows 7 calculator was quietly upgraded while you were out there not learning how to convert hex in your head? It's true! (Yes, you can also just look at the decimal value in the Registry, but again, this is more fun. Yes, you could always convert between Hex and Dec in calc.exe, but again, fun. What's your beef? ;) )
Click Dec(imal) and looks like 230 bytes, the size of my browser.xml file. What's the deal with those mod dates, though? They a probably a Windows file time, if they aren't ticks. Ticks are seconds since 1970-1-1 and a Windows FileTime is the number of 100-nanosecond ticks since 1601-1-1 rounded to the nearest millisecond. Why? Because 1601 was an awesome year. I mean, the Battle of Kinsale stopped the siege in Kinsale, Ireland, and famine killed half the Estonians. Sheesh, that was a horrible year! What were we thinking!?
Anyway, the easiest way to convert something you think might be a Date into a Date (and reason number 0x3b for you to finally learn PowerShell) is this line in PowerShell.
Lemme do that again against a blue background with a screenshot so you really believe me.
Oh yes, I'm on a horse. Cool. Those are FileTimes. So, tappity tappity and here's a PowerShell script to check the current values and output them for testing.
I'll go and develop and run this script in the PowerShell ISE (that's S for Scripting) that you already have on your computer. Freaky how Microsoft sneaks stuff like this on your machine. If you've got Windows 7, you're already got this.
I run Visual Studio and click Browse|With... a few times and watch the values change. Seems I need the SET to my GET script, so why not something like this. I've made copies of browsers.xml like browsers-chrome and browsers-firefox. You can do the same if you like.
What I am doing in this script? I'm copying my browser xml over the main one AND I'm updating the TimeStamp to now to get Visual Studio to re-read the file. Visual Studio seems to be checking and triple checking and if the CacheFileDateLastMod and CacheFileSizeBytes don't reflect reality, it will freak out and just delete my file completely and rebuild a new browsers.xml from scratch. Paranoid.
You can go and fancy these scripts up with command-line parameters all you want because you're a better programmer than I, but I am all Save|As, baby. I have 'UpdateDefaultBrowserToChrome.ps1' and, yes, wait for it, 'UpdateDefaultBrowserToFireFox.ps1' and I sleep at night just fine, thank you very much.
I can right click on them on my desktop and select Run with PowerShell if I like.
But...still....it could be more awesome. Darn my parents and the work ethic they instilled in me as a small child.
Step 2 - Extremely Awesome
Run Visual Studio Code In Browser
You can run PowerShell scripts from the regular not-really-DOS command line like this if you like.
I could even install PowerConsole and run these commands from INSIDE Visual Studio 2010 if I like and I want to rip a hole in the space time continuum. My, is that intellisense inside PowerShell inside Visual Studio? Double sun power!!!!
Still, this doesn't fit my mindless point and click mouse-like workflow. I'll go to Tools | External Tools and add two. Make sure you select the right PowerShell, which will be x86 even if you're on x64 so you correctly access the registry. I also checked Use Output window and added a single line of text at the bottom of each script.
Nice, but why not a toolbar?
Step 3 - Profit! I mean, Profoundly Awesome!
Right click on any Toolbar, this Customize and add buttons for External Tools (in my case #6 and #7) and...
Which gives me this when I click:
And shows this in Browse With, showing me it worked:
Yay! Enjoy.
Roll Up Instructions
- Go to C:UsersYOURNAMEAppDataLocalMicrosoftVisualStudio10.0
- Make a bunch of browser-whatever xml files for your browsers, or populate your list from Visual Studio, then make copies.
- Make yourself a few of these (or make one that switches if you're awesome)
- Add some external tools that call PowerShell with your new scripts as parameters.
- Add toolbar buttons if you feel like it.
- Go write a proper Visual Studio 2010 extension that does all this and packages it up in one click, put in on the VS Gallery and impress your friends and family. Crap. Now *I* need to do that for my next post, don't I? Shoot. Kzu? Give me a call and teach me how to do this.
About Scott
Scott Hanselman is a former professor, former Chief Architect in finance, now speaker, consultant, father, diabetic, and Microsoft employee. He is a failed stand-up comic, a cornrower, and a book author.
AboutNewsletter