How to create and debug launch.json in VSCode

How to create and debug launch.json in VSCode

To debug with VSCode, you need to add plug-ins, etc. First, create a launch.json file.

The following file is created by selecting “Debug” – “Open Configuration”.

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "pwa-node",
      "request": "launch",
      "name": "Program startup",
      "program": "${workspaceFolder}\\index.js",
      "outFiles": [
        "${workspaceFolder}/**/*.js"
      ]
    }
  ]
}

Now when you press F5, index.js directly under the workspace will run in debug mode.

The type is set to node, but if you change it to chrome, Chrome will launch.

There is a javascript debugger plugin in builtin.

Debugging Angular with Chrome for Debugger

The first step is to debug Angular in Chrome. Write as follows, assuming Angular’s port is the default 4200.

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "chrome",
      "request": "launch",
      "name": "Angular Test",
      "url": "http://localhost:4200/",
      "webRoot": "${workspaceRoot}"
    }
  ]
}

${workspaceRoot} is the path to the folder opened in VisualStudioCode.

The following are other substitution variables.

Set environment variables

You can set environment variables in launch.json, specifying env.

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "Launch Program",
      "skipFiles": [
        "<node_internals>/**"
      ],
      "program": "${workspaceFolder}\\node_modules\\mocha\\bin\\mocha",
      "env": { // environment variable
        "http_proxy": "http://proxy.confrage.co.jp:8080/", // proxy
        "NODE_DEBUG":"INFO" // Output only INFO
      }
    }
  ]
}

Debugging by running mocha

If you want to debug test code with mocha, specify mocha as follows

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "Launch Program",
      "skipFiles": [
        "<node_internals>/**"
      ],
      "program": "${workspaceFolder}\\node_modules\\mocha\\bin\\mocha", // mocha designation
      "env": {
        "NODE_DEBUG":"INFO,ERROR" // No need to set if there are no environment variables
      },
      "args": [
        "--timeout",
        "900000",
        "${workspaceFolder}\\test\\**\\*.test.js" // In this case, all test code is debugged
      ]
    }
  ]
}

Output in console.log

Add “console”: “integratedTerminal” if you want console.log() to be output to the terminal during debugging.

"configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "Launch Program",
      "skipFiles": [
        "<node_internals>/**"
      ],
      "program": "${workspaceFolder}\\node_modules\\mocha\\bin\\mocha",
      "env": {
        "NODE_DEBUG":"INFO,ERROR"
      },
      "args": [
        "--timeout",
        "900000",
        "${workspaceFolder}\\test\\**\\*.test.js"
      ]
      "console": "integratedTerminal" // ★ add
    }
]

高橋