Debugging SPFX Gulp build tasks in VS Code

In VS Code click View==>Debug from the main menu

The Debug box will appear:


Click the dropdown in the Debug Box and select Add Configuration.

From the list of configurations select {} Node.js: Launch Program:



Create a configuration with the following settings:


“type”: “node”,

“request”: “launch”,

“stopOnEntry”: true,

“name”: “node-gulp”,

“args”: [




“program”: “${workspaceRoot}\\node_modules\\gulp\\bin\\gulp.js”,

“cwd”: “${workspaceRoot}”,

“runtimeExecutable”: null,

“env”: {




In the configuration I wanted to debug the Bundle –ship command, so I just entered those strings in the args[].


Now, back in the Debug Box, hit the dropdown again and select the configuration you just created (in the example above I called it node-gulp). Then hit the green arrow in the debug box and you will hit a breakpoint on the first line of the gulp.js file:


You can place additional breakpoints in any of the gulp task .js or .ts files that live in node_modules by clicking in the left margin of the editor. A good starting point is node_modules/@microsoft/sp-build-web/lib/SPWebBuildRig.ts.


See the blog post at for more info.

Good luck!


This entry was posted in javascript, react, spfx, Uncategorized and tagged . Bookmark the permalink.

Leave a Reply

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

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

Google+ photo

You are commenting using your Google+ 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 )

Connecting to %s