{"id":1133,"date":"2015-11-11T10:34:40","date_gmt":"2015-11-11T17:34:40","guid":{"rendered":"https:\/\/toddbaginski.com\/blog\/?p=1133"},"modified":"2015-11-11T10:34:40","modified_gmt":"2015-11-11T17:34:40","slug":"how-to-debug-office-add-in-in-office-clients-without-visual-studio","status":"publish","type":"post","link":"https:\/\/toddbaginski.com\/blog\/how-to-debug-office-add-in-in-office-clients-without-visual-studio\/","title":{"rendered":"HOW TO: Debug Office Add-in In Office Clients Without Visual Studio"},"content":{"rendered":"

If you have ever developed an Office Add-in with Visual Studio you are familiar with pressing F5 to run your Office Add-in and debug the code in it. \u00a0When you take this approach Visual Studio opens the Office client program associated with your Office Add-in and automatically loads your Add-in into the Office client program. \u00a0Then, all you do is set breakpoints in your code and debug your code. \u00a0Easy peasy, as my son would say.<\/p>\n

But what about if you don’t have Visual Studio installed? \u00a0How can you debug the Office Add-in?<\/p>\n

You first option is to load the Office Add-in in an Office web client and use F12 to debug it from Internet Explorer, or to use the debugger that comes with other web browsers. \u00a0This works, but it does have a couple of\u00a0downsides, such as:<\/p>\n

– You might need to debug the Office client application on the PC because you are targeting specific versions of Office clients on the PC.
\n– You might observe the Office Add-in behaving differently in an Office client application versus an Office web client.<\/p>\n

The other option is one I learned from\u00a0Rolando Jimenez Salgado<\/a> at the Microsoft MVP Summit last week. \u00a0I just tried this option out and it works AWESOME. \u00a0So awesome that I thought I should quickly write up how to do it and share it with all the Office developers on our wonderful planet.<\/p>\n

1. First, fire up an Office client application on your PC. \u00a0In this example I am using Excel.<\/p>\n

2. Next, on the Insert tab in the Ribbon, click the Add-ins button and load an Add-in from the Store or your Add-in Catalog.<\/p>\n

\"Office<\/a><\/p>\n

3. In this example I clicked the Store button and the first Add-in I saw in the list was one written by Rolando himself, so I loaded it.<\/p>\n

\"\"<\/p>\n

4. Next, open the F12Chooser application that comes with Windows. \u00a0There are two versions of this application. \u00a0Use the version of the F12Chooser that matches the version of the Office client application you are running.<\/p>\n

32-Bit –\u00a0C:\\Windows\\System32\\F12\\F12Chooser.exe<\/strong>
\n64-Bit –\u00a0C:\\Windows\\SysWOW64\\F12\\F12Chooser.exe<\/strong><\/p>\n

5. In this example, I am running the 32-Bit version of Office 2013 Professional Plus, so I ran\u00a0C:\\Windows\\System32\\F12\\F12Chooser.exe.<\/strong><\/p>\n

6. After you open the F12 Chooser program, select the application that you would like to debug. \u00a0In this example, I chose the bubbles.azurewebsites.net web site where the Bubbles Office Add-in (that Rolando wrote) runs. \u00a0If you are writing your own Office Add-in then select the web site that correlates to where you have the Add-in deployed. \u00a0This could be a localhost URL.<\/p>\n

\"F12<\/a><\/p>\n

7. As soon as you click the target to debug, the F12 debugger loads. \u00a0Here you can see the F12 Debugging application loaded and attached to the Bubbles Office Add-in.<\/p>\n

\"F12<\/p>\n

8. To test it out, I created a Data Table in my Excel document, then set a breakpoint in the ExcelBubbles.js file that is part of\u00a0the Bubbles Add-in. \u00a0Then I clicked the bubble that says Select Table and the breakpoint I set in ExcelBubbles.js was hit.<\/p>\n

\"Bubbles<\/a><\/p>\n

\"F12<\/a><\/p>\n

Perfect!<\/p>\n

Thanks, Rolando!<\/p>\n

Here is a link where you can learn more about the F12Chooser app. \u00a0http:\/\/blogs.msdn.com\/b\/prakashpatel\/archive\/2015\/11\/05\/vs2015-remote-debugging-javascript-part-3-f12chooser.aspx<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"

If you have ever developed an Office Add-in with Visual Studio you are familiar with pressing F5 to run your Office Add-in and debug the code [\u2026]<\/span><\/p>\n","protected":false},"author":1,"featured_media":1140,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"om_disable_all_campaigns":false,"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"categories":[88,104],"tags":[10,6,45,105,95,7,43],"class_list":["post-1133","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-office","category-office-365","tag-custom-development","tag-how-to-sharepoint","tag-o365","tag-office","tag-office-add-ins","tag-sharepoint","tag-sharepoint-online"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/toddbaginski.com\/blog\/wp-json\/wp\/v2\/posts\/1133","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/toddbaginski.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/toddbaginski.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/toddbaginski.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/toddbaginski.com\/blog\/wp-json\/wp\/v2\/comments?post=1133"}],"version-history":[{"count":6,"href":"https:\/\/toddbaginski.com\/blog\/wp-json\/wp\/v2\/posts\/1133\/revisions"}],"predecessor-version":[{"id":1146,"href":"https:\/\/toddbaginski.com\/blog\/wp-json\/wp\/v2\/posts\/1133\/revisions\/1146"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/toddbaginski.com\/blog\/wp-json\/wp\/v2\/media\/1140"}],"wp:attachment":[{"href":"https:\/\/toddbaginski.com\/blog\/wp-json\/wp\/v2\/media?parent=1133"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/toddbaginski.com\/blog\/wp-json\/wp\/v2\/categories?post=1133"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/toddbaginski.com\/blog\/wp-json\/wp\/v2\/tags?post=1133"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}