Using DOM Explorer to Inspect your Office App in Visual Studio

By | April 15, 2014

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.

Office App Running From Visual Studio

Run the 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.

DOM Explorer Menu Option

Selecting the DOM Explorer Menu Option

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

DOM Explorer For Ruuning App

Initial 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)

Select Element in DOM Explorer

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 )

DOM Explorer Inspection

Inspect the “Office App” with in Office Client

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

DOM Explorer For Ruuning for Task Pane App

Inspecting the Task Pane App

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 !

 

2 thoughts on “Using DOM Explorer to Inspect your Office App in Visual Studio

  1. Pingback: DotNet Explained - The Daily Six Pack: April 15, 2014

  2. Pingback: This Month on Daily .NET Tips

Comments are closed.