Debugging JavaScript API for Office

Question

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.

Is there any way you can mock the data, and dev inside chrome? — danp
– danp, Commented Sep 29, 2012 at 0:03
You know, I was wondering this today when I was out walking my dog. I think this is probably exactly what I should do. If I do a decent job, the mocked library should be useful to others too. Thanks! — DazWilkin
– DazWilkin, Commented Sep 30, 2012 at 0:19
Weekend project: github.com/brabantcourt/lopeway.mock-office — DazWilkin
– DazWilkin, Commented Oct 2, 2012 at 22:44

danp · Accepted Answer · 2012-09-30 00:50:27Z

1

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.

answered Sep 30, 2012 at 0:50

danp

15.3k7 gold badges47 silver badges48 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Debugging JavaScript API for Office

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related