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
:
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, runwhich gulp
(Linux/Mac) orwhere gulp
(Windows) in a terminal to find it.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
- Node.js 6.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.
Thanks user2943490, on Windows I found this version worked for me:
node --inspect --debug-brk ./node_modules/gulp/bin/gulp.js --verbose
If you are using webstorm you can right click the task in the gulp panel and select debug.
For anyone using VS Code 1.10+
- Open the debug panel.
- Click on the settings icon.
- Click on Add Configuration button.
- 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"
]
}
]
}