I created an Office Add-In using the Yeoman generator, I chose the React add-in and I was able to make it run properly within VS Code by following this tutorial:
https://learn.microsoft.com/en-us/office/dev/add-ins/tutorials/excel-tutorial
The react boilerplate includes a piece of code which logs an action to the console, but I see no console anywhere. According to the documentation, since my version of Office is 2016 volume licensed, I'm running Internet Explorer, and since my Windows system is 8.1, I can't use the F12 tools nor the Microsoft Office Add-In Debugger, so how do I view these logs like I do when I develop web applications for other browsers like Chrome and Firefox?
I followed the instructions in this guide by microsoft:
https://learn.microsoft.com/en-us/office/dev/add-ins/testing/debug-add-ins-using-f12-tools-ie
Now, for what I understood, the only option I'm left with is to "Switch to the Internet Explorer 11 webview". So I ran the command npx office-addin-dev-settings webview manifest.xml ie in the terminal and it returned "The web view type is set to Microsoft Internet Explorer". Then when I go ahead and type npm start, the add-in loads correctly but I still can't see any dev tools.
I did try something else by going to the Run and Debug tab in VS Code, choosing the option "Excel Desktop (Edge-Legacy)", running the command npx office-addin-dev-settings webview manifest.xml edge-legacy, modifying the launch.json file so it didn't complain but I saw no difference.
I was able to have bridge chrome and edge devtools using the IEDiagnosticsAdapter, but nothing appears in the console, so I think it's unsupported.
Related
The Add-in was working fine under Internet Explorer 11 and I was able to reliably observe and debug its behavior in Visual Studio 2017. Recently after some automatic Windows/Office updates, I noticed that iexplore.exe was not being used as the host browser. This resulted
in not being able to know what process to attach to for debugging.
At this point, out of desperation I executed the following steps to to set JS_DEBUG:
In a windows power shell window executed command
Get-AppxPackage Microsoft.Win32WebViewHost
The command listed the package information including full package name for Win32WebViewHost , which was
Microsoft.Win32WebViewHost_10.0.18362.449_neutral_neutral_cw5n1h2txyewy
I then executed the following
setx JS_DEBUG Microsoft.Win32WebViewHost_10.0.18362.449_neutral_neutral_cw5n1h2txyewy
After some poking I noticed that WWAHost.exe was being used as the browser. Now the add-in is deploying fine but is encountering strange errors.
Is it possible that the above steps resulted in WWAHost.exe as the browser being used to host the add-in. So wondering how to undo the above setting so Internet Explorer 11 is the browser used by Excel to host the add-in.
You cannot control which browser is used to host the add-in. Office decides that. For details how this is determined, see the article: Browsers used by Office Add-ins.
I want start to implement an Outlook 365 Web Add-In.
After all, I decided to create it with React.
I already tried to set up some project's but all of them have a lot disadvantages:
Visual Studio 2017 Office 365 Outlook Project:
Pro:
Client debugging support (quite important)
Con:
As it's a Web-Project, hosted by IIS, I cannot work with NPM (YARN) and Webpack (without lot of frustration) and compile ES6, JSX code to ES5 and debug that stuff
Visual Studio Code:
Pro:
Node and NPM Support
Can easily work with React and ES6/7/JSX
Contra:
No debugging support for client side
Question
However MS has written in it's own documentation that till this day we're unable to debug JS-Code with Visual Studio Code in Outlook, is there maybe an comfortable alternative to do it?
I don't want to give up work with React and ES6 so is there a way to do it with VS-Web Projects and IIS?
What is in your opinion the best work flow for my needs?
Thank's!
There is a middle ground where you can use VS Code but still have decent (albeit not quite as tightly integrated as in VS debugging). The trick is just to make sure that you have Visual Studio, but it needn't be a VS project that you are debugging:
If you are on Outlook for PC / Desktop: See https://dev.office.com/blogs/attach-debugger-from-the-task-pane. The article shows you how to attach in the context of Word, but the same applies to Outlook (and instead of using the "Personality Menu", you can just right-click and see the same "attach debugger" option).
If you are debugging a web version of Outlook, that's even easier: just open up your browser's F12 tools.
Hope this helps!
I have a client who is asking me to fix an issue they are having with Microsoft Project.
The issue is that they are attempting to open a task list on SharePoint Online via the 'Open with Project' button in the ribbon, but after the alert asking them if they would like to open it in Project 2016 pops up nothing happens.
I have set up a fresh SharePoint environment and tried it at my end, but I get the same problem. There is no error message (as an alert or in the console) and I have wracked my brain and come up dry.
What I have tried:
New SharePoint instance.
Fresh Microsoft Project install.
Looked at the site/site collection features
Multiple browsers (specifically Chrome, IE and Firefox)
The issue is the same no matter what I do.
Has anyone else come across this problem before and, if so, how did you solve it?
Are you using 2016 Click-to-run (C2R) or MSI version? Can you share the build number from winproj.exe?
If you are on C2R version, can you try making the following registry edits (save the following as a .reg file and run it) and see if it helps?
Windows Registry Editor Version 5.00
[HKEY_CURRENT_USER\SOFTWARE\Wow6432Node\Microsoft\Office\16.0\Common\ExperimentEcs\Overrides]
"ofhdegpklv1irq0"=dword:00000000
[HKEY_CURRENT_USER\SOFTWARE\Microsoft\Office\16.0\Common\ExperimentEcs\Overrides]
"ofhdegpklv1irq0"=dword:00000000
I develop Excel tab-pane addin(office.js api) and use F12Chooser tool for debugging.
After upgrade Windows 10 to build 14342.1001 I can't run F12Chooser.exe from:
C:\Windows\SysWOW64\F12\F12Chooser.exe and C:\Windows\System32\F12\F12Chooser.exe
After double-click the mouse cursor quickly flashes and nothing happened. When try run from context menu in Excel web view still nothing happened.
(This is an old post so replying in case anyone else finds it usefull.)
You can file a bug/feedback on F12Chooser in the Feedback Hub (search for it in start). If you place it in the Microsoft Edge -> Developer Tools category it should get routed to the right people.
As a workaround if you have Visual Studio 2017 installed you can use that to attach the script debugger to any process from the attach to process menu (changing the debug engine to script). VS2017 has the same tools as F12 (e.g. the DOM Explorer and Console etc.).
I am using Visual Studio Code for a javascript project. You can set breakpoints and step through and debug very easily the code that runs in nodejs. Is there any way to allow breakpoints and debugging for the client side, browser running code?
Debugging via console.log gets old real quick.
For debugging in Chrome there is the Visual Studio Code: Debugger for Chrome extension. You can find this extension in the marketplace, search for debugger as told in the debugging manual. Unfortunately there is (currently) no support for other browsers,
Debugging node.js works out of the box, see the debugging manual above or John Papa's blog post.
Debugging both client and server (as Phil commented) is not possible at least in my opinion since you need to have two different launch configurations, sorry.
You should use developer tools which all modern browses have (F12).
I prefer chrome because with workspaces and you can inline edit your code in browser.
By opening you project in chorme Browser and using chrome DevTools.
You can debug it whatever you want.
steps:
Open your project (with url).
Open DevTools (F12)
Choose the "Elements" and choose the Element
You can see "Event Listeners" on the right panel , Select what you needed
And then, You can right click the event you, Select "Show function defination"
Enjoy yourself !
If you means Debug Nodejs ,As I known there's A npm package named "debuger"?
Another technique is to use the Visual Studio Code: Debugger for Chrome extension. Save the contents of your launch.json config for node.js and delete it. Then create the Chrome launch.json. Combine the two and you can debug either the server or the client in Code (but not both at the same time).
To debug the client, the server must be running, so from a command prompt use the "node" command that starts the server. In Code launch the Chrome debugger and debug the client side.