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.

How to create and debug launch.json in VSCode

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.

**Substitution Variables*****Explanation***
${workspaceRoot}|path of the folder opened in VisualStudioCode
$${file}|Current active file
$${fileBasename}|basename of the currently active file
$${fileDirname}|directory name of currently active file
$${fileExtname}|current active file extension
$${CWD}|Current working directory of the task runner at startup

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
    }
]

コメント

Discover more from 株式会社CONFRAGE ITソリューション事業部

Subscribe now to keep reading and get access to the full archive.

Continue reading

Copied title and URL