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".

image

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...

image

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

image

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

image

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.

image

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.

image

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.

image

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

image

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):

image