Donovan Brown

Technology Blog

How to debug a Yeoman Generator using VS Code

07 April 2017 Donovan Work (3)

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  
    image
  3. Now click Node.js
    image
  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

    image
  5. Now switch the debugger configuration to Attach to Port
    image
  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.

Tags :

Comments (3) -

  • Andre Weinand

    4/7/2017 11:07:28 AM | Reply

    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".

    • Donovan

      4/7/2017 1:00:57 PM | Reply

      Awesome thanks for sharing.

    • Spown

      3/9/2018 1:52:33 AM | Reply

      I think cwd should be something like "cwd": "${workspaceRoot}/sandbox" to not to pollute the project itself...

Add comment

Loading