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

score 10 · Accepted Answer · answered May 11 '16 at 16:40

10

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

answered May 11 '16 at 16:40

Michael Zlatkovsky - Microsoft

8,424
1
33
46

1

Hi, that's what exactly I've been looking for. Thanks a lot – Alexey Zelenkin May 12 '16 at 08:39
@MichaelZlatkovsky-Microsoft Would you have time to put your two cents in on [this post](https://stackoverflow.com/q/53027657/1232087). Thanks in advance. – nam Nov 01 '18 at 14:26
VSCode debugging would be a nice option. – ty1 Feb 28 '20 at 22:36
@AlexeyZelenkin Can you review this question, please? https://stackoverflow.com/questions/62388829/ – Baig Jun 15 '20 at 18:38
@Michael can you kindly also answer this related question? https://stackoverflow.com/q/63502856/1243247 – João Pimentel Ferreira Aug 21 '20 at 16:57
@JoãoPimentelFerreira, I am no longer on the Office Extensibility team -- but hopefully someone from the product team will pick up your question. – Michael Zlatkovsky - Microsoft Aug 21 '20 at 17:14

Bonelol · Answer 2 · 2020-08-20T21:44:08.837

8

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://learn.microsoft.com/en-us/office/dev/add-ins/testing/debug-add-ins-using-f12-developer-tools-on-windows-10

edited Aug 20 '20 at 21:44

answered Oct 17 '17 at 03:08

Bonelol

526
6
13

2

The executable's name can also be "IEChooser.exe" https://learn.microsoft.com/en-us/office/dev/add-ins/testing/debug-add-ins-using-f12-developer-tools-on-windows-10 – Rvanlaak Jul 30 '18 at 13:54
See this answer for shortcut to bring up `IEChooser.exe` --> https://stackoverflow.com/a/68020993/5079799 – FreeSoftwareServers Dec 30 '21 at 19:19

score 7 · Answer 3 · answered Aug 22 '20 at 22:27

7

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

answered Aug 22 '20 at 22:27

Matthew Pitts

809
1
8
13

Thanks man! the only answer that worked for me ! – yossico Feb 06 '22 at 16:17

score 4 · Answer 4 · answered Aug 03 '18 at 09:04

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

https://learn.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://learn.microsoft.com/en-us/office/dev/add-ins/testing/attach-debugger-from-task-pane

score 2 · Answer 5 · answered Feb 09 '17 at 12:34

2

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

answered Feb 09 '17 at 12:34

jeanie77

515
1
4
22

score 2 · Answer 6 · answered Jun 17 '21 at 14:05

2

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.

answered Jun 17 '21 at 14:05

Dermot

324
2
6

This seems to just be a shortcut to `IEChooser.exe` but +1` for me! You can do this, then maybe pin the app to taskbar! – FreeSoftwareServers Dec 30 '21 at 19:18

score 2 · Answer 7 · answered May 12 '22 at 15:23

2

Similar to Dermont's answer, I found the easiest thing to do is just right-click the Taskpane and click "inspect" as you would in a browser. You can then navigate to the console from there.

answered May 12 '22 at 15:23

Temba

370
2
14

1

This is actually a cool answer if you don't want to use visual studio, thank you Temba! LEGEND! – Khutso Nov 15 '22 at 13:54

score -1 · Answer 8 · answered Oct 09 '19 at 02:02

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.

Console log in Javascript Office Addin

8 Answers8

Linked