Debugging a Windows 8.1 HTML/JS app on Windows 10

I've been building a new Windows 8.1 and Windows Phone app written in HTML and JavaScript over the past week or so, but I've been unable to debug it easily ever since I installed the Windows 10 Technical Preview. If you've been building WinJS apps on Windows 10 recently, you've probably been running into the same problem that I have; every time you try to debug the application, Visual Studio will give you an error saying 'Application is not currently attached to a script debug target that supports script diagnostics'.

Frustrating, not very informative, and there's very little information online that can help you fix the problem. As far as I can tell, this is just a bug that's specific to the Windows 10 Technical Preview, and one that will ostensibly be fixed by the time that Windows 10 is actually released.

However, reinstalling Windows 8.1 is a big enough pain in the butt that I wanted to find a way around the debugger bug and get back to working on my WinJS applications. Unfortunately I haven't been able to find a way to make it just work again, but I have been successful at setting up a workflow involving Hyper-V and Remote Desktop that has enabled me to stay just as productive as I was on Windows 8.1.

Visual Studio 2013 and Visual Studio 2015 both support remote debugging for Windows apps, which is what we're going to use to get back up and running. In fact, we're going to be remote debugging our WinJS apps on a Windows 8.1 virtual machine. Getting set up with remote debugging isn't quite as simple as it could be, but debugging your WinJS app is as easy as pressing a button once you've got it configured.

Here's what you'll need:

1. Visual Studio 2013 or Visual Studio 2015
2. The Remote Desktop app for Windows 10, which you can download on the Windows Store.
3. The Hyper-V virtual machine manager for Windows 10, which should have been installed automatically either by Windows 10 itself, or by Visual Studio.
4. A Windows 8.1 .iso file, which you can download for free from MSDN if you have an MSDN, BizSpark or DreamSpark subscription. (A physical Windows 8.1 DVD will work too).

Once you've got those things downloaded, start by opening up the Hyper-V manager. Just type 'Hyper-V' into Cortana or the start menu and you should get two different results. You want to open 'Hyper-V Manager', not 'Hyper-V Virtual Machine Connection'.

We'll need to create a new Windows 8.1 VM using that .iso file, so once you've got Hyper-V Manager open, click New => Virtual Machine on the right and a VM creation wizard is going to pop up. Run through the steps by click on Next at the bottom (not finish!), and make sure you write down the name you give the new virtual machine — you'll need that name when we configure Visual Studio and the Remote Desktop app.

For the next few options:

• Select Generation: Select 'Generation 2'.
• Assign Memory: This is essentially assigning the new VM a certain amount of your computer's RAM when it starts up. I typically give it 2048 MB, and let it use Dynamic Memory. Just make sure that your system can afford to assign the portion of RAM you give the VM.
• Configure Networking: Use whichever option is appropriate, so long as it isn't the Windows Phone Emulator's network switch.
• Connect Virtual Hard Disk: This is assigning a virtual hard disk or hard drive to your virtual machine. I always create a new virtual hard disk, You can name it whatever you want, and save it to wherever you want. For size, I find that 75gb is usually enough for whatever I need to do, but you could probably get by with 50gb or less. Again, just make sure that your machine has enough space for the virtual hard disk.

Installation Options is the most important step: this is where we're going to install Windows 8.1 to the virtual machine. Select the 'Install an operating from a bootable CD/DVD-ROM' and Image file (.iso) options, and point the installation to the Windows 8.1 .iso file you downloaded earlier. Press Finish and the wizard will create your new Windows 8.1 virtual machine.

Head back to the Hyper-V Manager and your new VM should show up in the list of virtual machines. Right-click on it and select Connect. You'll get a screen that looks like this one:

Click on the Power button at the top left, or select Action => Start to turn the virtual machine on. This can take a several minutes or longer, depending on how fast your machine is and how much RAM you've given the virtual machine, so give it some time to start up.

The first thing you'll see once it's started should be a message saying 'Press any key to boot from CD or DVD...'. You'll only have a few seconds, so hit the space bar or any other key to boot. If you miss the message and don't press a key in time, just reset the VM by clicking Action => Reset.

The VM will load the .iso file we gave it earlier, and then you'll probably see a message about DHCP negotiation and other network configuration messages. Once that's all complete, you'll be met with the typical Windows 8.1 installation wizard.

