Debugging Silverlight in a Web Role on the Development Fabric

As part of the announcement of the January 2009 CTP of the Windows Azure Tools was "Added support to debug Silverlight in a Web Role".  I'll go into more detail about that in this post in 2 ways:

1. Adding Silverlight to a Web Role
2. Configuring the Silverlight debugger

Note: Developing Silverlight applications in Visual Studio requires Silverlight Tools.

We've also found that folks have run into IIS mime type mapping issues with Silverlight, please follow the following instructions if you run into a "Cannot download Silverlight: issue.

Registering MIME type in development fabric

To ensure solutions containing Silverlight clients work correctly in the development fabric, please ensure that the MIME type for the Silverlight .xap extension is configured correctly in IIS.

1. Open Internet Information Services (IIS) Configuration Manager and select the server to manage (usually the top-level item on the left side)

2. Double-click MIME Types on the right side

3. Add an entry to map the .xap extension to the application/x-silverlight-app MIME type

Adding Silverlight to a Web Role

In order to add Silverlight to a Web, you first need to create a Cloud Service that contains a Web Role.  In Visual Studio, click on File -> New Project and select a "Web Cloud Service".

This will create the Cloud Service project along with an ASP.Net Web Application project which is associated to the Cloud Service as the Web Role.

Next we'll add Silverlight, click on the solution in the solution explorer and select Add -> New Project...

This will bring up the Add New Project dialog again, and this time you'll select Silverlight -> Silverlight Application.

After selecting that, you will get the following Silverlight project creation dialog:

Link the Silverlight control on to the Cloud Service Web Role by ensuring that "Link this Silverlight control into an existing Web site" is selected and the "Choose existing Web site:" ComboBox has selected the Web Role that was created when you created the Cloud Service.  (there should only be one Web Application in your solution so this should be the only option)

Notice how there is a CheckBox to "Enable Silverlight debugging" -- this directly corresponds to the debugger project setting that I talk about later.

Set the SilverlightApplication1TestPage.aspx as the startup page so that it will be loaded in the web browser when you hit F5.

Next, to the Page.xaml, between Grid tag, add a button with a Click event handler by the Button tag as shown in the following xaml snippet:

     <Grid x:Name="LayoutRoot" Background="White">
        <Button Click="Button_Click" Margin="100" Content="Click"/>
    </Grid>

Then right click on "Button_Click" and select "Navigate to Event Handler".  This will create the event handler in code behind (if it doesn't exist already) and take you to that location in the source.

Add a simple message box to the event handler.

 private void Button_Click(object sender, RoutedEventArgs e)
{
    MessageBox.Show("Hello from Silverlight in a Web Role");
}

When you run the app, and click the button, you will now get the message box.

To show off the Silverlight debugging, you can now add a breakpoint to the code behind:

When you click the button, you'll hit the breakpoint!  (This didn't work in earlier versions of the tools)

Configuring the Silverlight debugger

The reason the breakpoint above was hit was because as part of the Silverlight project creation, the Silverlight debugger was enabled. (remember the CheckBox I pointed out above?)

If for some reason (say if you were doing Javascript debugging  "you cannot debug Silverlight code and JavaScript code at the same time." or you didn't select "Enable Silverlight debugging when you created the Silverlight project) you disabled the Silverlight debugger, you can re-enable it on the Web tab of the Web Application project settings (lower right corner):

Comments

• Anonymous
  January 16, 2009
  Want to know more about how to setup Silverlight in a Windows Azure Web Cloud Service and how to configure

• Anonymous
  January 17, 2009
  In the latest release of the Windows Azure Tools for Visual Studio , one of the new things you'll find

• Anonymous
  January 20, 2009
  Is it possible to have silverlight query Sql Services direct? I can't find any documentation about that scenario.

• Anonymous
  January 20, 2009
  Web Intro to Caching,Caching algorithms and caching frameworks part 1 - part 2 Readings in Distributed

• Anonymous
  January 20, 2009
  WebIntrotoCaching,Cachingalgorithmsandcachingframeworkspart1-part2ReadingsinD...

• Anonymous
  February 24, 2009
  We're really starting to get a solid set of resources out there for Windows Azure developers! Cloud Computing

• Anonymous
  February 25, 2009
  Hi Jim, Nice article.  I can't get it to work, however.  I have the Jan 2009 Azure SDK, and I've tried reinstalling it.  After following your instructions, my breakpoints aren't being hit in the Silverlight client or within the Web Role project.  I removed the Silverlight project and added a new one, making sure the checkbox for debugging was checked, etc.  No luck.  Any ideas on what else I could try or check? Thanks in advance!

• Anonymous
  February 25, 2009
  dvanderboom -- please enter a bug by following the steps here: http://blogs.msdn.com/jnak/archive/2008/10/27/submitting-a-bug-against-the-windows-azure-tools-and-sdk.aspx If you have a project that doesn't have any IP and exposes the problem, please attach it to the bug.   Off hand, I'm not sure why your breakpoints aren't being hit, you did build everything debug right?  Are the symbols for your binaries being loaded correctly?