Windows Vista / Mac debugging a Silverlight app using Visual Studio 2008

[obsolete]
As I wrote here, this is no longer the way to do it as Silverlight 2.0 provides a much better experience.

As I wrote recently in another blog post about a .NET Rocks interview with Brad Abrams, I was very impressed with his keynote at ReMix Boston, where he did the Linux / Vista / Mac debugging. I referred to Richard Campbell‘s opinion that he didn’t believe it would work. At the end of the post, I wrote that I want to try it for myself, to see if it really works. Brad Abrams posted a comment to my blog post, saying that it should work just fine. Well. This post tells the story.

Prerequisites

• A Windows machine with Visual Studio 2008 and Silverlight Tools Alpha for Visual Studio 2008 installed.
• A Macintosh with the Silverlight 1.1 Alpha installed.
• A network connection on both machines and a way to transfer files between the Vista box and the Mac. (A USB flash drive/stick is fine)
• A Silverlight 1.1 Alpha project linked to a website, ready to run.
• The website has to be remotely accessible. (Otherwise you can copy the website to the Mac as static HTML files, and run it locally from there.)

Debugging environment

This is the environment I will use for the debugging. For starters, I want to concentrate on the Vista / Mac debugging, so I won’t set up a Linux box with Apache and serve the Silverlight app on a PHP page. But there really should be no problem to it. You can even copy a static HTML page with the XAML page, and the assemblies to the Mac, and run the Silverlight app locally, and attach the Visual Studio debugger to the Safari process on the Mac. Let’s save the Linux box for another time.

**The mac: **Basically just a Macbook with default configurations, and no special software.

The Vista box: This is my development box. Windows Vista with Visual Studio 2008, IIS 7 and an ASP.NET website set up at localhost.

Before we get started, locate your Visual Studio 2008 folder on the Vista box (usually: C:\Program Files\Microsoft Visual Studio 9.0), and find the Silverlight folder. This folder contains the necessary files to do the initial set-up. You’ll also find a guide to set-up and start debugging, but I’ve found a few mistakes in there, and you can find yourself confused.

Setting up the Mac for Silverlight debugging

Remote debugging is not as easy as pointing Visual Studio to a remote computer, and selecting a process to debug. You have to authenticate against the remote machine. This is done via an SSL encrypted TCP channel between the debugger (The Vista box) and the target machine (The Mac). You will need to set-up the TCP port along with a private/public key pair. This is done in 6 easy steps:

1. Copy the contents of the C:\Program Files\Microsoft Visual Studio 9.0\Silverlight\MacIntel folder to a destination on the Mac of your choosing.
2. Start up a Terminal on the Mac, and execute the ‘configcoreclrdebug’ using an absolute filepath. e.g.: /MacIntel/configcoreclrdebug.
3. First, your private/public key pair will be generated, and then you have to specify a TCP port in the range of 49152 – 65535. Just pick a number.
4. Then you need to enter a password, and confirm it. Choose a password of at least 8 characters.
5. A hidden directory is created in your Users folder, located here: /Users/username/.coreclrdbg – copy the “ConfigureWindowsCoreCLRDebugging.exe” file to the Vista box, in a destination of your choosing.
6. Execute the ‘core_clr_proxy’ file on the Mac from the Terminal, using an absolute filepath like this: /MacIntel/coreclr_dbg_proxy

[ [

That was all the set-up needed on the Mac for now. Next up is setting up the Vista box.

Setting up the Vista machine for Silverlight debugging

This is the easy part.

1. From a command prompt, run the “ConfigureWindowsCoreCLRDebugging.exe” which you just copied from the Mac.
2. Enter the password you created on the Mac in step 4, and hit Enter.

Starting the debugger

Now to the exciting part. Will it work, or not?

1. Launch Safari on the Mac, and point the address to the URL of your Silverlight application you wish to debug.
2. Launch Visual Studio 2008 on the Vista box, and open the Silverlight project that you wish to debug.
3. Open up a source file, and set a breakpoint.
4. From the Debug menu, click Attach to Process. (Or hit Ctrl + Alt + P)
5. From the Transport drop down menu, select ‘CoreCLR Remote Cross-platform Debugging’.
6. Enter the IP address or hostname of the Mac in the Qualifier box bellow and hit Enter.
7. Now you should see a list of processes running on the Mac. Anyone that has CoreCLR Remote in the Type column can be attached.
8. Select the Safari process and hit Attach.
9. There you go. You’ve just attached the Safari process on the Mac to the Visual Studio debugger.

[ [ [

Now. Perform whatever action on the Mac that makes you hit the breakpoint you set before, and take a moment to enjoy real-time cross-platform remote debugging.

Screenshots of the Mac showing the webpage with the Silverlight app:

[ [

The second picture above, has the SetDefaultView() Button highlighted as if I was holding down the mouse bottom. This is because the screenshot is taken when I hit the breakpoint you can see on the third picture of Visual Studio further above.

One thing I noticed while using the Silverlight charts from the Mac, was the speed. When I paste the serialized string in to the textbox and click LoadData() – the Silverlight loads the string and deserializes it to some custom classes I made. On Vista it takes less than a second. On the Mac it takes about two seconds or maybe a bit more. And it is not because of network latency. Silverlight runs in the browser, which means the app is downloaded to the Mac, and when I click the buttons, all the logic handling events and doing stuff runs locally. So Silverlight is lot slower on the Mac than on Windows. Maybe this will get better when Silverlight 1.1 is officially released.