VSCode デバッグ完全ガイド - launch.jsonからブレークポイント活用まで徹底解説

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "デバッグ構成の名前",
      "type": "デバッガーの種類",
      "request": "launch または attach",
      "program": "実行するファイルのパス",
      "args": ["コマンドライン引数"],
      "cwd": "${workspaceFolder}",
      "env": {
        "環境変数名": "値"
      }
    }
  ]
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Node.js: Launch Program",
      "type": "node",
      "request": "launch",
      "program": "${workspaceFolder}/src/index.js",
      "skipFiles": ["<node_internals>/**"],
      "console": "integratedTerminal"
    }
  ]
}

1
2
3
4
5
6
7

// settings.jsonでの設定例
{
  "debug.javascript.autoAttachFilter": "smart",
  "debug.javascript.terminalOptions": {
    "skipFiles": ["<node_internals>/**"]
  }
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "npm: start",
      "type": "node",
      "request": "launch",
      "runtimeExecutable": "npm",
      "runtimeArgs": ["run", "start"],
      "cwd": "${workspaceFolder}",
      "console": "integratedTerminal"
    }
  ]
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "nodemon: Launch",
      "type": "node",
      "request": "launch",
      "runtimeExecutable": "nodemon",
      "program": "${workspaceFolder}/src/index.js",
      "console": "integratedTerminal",
      "restart": true,
      "internalConsoleOptions": "neverOpen"
    }
  ]
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

{
  "compilerOptions": {
    "target": "ES2022",
    "module": "commonjs",
    "outDir": "./dist",
    "rootDir": "./src",
    "sourceMap": true,
    "strict": true
  }
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "TypeScript: Launch",
      "type": "node",
      "request": "launch",
      "program": "${workspaceFolder}/src/index.ts",
      "preLaunchTask": "tsc: build - tsconfig.json",
      "outFiles": ["${workspaceFolder}/dist/**/*.js"],
      "sourceMaps": true,
      "skipFiles": ["<node_internals>/**"]
    }
  ]
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "ts-node: Launch",
      "type": "node",
      "request": "launch",
      "runtimeExecutable": "node",
      "runtimeArgs": [
        "-r",
        "ts-node/register"
      ],
      "args": ["${workspaceFolder}/src/index.ts"],
      "skipFiles": ["<node_internals>/**"],
      "sourceMaps": true
    }
  ]
}

1
2
3
4
5
6

{
  "resolveSourceMapLocations": [
    "${workspaceFolder}/**",
    "!**/node_modules/**"
  ]
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Python: Current File",
      "type": "debugpy",
      "request": "launch",
      "program": "${file}",
      "console": "integratedTerminal",
      "justMyCode": true
    }
  ]
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Python: Module",
      "type": "debugpy",
      "request": "launch",
      "module": "mypackage.main",
      "justMyCode": false
    }
  ]
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Python: Flask",
      "type": "debugpy",
      "request": "launch",
      "module": "flask",
      "env": {
        "FLASK_APP": "app.py",
        "FLASK_DEBUG": "1"
      },
      "args": ["run", "--no-debugger", "--port", "5000"],
      "jinja": true
    }
  ]
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Python: Django",
      "type": "debugpy",
      "request": "launch",
      "program": "${workspaceFolder}/manage.py",
      "args": ["runserver", "--noreload"],
      "django": true
    }
  ]
}

1
2
3
4
5
6

import debugpy

debugpy.listen(("0.0.0.0", 5678))
print("Waiting for debugger attach...")
debugpy.wait_for_client()
debugpy.breakpoint()  # この行で停止

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Python: Remote Attach",
      "type": "debugpy",
      "request": "attach",
      "connect": {
        "host": "localhost",
        "port": 5678
      },
      "pathMappings": [
        {
          "localRoot": "${workspaceFolder}",
          "remoteRoot": "/app"
        }
      ]
    }
  ]
}

1
2
3
4
5

// 例: ループで特定の値のときだけ停止
// 条件式: i === 50
for (let i = 0; i < 100; i++) {
  processItem(items[i]);  // ここにブレークポイント
}

1
2

// 3つの関数呼び出しがある行で、特定の位置に設定可能
const result = func1(a) + func2(b) + func3(c);

1
2
3
4
5

// ウォッチに追加する式の例
user.permissions.includes('admin')
items.filter(i => i.status === 'active').length
Object.keys(cache).length
performance.now() - startTime

1
2
3
4
5
6
7

{
  "skipFiles": [
    "<node_internals>/**",
    "${workspaceFolder}/node_modules/**",
    "**/lib/**/*.js"
  ]
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Server",
      "type": "node",
      "request": "launch",
      "program": "${workspaceFolder}/server/index.js"
    },
    {
      "name": "Client",
      "type": "chrome",
      "request": "launch",
      "url": "http://localhost:3000",
      "webRoot": "${workspaceFolder}/client"
    }
  ],
  "compounds": [
    {
      "name": "Full Stack",
      "configurations": ["Server", "Client"],
      "stopAll": true,
      "preLaunchTask": "npm: build"
    }
  ]
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

// 条件付きブレークポイントで特定のエラーをキャッチ
async function fetchUserData(userId) {
  try {
    const response = await fetch(`/api/users/${userId}`);
    const data = await response.json();  // ブレークポイント: !response.ok
    return data;
  } catch (error) {
    console.error('Failed to fetch user:', error);
    throw error;
  }
}

1
2
3
4

// 条件: item.price < 0 || item.quantity > 1000
for (const item of inventory) {
  processItem(item);  // 異常値のときだけ停止
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

// 初期化完了後のクリックイベントのみデバッグ
let initialized = false;

function init() {
  // ... 初期化処理
  initialized = true;  // ブレークポイント1
}

button.addEventListener('click', () => {
  handleClick();  // トリガーブレークポイント（ブレークポイント1の後に有効化）
});

1
2
3
4
5

// ウォッチに追加
process.memoryUsage().heapUsed / 1024 / 1024  // MB単位

// または
performance.memory.usedJSHeapSize / 1024 / 1024  // ブラウザ

1
2
3
4

// .gitignore
.vscode/*
!.vscode/launch.json
!.vscode/tasks.json