Visual Studio Code debugging client side JavaScript

Question

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.

Answer 1

For debugging in Chrome there is the Visual Studio Code: Debugger for Chrome extension. You can find this extension in the marketplace, 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.

• Phil Wright: Great answer. The problem is I have a node project that has server code and client code. Using the extension seems to be fine for debugging client code but it does not allow me to run node so that the backend is running at the same time as debugging the front end.
• Hari Lubovac: And, what's wrong with browsers' debugging tools? I'm not talking about outputting data to console, but stepping-through code execution. You can use debugger; statement for source files that you cannot easily find or for those code blocks/files that get downloaded and immediately executed via AJAX. You can debug IE's processing within Visual Studio, but not other browsers, AFAIK.

Answer 2

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.

• Roberto Navarro: So, the answer is no? How about a way to use phantomjs and visual studio code to have the same experience he described with nodejs?
• Mikhail Vitik: I describe the debugging process for front end browser code. And yes for front end answer is No. Because (if I undertand the debugging process right) VS Code should attach to Chrome browser for debug because it two difference process. It isn't simple thechical task. The Chrome answer is use workspaces and edit code in browser. Regarding PhantomJS it doesn't have any UI so how do you interact with it?

Answer 3

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"?

Answer 4

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.