How to debug a Gulp task?

With Node.js version 6.3+ you can use the --inspect flag when running your task.

To debug a gulp task named css:

1. Find out where your gulp executable lives. If gulp is installed locally, this will be at node_modules/.bin/gulp. If gulp is installed globally, run which gulp (Linux/Mac) or where gulp (Windows) in a terminal to find it.

2. Run one of these commands according to your version of Node.js. If required, replace ./node_modules/.bin/gulp with the path to your gulp installation from step 1.

   • Node.js 6.3+: node --inspect --debug-brk ./node_modules/.bin/gulp css
   • Node.js 7+: node --inspect-brk ./node_modules/.bin/gulp css

3. Use Chrome to browse to chrome://inspect.

The --debug-brk (Node.js 6.3+) and --inspect-brk (Node.js 7+) flags are used to pause code execution on the first line of code of your task. This gives you a chance to open up the Chrome debugger and set breakpoints before the task finishes.

If you don't want the debugger to pause on first line of code, just use the --inspect flag.

You can also install the Node.js Inspector Manager (NIM) extension for Chrome to help with step 3. This will automatically open up a Chrome tab with the debugger ready to go, as an alternative to manually browsing to a URL.

For anyone using VS Code 1.10+

1. Open the debug panel.
2. Click on the settings icon.
3. Click on Add Configuration button.
4. Choose Node.js: Gulp Task.

This is how your launch.json file should look.

{  // Use IntelliSense to learn about possible attributes.  // Hover to view descriptions of existing attributes.  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387  "version": "0.2.0",  "configurations": [    {      "type": "node",      "request": "launch",      "name": "Gulp task",      "program": "${workspaceFolder}/node_modules/gulp/bin/gulp.js",      "args": [        "yourGulpTaskName"      ]    }  ]}

If you are using webstorm you can right click the task in the gulp panel and select debug.