{"id":545,"date":"2017-02-15T00:00:00","date_gmt":"2017-02-15T08:00:00","guid":{"rendered":"http:\/\/officedevblogs.wpengine.com\/?p=545"},"modified":"2017-02-15T00:00:00","modified_gmt":"2017-02-15T08:00:00","slug":"attach-debugger-from-the-task-pane","status":"publish","type":"post","link":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/attach-debugger-from-the-task-pane\/","title":{"rendered":"Attach debugger from the task pane"},"content":{"rendered":"<div id=\"body-content\">\n<p>We&rsquo;re happy to announce the availability to attach the debugger from the task pane for Office Add-ins.&nbsp; This attach debugger feature will directly attach the debugger to the correct Internet Explorer process for you.&nbsp; You can attach to the debugger regardless even if the add-ins is written using a non-Visual Studio flow, eg. Yeoman Generator, Visual Studio Code, node.js, Angular, etc.&nbsp;<\/p>\n<p>Take for example the <a href=\"https:\/\/github.com\/OfficeDev\/Word-Add-in-JS-Redact\">Word-Add-in-JS-Redact<\/a> add-in sample on GitHub.&nbsp; It&rsquo;s written using node.js and requires npm. &nbsp;<\/p>\n<p>In Office 2016 for Windows, Build 77xx.xxxx or later, you can attach it to the debugger from the task pane. &nbsp;&nbsp;To launch the <strong>Attach Debugger <\/strong>tool, click on the top right hand corner of the task pane to activate the <strong>Personality<\/strong> menu (as highlighted by the red circle in the following image). &nbsp;&nbsp;<\/p>\n<p><img decoding=\"async\" width=\"446\" height=\"434\" alt=\"word\" src=\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2018\/05\/Word20redact.png\"><\/p>\n<p><p>Select <strong>Attach Debugger<\/strong>. This launches the <strong>Visual Studio Just-in-Time Debugger <\/strong>dialog as shown in the following image.<\/p>\n<p><img decoding=\"async\" width=\"394\" height=\"437\" alt=\"Just-in-time\" src=\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2018\/05\/Visual20Studio20Just20Add-in.png\"><\/p>\n<p><p>You can then attach and debug in Visual Studio as shown in the following screenshot. &nbsp;&nbsp;<\/p>\n<p><strong>Note<\/strong>:&nbsp; Currently the only supported debugger tool is <a href=\"https:\/\/www.visualstudio.com\/vs\/office-tools\/#downloadvs\">Visual Studio 2015<\/a> with <a href=\"https:\/\/msdn.microsoft.com\/en-us\/library\/mt752379.aspx\">Update 3<\/a>.&nbsp; If Visual Studio is not installed on the computer, selecting the <strong>Attach Debugger <\/strong>option doesn&rsquo;t result in any action.&nbsp;<\/p>\n<p><p><img decoding=\"async\" width=\"740\" height=\"391\" alt=\"iexplore\" src=\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2018\/05\/Image203-3.png\"><\/p>\n<p>You can set breakpoints, examine the objects or variables, use the DOM Explorer, etc.<\/p>\n<p>To learn how to:<\/p>\n<ul>\n<li>Launch and use the DOM Explorer in Visual Studio, see Tip 4 in <a href=\"https:\/\/.msdn.microsoft.com\/officeapps\/2013\/04\/16\/building-great-looking-apps-for-office-using-the-new-project-templates\/#tips_tricks\">Tips and Tricks<\/a> section of the <a href=\"https:\/\/.msdn.microsoft.com\/officeapps\/2013\/04\/16\/building-great-looking-apps-for-office-using-the-new-project-templates\/#tips_tricks\">blog post<\/a>.<\/li>\n<li>Set breakpoints, see <a href=\"https:\/\/msdn.microsoft.com\/en-US\/library\/5557y8b4.aspx\">Using Breakpoints<\/a>.<\/li>\n<li>Use F12, see <a href=\"https:\/\/msdn.microsoft.com\/en-us\/library\/bg182326(v=vs.85).aspx\">Using the F12 developer tools<\/a>.<\/li>\n<\/ul>\n<p>You can also find the above information in the <strong>Debug your add-in<\/strong> section of <a href=\"https:\/\/dev.office.com\/docs\/add-ins\/get-started\/create-an-office-add-in-using-any-editor#debug-your-add-in\">this topic<\/a>.<\/p>\n<p>Happy Coding!<\/p>\n<\/p><\/div>\n","protected":false},"excerpt":{"rendered":"<p>We&rsquo;re happy to announce the availability to attach the debugger from the task pane for Office Add-ins.&nbsp; This attach debugger feature will directly attach the debugger to the correct<\/p>\n","protected":false},"author":69076,"featured_media":546,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[11],"tags":[18,12],"class_list":["post-545","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-office-add-ins","tag-excel","tag-outlook"],"acf":[],"blog_post_summary":"<p>We&rsquo;re happy to announce the availability to attach the debugger from the task pane for Office Add-ins.&nbsp; This attach debugger feature will directly attach the debugger to the correct<\/p>\n","_links":{"self":[{"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/posts\/545","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/users\/69076"}],"replies":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/comments?post=545"}],"version-history":[{"count":0,"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/posts\/545\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/media\/546"}],"wp:attachment":[{"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/media?parent=545"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/categories?post=545"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/tags?post=545"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}