Debugging task runner tasks (like Gulp) with Visual Studio Code editor/debugger

You are writing JavaScript or any other compile to JavaScript language (TypeScript, CoffeeScript,…)

You are using gulp to automate your build process

If your build process doesn’t do what you want, it’s some times tedious to find out where the problem is. Mostly you can use console.log to see why things are not as you expect.

With Visual Studio Code you can use the build-in debugger to step into your gulp plugins to find out what’s wrong. Visual Studio Code is cross platform and runs on Linux, Mac OS and Windows.

Create a debug configuration (launch.json) that starts the gulp.js file from the node_modules folder.Untitled

Because the node_modules folder is inside your project you can open any js file from any plugin and set break points. Let’s say inside the gulp.js file, then click the run icon…Untitled

Above a break point at the start of the gulp.js file …

untitled2

… above a break point inside the gulpfile.js with variable inspection open…

Untitled

…and a break point inside a gulp plugin, in this case gulp-lintspaces/index.js. Variable inspection, call stack and other debugging features work as expected.

Untitled

Pretty sweet I would say.

Advertisements

9 thoughts on “Debugging task runner tasks (like Gulp) with Visual Studio Code editor/debugger

  1. Pingback: Reacting to feedback, common issues, and our first update - Visual Studio Code - Site Home - MSDN Blogs

  2. Pingback: Debugging SPFX Gulp tasks in VS Code | Yet Another SharePoint Blog

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s