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.

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.

Selecting the DOM Explorer Menu Option

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

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

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.

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!

Share this:

About Abhijit Jana

Abhijit runs the Daily .NET Tips. He started this site with a vision to have a single knowledge base of .NET tips and tricks and share post that can quickly help any developers . He is a Former Microsoft ASP.NET MVP, CodeProject MVP, Mentor, Speaker, Author, Technology Evangelist and presently working as a .NET Consultant.
He blogs at http://abhijitjana.net , you can follow him @AbhijitJana . He is the author of book Kinect for Windows SDK Programming Guide.