VSCode × Django × Docker × Chromeデバッグ完全ガイド

はじめに

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拡張