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の書き方](https://code.visualstudio.com/docs/editor/debugging)
[debugpy公式](https://github.com/microsoft/debugpy)
[VSCode Chrome Debugger拡張](http://marketplace.visualstudio.com/items?itemName=msjsdiag.debugger-for-chrome)