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.

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.