Now with Fiddler you can easily take a look at what happens when you browse the portal. In order to see this you’ll need to activate the “Decrypt HTTPS traffic” option in Tools, Fiddler Options, HTTPS.
As you can see I’m able to see which data is sent to the portal and how the data comes back. This is a basic functionality of Fiddler – nothing new here – but it’s a nice starting point if we want to start customizing the portal.
In this example you can see that the portal made a request to /MonetaryCredit and the response contained a JSON array with credit information for all my MSDN subscriptions where the monthly credit option is enabled. This is a good example to show why and how we could customize the portal.
If I follow the announcement on Scott Guthrie’s blog I should see something like this:
But when I look at the portal I don’t see this credit status notification. This is because the notification is only visible if you’re running out of credits. Well that’s a nice feature, but I want to be able to check my credit even if I’ve got plenty of credits left.
Now thanks to Fiddler we know that calling /MonetaryCredit returns some Json with all the information we need regarding the credit status. With this info I could write a little bit of code that takes this data and renders it in a table:
The code is pretty straightforward. Using the IE Developer Tools you can easily write your own “extensions” and test them on the fly. When you have the portal open in IE, simply press F12 to bring up the Developer Tools. Now go to the Console tab and press the arrows in the lower right corner to enable Multi line mode. To test this you could paste my code and press the Run button:
Wait a few seconds for the call to complete and voila, here is the result:
Since your code runs within the same window as the portal you don’t need to worry about authentication when making requests to the portal.
Oh and before I forget, you can also use jQuery and jQuery UI because the portal also uses those libraries. This makes it really easy to execute Ajax calls or use some nice controls like the jQuery UI Dialog.
Linking your code to a button
For my example this would be:
The result, a nice little button which shows the status of my credit:
As you can see, the sky is the limit! If you’re creating your own “extensions”, don’t hesitate to share them in the comments of this post!