In this article I will demonstrate the ability to activate and use the Internet Explorer developer console from within an Office Add-In.
As I have discussed before, without using the debugging tools available within Visual Studio it is hard to debug Office Add-In development. In the past I have used firebug lite to assist in this but it is far from ideal. Within Windows 10 there is a new capability to open a developer console which help alleviate this issue to an extent.
On a Windows 10 operating system you will find F12 in the %system32% directory. Normally this would be c:\windows\system32\F12\F12chooser.exe
Open up you favorite Office Add-In and or one you are working on and then open F12Chooser
Selecting TaskPane.html in this case will open the Internet Explorer developer tools for that web page. In Windows the Office Add-In is surfaced through an embedded IE windows within the office client.
Using the developer console you can execute commands as normal
You can also use the selector tool to look at styles
Thanks to Michael Zlatkovsky (Microsoft Office Add-In dev – this guy) for showing me this 🙂
This is a major improvement for me over having to use firebuglite – interestingly though Michael was very intrigued that I had got that to work as well 🙂
2 thoughts on “Using “F12” in Windows to get an Office Add-In development developer console”
[…] I now load up my Office Add-In within Word we can see (using the F12 tool) that it is the same URL (same web page). Because it is in the Add-In […]
[…] at the application using the F12 tool we can see the hosted Office Add-In location and also see the prediction in […]