4

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.

Improve this question

4 Answers 4

Reset to default
9
+50

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.

Improve this answer
Sign up to request clarification or add additional context in comments.

2 Comments

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.
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.
3

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.

Improve this answer

2 Comments

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

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

Improve this answer

Comments

0

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.

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.