How can I debug Gulp tasks using Node Tools for Visual Studio?

Question

I recently installed NodeJS Tools for Visual Studio which touts support for Node environments in VS. Notably, it has the ability to set debug breakpoints from the IDE.

It's unclear to me if it is possible to set breakpoints when debugging Gulp tasks. The Task Runner has the ability to detect the Gulp task and output console.log statements to a window, but I haven't found a better means of debugging.

I found this post from a while back: How can I debug gulpfile.js when running it with Visual Studio Task Runner Explorer? However, this post doesn't involve NodeJS Tools for VS. So, I'm re-asking the question to take that plugin into consideration.

Admittance

have you tried debugger; ? This works for most javascript based and use chrome dev tools by hit the F12 button. you can also add break points here. – Metro

I just did, but to no avail. The issue is that the expected debugging route is to build/start the project. The Gulp tasks are just a subset of the project, and independent of it, so I'm not confident that there is support for debugging them. And yes, I am aware of how to debug in Chrome Dev Tools. :) Just hoping to not have to use extra tools to run Gulp tasks in Chrome when VS has support for debugging Node. – Admittance

Try this site – Metro

Right. That's what I just mentioned. I'm trying to not use Node Inspector to run Gulp in Chrome. – Admittance

Hope, it works for you - hansrwindhoff.wordpress.com/2015/05/05/… – Hamal

@UtkarshDubey Thanks, but that is Visual Studio Code. This question is about the regular version of Visual Studio and NTVS. – Colmar

@Colmar see if my answer helps – Externality

Answer 1

You can. Right-click the Node project, select Properties, and configure your app as follows (in the image, default is the Gulp task that you want to run).

Alternative method:

1. In a terminal, and in the directory where the gulpfile is, run node --debug=44331 --debug-brk ../node_modules/gulp/bin/gulp.js default. In my case, default is the task name I want to run/debug.
2. In Visual Studio, go to Debug | Attach to Process. Select Node.js Remote debugging as Transport, and in the qualifier select localhost:44331. Press enter and you should see the Node process appear in the list. Click Attach.

Voila, the breakpoints are hit.

A couple of things to notice:

• If you get something like Unable to attach to process. Error 0x80004005 use a different port. I couldn't get it to work with port 5858.
• It may not work the first time you attach to the process (see my previous screenshot how I got ECANCELED?). Try again.

Externality

Thanks, I got this to work. I'd hoped for something more convenient than triggering debugging one run at the time from the terminal, but I guess it's good enough for the few times one needs to debug. – Colmar

Hold on, I just realized that you can. I'll edit this answer – Externality

I got this to work before, but now I always get that ECANCELED error when I try to attach to the process. Any ideas? – Colmar

Yes, still always get the same error when I try to connect. – Colmar

My main project is not NodeJs, it's .NET 4.5.1 project. But I'm using Gulp to run pre-build tasks of getting and reorganizing necessary JavaScript files and CSS. So, am I out of luck with debugging gulp tasks and stopping on breakpoints there? – Jobbery