How to: Debug JHipster generators with VSCode

Hi, my fellow hipsters!
As a contributor, reviewer or simply a curious user of JHipster you probably wondered how to efficiently debug the JHipster generators.

Debugging an application is mandatory when you implement some new code or when you need to understand internal mechanisms.

I introduce you a quick introduction to the VSCode debug mode with JHipster.

Enjoy!

Prepare your environment

First, you need to download VSCode. VSCode is a lightweight source code editor, developed by Microsoft, which work especially well with core JHipster generator development.

Then clone the generator-jhipster project.

git clone https://github.com/jhipster/generator-jhipster.git

Open the project in VSCode.

JHipster debug configurations

VSCode brings a lot of features to debug your own application. As usual, JHipster makes your job easier.

Open the launch.json file in the .vscode folder.

We can see a lot of configs here. In fact, every object in the “configurations” array is a specific debug configuration.

For example:

{
  "type": "node",
  "request": "launch",
  "name": "jhipster generate sample-dev",
  "program": "${workspaceFolder}/cli/jhipster.js",
  "timeout": 100000,
  "args": [
      "-d",
      "--skip-checks",
      "--skip-git",
      "--skip-cache"
      ],
  "cwd": "${workspaceFolder}/test-integration/samples/app-sample-dev/",
  "console": "integratedTerminal"
}

Focus one second on the “program” field. It’s the node program launched with this debug profile.
“args” contains all arguments you want to add when launching the program. “console” means which console will be used, here the integrated one to VSCode. “cwd” is the current working directory, in other words, the directory where we will launch JHipster and generate an application.

If you check this directory you will see a .yo-rc.json with much information about a JHipster project. On launching, JHipster will detect this file and load parameters from it, no need to fill the questions step.

{
    "generator-jhipster": {
        "applicationType": "monolith",
        "baseName": "jhipsterSampleApplication",
        "packageName": "io.github.jhipster.sample",
        "packageFolder": "io/github/jhipster/sample",
        "authenticationType": "jwt",
        "cacheProvider": "ehcache",
        "enableHibernateCache": true,
        "websocket": false,
        "databaseType": "sql",
        "devDatabaseType": "h2Disk",
        "prodDatabaseType": "mysql",
        "searchEngine": false,
        "buildTool": "maven",
        "enableTranslation": true,
        "nativeLanguage": "en",
        "languages": ["en", "fr"],
        "testFrameworks": ["gatling", "protractor"],
        "serverPort": "8080",
        "jhiPrefix": "myPrefix",
        "travis": true,
        "messageBroker": false,
        "serviceDiscoveryType": false,
        "clientPackageManager": "npm",
        "clientFramework": "angularX"
    }
}

Start our first debug session

Open generators/app/index.js and add a breakpoint in the constructor (click in the editor at the left to the line numbers. A red dot appears when a breakpoint is activated).
For example here:

this.skipClient = this.configOptions.skipClient = this.options['skip-client'] || this.config.get('skipClient');

Please open the debug menu and choose the “jhipster generate sample-dev” configuration. Run it!
The debugger should stop at our breakpoint and we are able to navigate through “variables” and the “call stack”. We also can add “watch” elements.

Congratulations, you have just run your first JHipster in debug mode!

Going further

The next step could be: define your own debug configuration. It will be, probably, pretty close to those from JHipster. You can change the “cwd” value to target your own folder (e.g. /tmp/my_debug_folder). If you target a folder without a .yo-rc.json inside, you will be able to answer to the generator questions. It could be useful if you want to test many scenarios.

The “args” values could be modified to add some specific options like “-- skip-server” if you want to generate a front application.

Conclusion

We have seen that VSCode is “debug ready” and have some features to easily debug applications. JHipster brings his own debug profiles and we’ve seen how to handle them.
JHipster will not have secrets for you, anymore.