How to debug a Yeoman Generator using VS Code

I am a big fan of Yeoman and have been working with it quite a bit lately.  As with all development at some point you are going to need to set break points and step through the code.  Luckily Visual Studio Code is not only a great editor it has fantastic tools for debugging Node.js.

The key is starting node with the –debug-brk switch. For example I have a Yeoman generator that I am developing call yo team. To attach the debugger I first need to add a configuration to Code.

  1. Click Debug in the Activity Bar
  2. Then click the gear to add a configuration  
  3. Now click Node.js
  4. Now either start a command prompt, PowerShell or as I have, configure the integrated terminal to PowerShell and type the following command replacing team with the name of your generator
    node --debug-brk .\node_modules\yo\lib\cli.js team

  5. Now switch the debugger configuration to Attach to Port
  6. Click the Start Debugging button

Now Code will attach to the process and break at the first line.  Now you can set break points and step through the code of your generator.

Comments (2) -

  • Instead of launching yo externally and then attaching the debugger, you can do the same in one step from within VS Code with this launch configuration:

                "type": "node",
                "request": "launch",
                "name": "yeoman team",
                "program": "${workspaceRoot}/node_modules/yo/lib/cli.js",
                "args": [ "team" ],
                "stopOnEntry": true,
                "cwd": "${workspaceRoot}",
                "console": "integratedTerminal",
                "internalConsoleOptions": "neverOpen"

    By using the integrated terminal you can interact with yo. If you want to use a real external terminal, just set 'console' to "externalTerminal".

Add comment