If you've never installed Windows 8.1, go ahead and select your language, click Next => Install Now. Accept the license terms that will appear, then select the custom Windows installation option. You should see a single hard drive option; this is the virtual hard disk that you created when setting up the VM. Just select that hard drive and click Next. Windows will handle the rest of the setup.

After Windows 8.1 is installed on your virtual machine, we'll have to set it up to allow both remote desktop connections and remote debugging from Visual Studio.

Let's start with installing the remote debugging tools. Just open a browser on the virtual machine to download and install the appropriate remote debugger tools from MSDN. You'll have to make sure the download matches your version of Visual Studio, and the architecture of Windows 8.1 on your virtual machine. For example, I'm running VS2013 with Update 4, and my Windows 8.1 is 64-bit, so I chose the x64 download for VS2013 Update 4.

Once that's installed, open up the Visual Studio Remote Debugger Configuration Wizard, which you can find by pressing the Windows 8.1 Start button and typing 'Remote Debugger'. Go through the wizard to configure the remote debugger, and make sure you check the 'Run the Visual Studio 201x Remote Debugger Service' . You can leave the user name and password on their defaults.

Now we'll have to allow remote desktop connections to the virtual machine. Just open up the Windows 8.1 Start menu again, type 'Allow remote access to your computer' and click on the program that pops up.

Check the 'Allow remote connections to this computer' option and click apply. If you signed into Windows 8.1 with an account that is not the one you use to sign in to Windows 10, you'll want to make sure your Windows 10 account can sign in. You can double-check by clicking on the Select Users box, where you should see a message saying 'username already has access'. If that username isn't correct, just click Add User to add the correct one.

Let's test that remote desktop connection. Back in Windows 10, open up the Remote Desktop app and type the name of the virtual machine into the text box at the bottom. This is the same name that you gave the virtual machine when you went through the Hyper-V Manager's setup wizard, and it does not always match the name that you might see in the Hyper-V Manager's list of virtual machines.

When you type it in and hit Connect, two things will happen:

1. Your connection from Hyper-V itself will be disconnected.
2. You'll be asked to enter your credentials. These credentials are typically the ones you use to log in to Windows 8.1, and they're the same credentials that we just saw when enabling remote connections in Windows 8.1.

After entering those credentials, you'll be met with a security warning that you can safely ignore and connect anyway.

Alright, we're in the homestretch. All we have left to do is configure Visual Studio to debug our WinJS apps on the virtual machine rather than on our Windows 10 machines. Open up your WinJS project in Visual Studio, right-click on the project in the solution explorer and open the Properties dialog.

Selecting Debugging from the menu on the left, then set the 'Debugger to launch' option to 'Remote Machine'. Set the 'Machine Name' property to the name of your Virtual Machine — the same one you entered into the Remote Desktop app, and the same one you gave it when running the virtual machine setup wizard.

Save those configurations and then launch the remote debugger by clicking on the Remote Machine debug button in Visual Studio.

(Tip: If you see Local Machine instead of Remote Machine, you probably didn't save the Visual Studio configuration correctly; you can test it by clicking on the little drop-down arrow next to Local Machine).

If Visual Studio gives you a deployment error, I've found it can usually be fixed in two different ways:

1. Open the task manager on the virtual machine and kill the 'Visual Studio Remote Debugger' processes.
2. Restarting the virtual machine, which will kill the processes for you. (But make sure you save the machine first! Open Hyper-V Manager, find the machine, right-click on it and select Save.)

Whichever method you chose, just make sure you restart the Visual Studio Remote Debugger service by typing 'Remote debugger' into the Windows 8.1 Start menu and starting it.

After another deploy, the virtual machine will inform you that you need to download your Windows 8.1 development license. Follow the wizard to do that, and with any luck Visual Studio will install and start debugging your app on the virtual machine. You can use the Remote Desktop app to interact with the app, and the JavaScript console and debugger in Visual Studio will work as they did back on Windows 8.1.

WinJS apps for Windows Phone suffers from the same debugging bug on Windows 10. I haven't yet used this method to debug a Windows Phone app, but it should work just fine with the caveat that it will require a Windows Phone simulator, which itself likely requires an entire copy of Visual Studio installed on the virtual machine.