Clearly I’ve been spoiled with Chrome and its developers tools but I’m struggling to formulate a painless debugging strategy while developing Office 2013 apps using the new JavaScript API for Office.
Visual Studio 2012 helps by providing the script debugging and the immediate window but I’m finding the following to be a challenge and would appreciate pointers/guidance:
-
Reload the Office app (right-click “reload”) breaks Visual Studio script debugging and so it’s often easier to end debugging and start again. Why does it break? Can I stop it breaking?
-
Is there something comparable to Chrome’s “inspect element” and all the related DOM exploring functionality? I’m using client-side templating (KnockoutJS) and am resorting to using the immediate window to try to introspect the DOM.
-
My code makes AJAX calls but, short of inline debugging statements, I’ve not found a way to track calls like with Chrome’s Network tab.
Three things that I’ve learned/discovered that may benefit others are:
-
Don’t “stop debugging” while the debugger’s paused (break) as this tends to hang Visual Studio and the only way to get back is to kill it and restart which is tedious. If you continue through your code until it (hopefully) terminates, then you can stop the debugger without problem.
-
Microsoft’s sample code adds debugging information to an element on the HTML page of the app. I’ve found this sub-optimal and simply create a ‘debugging’ table in my apps that adds a row every time I wish to report something. This has the additional advantage of being persisted across debugging sessions. I published gists both for a table wrapper and for an error handler that extends the table wrapper.
-
“Quick Watch” in Visual Studio 2012 is useful for evaluating jQuery expressions and analyzing JSON results.
If at all possible and practical, try and mock the data, and develop inside a different environment. At the very least, it’ll get you a lot further into the project so you can debug simple stuff easier and faster, before moving back to your traditional environment for other stuff.