Using DOM Explorer to Inspect your Office App in Visual Studio

If you are  building an  “App for Office” using Visual Studio, you may encounter difficulties to inspect the html while the app is hosted on the Office clients.  This make things complex to debug the app, applying/ changing CSS or even changing/inspecting the HTML elements.  While dealing with such web application related issue,  we always looks for a code inspector like “Developer Toolbar” that’s makes our life easier. What if, if you can do the similar things with your Office App? Actually, you can do that ! You can inspect your “Office App” by similar  way that we generally do with “developer toolbar”.

In this case of “Office App”, you can use  “DOM Explorer”  in Visual Studio that enable the similar code inspect experience like the developer toolbar.

To start the DOM Explorer

First of all,  run your Office App from Visual Studio.

When Visual Studio is in Debug mode, launch the “DOM Explorer” from Debug –> Window  –>  DOM Explorer.   Here you can select either “All” or specific HTML file ( Home.html) you want to inspect.

With this selection, Visual Studio will open the DOM hierarchy for the selected file.

With that, you are almost reached to your destination ! In the DOM Explorer Windows, Select the “Select Element” button or press (CTRL + B)

Once the “Select Element” button is selected, you can inspect the “Office App” within Office Client ( As shown in the below image, we have using app inspection within excel )

The above example given for an “Content App” , this works similar way for the  “Task Pane” app as well.

You have to make sure,  your computer has IE 10 +  installed.

Recently I came across this problem while building some Office App, and found the solution by using DOM Explorer so thought to share with all of you!

Hope it was useful !