none
Debugging JavaScript API for Office apps RRS feed

  • Question

  • I find it more challenging to debug JavaScript API for Office apps than regular web apps because the Office client hosts the browser runtime and, while Visual Studio 2012 debugging helps, the result is more complex than running apps directly within the browser and being able to use the browser's developer tools.

    Specifically:

    •  It's challenging to introspect/manipulate the DOM.
    • The rapid edit-save-refresh cycle of the browser is replaced with debug restarts
    • Debugging/tracing is complicated by the absence of console

    Someone suggested to me that a mocking library enabling Office apps to be simulated in the browser would be a good approach and so I've begun work on one on github:

    https://github.com/brabantcourt/lopeway.mock-office

    The library uses jQuery and KnockoutJS to simulate Excel (currently) content as HTML tables.

    For the project I'm prototyping, I'm currently using TableBinding extensively and so have focused the library on getting TableBinding implemented. The implementation is bidirectional but the "Excel" content is not currently editable nor "eventable". However, there's no obvious reason why both would not be possible by replacing the current raw cell content with input textboxes and making these KnockoutJS observables.

    The result is that by switching out Microsoft's library with the mocking library, I'm able to run my current Office prototype entirely within the browser (Chrome) and use the browser's (Chrome) developer tools to debug/interact with the app while it's running.

    It's already helping and expediting my development and I thought I'd share.

    Unless, of course, I'm missing something ;-)


    Wednesday, October 3, 2012 6:41 PM

Answers

  • Very cool Daz - looks like this will be a great resource!

    Obviously you can use the IE debugger if you test with Outlook Web Access or Excel Web Client (and not just IE - any other browser debugger) but as you note we didn't quite get to the wiring to make the desktop as lightweight. That said, VS has some really cool new tools - http://msdn.microsoft.com/en-us/magazine/jj618298.aspx

    Thanks and keep us updated!

    ...pc

    Thursday, October 4, 2012 1:30 AM

All replies

  • Very cool Daz - looks like this will be a great resource!

    Obviously you can use the IE debugger if you test with Outlook Web Access or Excel Web Client (and not just IE - any other browser debugger) but as you note we didn't quite get to the wiring to make the desktop as lightweight. That said, VS has some really cool new tools - http://msdn.microsoft.com/en-us/magazine/jj618298.aspx

    Thanks and keep us updated!

    ...pc

    Thursday, October 4, 2012 1:30 AM
  • Thanks for your reply!

    I'm very impressed with the JavaScript API for Office and think it's compelling for developers like me looking to leverage existing skillsets.

    My prototype is a taskpane app which I believe doesn't extend to the web clients but I assume this will change with time and look forward to it.

    Visual Studio is great - of course - and it's fine/good for debugging JavaScript (though still not as good IMO as Chrome's tools) but, unless I'm missing something - even the page inspector doesn't give me access to the DOM/console; I'm using KnockoutJS to render templates client-side and support 2-way binding etc. but have been unable to interact with these results in the DOM.


    Thursday, October 4, 2012 1:54 AM
  • Happy to hear that you liked the JS API for Office. Supporting Task Panes, at least in Excel Web App is on the line to be supported soon. For now in Excel you can use content apps both in the rich client and on the web clients.
    Thursday, October 4, 2012 8:15 PM
    Moderator