#Visual studio code js debugger code#

Open VS Code and open your project in it.

If you want to debug an existing project that was not created with Yo Office, carry out the procedure in the Appendix and then return to the next step of this procedure.

If you want to debug an existing project that was created with Yo Office, skip to the next step.

Use any one of our quick start guides, such as the Outlook add-in quick start, in order to do this.

#Visual studio code js debugger generator#

If you want to create a project to experiment with debugging in Visual Studio Code, use the Yeoman generator for Office Add-ins.

The first step depends on the project and how it was created. If you haven't done this before, consider visiting one of our tutorials, like this Excel Office Add-in tutorial.

These instructions assume you have experience using the command line, understand basic JavaScript, and have created an Office Add-in project before using the Yeoman generator for Office Add-ins. Microsoft Edge A combination of platform and Office application that supports Microsoft Edge Legacy with with the original webview (EdgeHTML) as explained in Browsers used by Office Add-ins.The following image shows this extension in action. Your code changes also persist, so you can see the results of multiple changes to your code. You can see changes in your code immediately while the debugger is attached, all without losing your debugging session. This debugging mode is dynamic, allowing you to set breakpoints while code is running. Afterward, you should be able to use the debugger.If you cannot, or don't wish to, debug using tools built into Visual Studio Code or you are encountering a problem that only occurs when the add-in is run outside Visual Studio Code, you can debug Edge Legacy (EdgeHTML) runtime by using the Edge Legacy developer tools as described in Debug add-ins using developer tools in Microsoft Edge Legacy. Last you have to replace the URL with the one where your app is actually running on. For Firefox it would be Firefox: Launch (Server). Now use the autocomplete to generate the corresponding configuration. If it doesn't show up in the list or you already have a launch.json file, you can instead go to the file. In the Video I choose Chrome but for Firefox it should be exactly the same. Choose the browser with which you want to debug. It is included in the default debugger since version 1.46.Īs the Video shows you have to create a launch.json file by going to the debug tab.

#Visual studio code js debugger install#

You can find it here.įor Chrome, you don't need to install an extension as VS Code. Install the extension for debugging Firefox. If you want to use Firefox you'll need to go to the extensions tab in VS Code first. In this example, I'll debug a react app in Firefox and Chrome. Launch Firefox or Chrome against localhost Go to the debugging tab, select 'Attach' from the dropdown, and click the start icon. Afterward, you should be able to attach the debugger. Now you have to start your app with this port as the -inspect parameter. This will generate code that includes a port. Then within the configuration array, you have to type 'attach' and select 'Node.js: Attach'. For that, you have to open your launch.json by clicking that little gear icon on top of the debug tab. This would enable you to use automatic reload with tools like nodemon. Attach debugger to PortĪnother way to enable debugging on servicer side apps is to attach the debugger to a port. This works the same for express APIs, which run on some port. You can go to any file of your program and set a breakpoint by clicking next to the line number. Now your node.js program should be running. To do that choose the 'Launch Program' option in the debug window and click the 'play icon'. The generated configuration will run the file, which is specified under 'program' with a debugger attached. Then you can choose from the autocomplete. You can add new configurations by typing the environment (eg 'node'). If you don't see the option to create a new file, you can open the existing launch.json by clicking on the gear icon. If you don't have anything configured yet you can create a new launch.json. Debugging Node.jsįirst of all, you need to go to the debug tab on the right menu of VS Code.

#Visual studio code js debugger how to#

I will show how to set up debugging for Javascript in VS Code for Node.js and for React in Firefox or Chrome. In the following post, you'll find some videos followed by an explanation. This can be faster when you exactly know what the issue is, but it will most likely take longer if that's not the case. Every time I'm tracing a bug, I'm tempted to throw in a console.log() to check some variables.