You can debug interactively your Node.JS apps on Azure using the built-in Node Inspector. I will walk you through how to set up Node Inspector and debug an Azure Mobile App.
You can debug using the Monaco interface without doing any special setup, however it is not interactive debugging with variable inspection etc. To use the Monaco interface, Go through Easy Tables and select the ‘Edit Script’ icon:
You can edit the script and see the results of errors here when you make a change and hit the play button. In this example you can see I have an error: error: TypeError: Cannot read property 'id' of undefined
This may be all you need, however if you want a richer experience, you can use Node Inspector with Azure App Services for a richer debugging experience
Web Kit enabled browser such as Chrome
Azure Web App or Azure Mobile App using Node.JS backend
Enable WebSockets in the app configuration
Modify the iisnode.yml file on the site
Modify the web.config file on the site
Hit a special URI to start debugging
Note: This will not work for https:// which is required if you are using Authentication (so you would have to disable Authentication temporarily for this to work).
I created a Node.JS backend based Azure Mobile App called ‘jsandersdebugnodejs’. Monaco was not interactive enough for me so I decided to use Node Inspector built into the Azure Mobile App/Web App.
First step is modify the app settings to allow web sockets and Save:
I want to debug that script I saw that had a problem when I was debugging in Monaco. To do that choose the ‘Scripts’ icon then use the up-down arrow icon I have highlighted to find the table script I want (tables\TodoItem.js):
Note: If scripts do not show anything, warm up the Mobile App site by hitting it in another browser tab, then refresh the debug session.
Now click on the number ‘23’ on the left side to set a breakpoint in the insert statement:
And use a tool like Fiddler or Postman (or your app) to call the App:
You will have hit the breakpoint where you can inspect stuff and see what the problem is!
In my case I look at the ‘Scope Variables’ section and there is no ‘user’ property on the ‘context’ object and that is why it is faulting in my app:
Also note above I can see the ‘context.item’ object that has the information I am trying to insert. Pretty darn awesome or what?!?!
Final Important notes
Special thanks to Prashanth Madi on our team for help with this Blog!
Use this with caution. Do not debug a live site because when you are in the debugger, you are stopping the scripts you are setting breakpoints for until you hit the ‘resume’ button (little triangle icon above the ‘Watch Expression’
Restore back the changes you made after debugging
Search for Node Inspector for cool tips using Node Inspector
This works for Azure Web Apps and Azure Mobile Apps.
You can use Monaco to edit iisnode.yml and web.config if you wish.