はじめに

Django開発をDocker上で行い、VSCodeでPython（サーバーサイド）とフロントエンド（Chrome）を同時にデバッグしたい！
そんなときに便利なのが、VSCodeの launch.json によるデバッグ構成です。
本記事では、実際の設定例とともに、各項目の意味や注意点をまとめます。

1. launch.jsonとは？

VSCodeでデバッグを行う際の設定ファイルです。
.vscode/launch.jsonに保存され、複数のデバッグ構成を切り替えたり、同時起動（Compound）もできます。

2. 代表的なデバッグ構成例

(1) Dockerコンテナ内Djangoへのアタッチ

launch.json

{
  "name": "Docker Attach to Django",
  "type": "debugpy",
  "request": "attach",
  "connect": {
    "host": "localhost",
    "port": 5678
  },
  "pathMappings": [
    {
      "localRoot": "${workspaceFolder}",
      "remoteRoot": "${workspaceFolder}"
    }
  ]
}

各項目の意味

name: デバッグ構成の表示名
type: デバッガの種類（debugpy＝Python用）
request:
- launch: 新規起動
- attach: 既存プロセスに接続（Dockerでよく使う）
connect:
- host: 接続先ホスト（通常localhost）
- port: デバッグ用ポート（例: 5678）
pathMappings:
- ローカルとコンテナ内のパス対応

ポイント

Djangoをdebugpyで起動しておく必要あり

例:

  python -m debugpy --listen 0.0.0.0:5678 manage.py runserver 0.0.0.0:8000

Dockerのポートフォワード（-p 8000:8000 -p 5678:5678など）も忘れずに

(2) Chromeデバッグ（フロントエンド用）

launch.json

{
  "type": "chrome",
  "request": "launch",
  "name": "Django用のChromeデバッグ",
  "url": "http://localhost:8000/dashboard/",
  "webRoot": "${workspaceFolder}/dashboard/static/dashboard/js",
  "sourceMapPathOverrides": {
    "localhost:8000/static/dashboard/js/*": "${workspaceFolder}/dashboard/static/dashboard/js/*",
    "/static/dashboard/js/*": "${workspaceFolder}/dashboard/static/dashboard/js/*"
  },
  "sourceMaps": true,
  "disableNetworkCache": true
}

ポイント

デバッグ開始時に自動で指定URLをChromeで開く
JavaScriptのブレークポイントやソースマップ対応も可能
Djangoサーバーが起動していることが前提

(3) 複数デバッグ構成の同時起動（Compound）

launch.json

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Docker Attach to Django",
      "type": "debugpy",
      "request": "attach",
      "connect": {
        "host": "localhost",
        "port": 5678
      },
      "pathMappings": [
        {
          "localRoot": "${workspaceFolder}",
          "remoteRoot": "${workspaceFolder}"
        }
      ]
    },
    {
      "name": "Python: Current File with args",
      "type": "debugpy",
      "request": "launch",
      "program": "${file}",
      "console": "integratedTerminal",
      "args": "${input:commandLineArgs}",
      "justMyCode": true
    },
    {
      "type": "chrome",
      "request": "launch",
      "name": "Django用のChromeデバッグ",
      "url": "http://localhost:8000/dashboard/",
      "webRoot": "${workspaceFolder}/dashboard/static/dashboard/js",
      "sourceMapPathOverrides": {
        "localhost:8000/static/dashboard/js/*": "${workspaceFolder}/dashboard/static/dashboard/js/*",
        "/static/dashboard/js/*": "${workspaceFolder}/dashboard/static/dashboard/js/*"
      },
      "sourceMaps": true,
      "disableNetworkCache": true
    }
  ],
  "inputs": [
    {
        "id": "commandLineArgs",
        "description": "Command line arguments",
        // "default": "arg1 arg2",
        "type": "promptString"
    }
  ],
  "compounds": [
    {
      "name": "Django + Chrome同時デバッグ",
      "configurations": [
        "Docker Attach to Django",
        "Django用のChromeデバッグ"
      ]
    }
  ]
}

使い方
デバッグパネルで「Django + Chrome同時デバッグ」を選択し、F5で起動

3. よくある落とし穴・注意点

Djangoサーバーの起動タイミング
サーバーが起動していないとChromeでページが開けない
ポートフォワード
Dockerの-pオプションでホストとコンテナのポートを正しくつなぐ
Chromeデバッグは主にフロントエンド用
Pythonのデバッグはdebugpy、JS/CSSはChromeで
ネットワークの違い
localhostでつながらない場合はhost.docker.internalなども検討

4. まとめ

VSCodeのlaunch.jsonでDjango＋Docker＋Chromeデバッグが快適に！
複数構成（Compound）で同時デバッグも可能
サーバー起動・ポート設定・用途の違いに注意

5. 参考リンク

VSCode公式：launch.jsonの書き方
 debugpy公式
 VSCode Chrome Debugger拡張