Using DOM Explorer to Inspect your Office App in Visual Studio

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.

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 !

 

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.

2 Comments to “Using DOM Explorer to Inspect your Office App in Visual Studio”

Comments are closed.