Console log in Javascript Office Addin

Question

I have a question about "console.log" in Javascript Web Office Addins. Currently I am working on Javascript Word Addin and can't troubleshoot it, because I don't understand where the "console.log" output is sent. On Microsoft site there are a lot of examples, that contain contain "console.log", but they never specify how to check these outputs.

So, the question is how can I see this "console.log" output. I am not using Visual Studio.

BR, Alexey

Answer 1

When you say you're not using Visual Studio, do you mean that you're not using the Visual Studio template? Or that you physically don't have Visual Studio on the machine (if so, might I recommend you install it -- even just the free/community edition)?

Once you have that:

• Close all instances of Internet Explorer
• Go to Visual Studio -> Debug -> Attach to process
• Be sure to select "Attach to": "Script code"
• Select all the iexplore.exe instances
• Click "Attach"

You should now get a full debugging experience, complete with console output ("JavaScript console" window; use the Quick Launch (ctrl-Q) to launch it if it doesn't display be default), DOM Explorer (again, use Quick Launch if you don't see it), and more.

~ Michael Zlatkovsky, developer on Office Extensibility team, MSFT

Answer 2

There is an alt way if you don't have Visual Studio. There is a tool in windows name is 'IEChooser (was F12Chooser)', you can find it at:

• For the 32-bit version of Office, use C:\Windows\System32\F12\IEChooser.exe
• For the 64-bit version of Office, use C:\Windows\SysWOW64\F12\IEChooser.exe

More info can be found at: https://docs.microsoft.com/en-us/office/dev/add-ins/testing/debug-add-ins-using-f12-developer-tools-on-windows-10

Answer 3

For anyone looking at this in 2020. There is a new Microsoft Edge Dev Tools (Preview) app for Windows 10. This tool will automatically detect both local processes. Simply click on the process and it will attach. You can then debug, check out the console, and more.

https://www.microsoft.com/en-us/p/microsoft-edge-devtools-preview/9mzbfrmz0mnj?activetab=pivot:overviewtab

Answer 4

In Mac you can use Safari Web Inspector as it is explained here:

https://docs.microsoft.com/en-us/office/dev/add-ins/testing/debug-office-add-ins-on-ipad-and-mac

In Windows is possible to just attach a debugger to the add-in:

https://docs.microsoft.com/en-us/office/dev/add-ins/testing/attach-debugger-from-task-pane

Answer 5

I don't know if this option is available on free versions of Visual Studio, but with licensed VS 2015 I solved with a simple window:

(after starting the project) Debug > Windows > JavaScript Console

Answer 6

To view the logs generated by office add-ins, you need to use the webservice of the application you are using e.g Excel, Outlook etc. All you need to do is to upload the manifest.xml file as an addin on the web and then it will automactically sync or update when you make changes to your local files.

Answer 7

This works for me with Office Add In for Excel.

If your Add In has a TaskPane you can hover over it to get an arrow appear on top-right. Click arrow to open a menu and choose Attach Debugger. You can also do CTRL-SHIFT-i from the TaskPane. For me this opens Edge DevTools separately allowing me to view console.log output from my Add In.