Python WebアプリをVSCodeでデバッグする

この記事では Windows環境において Python で作成した Webアプリケーションを VSCode上でデバッグする方法について解説しています。

VSCode上で Python をデバッグするには「Python Debugger」拡張機能を使用します。


## Python Debugger
「Python Debugger」拡張機能は「Python」拡張機能と一緒に自動的にインストールされます。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4063083/2cfa43bc-bed9-4606-b8c8-a4f89eaf2191.png" width=100%>



## スクリプトのデバッグ
Python スクリプトをデバッグ実行するには、スクリプトファイルを VSCode のエディターに表示し、エディターの実行ボタンの横にある下矢印を押して「Pythonデバッガー：Pythonファイルのデバッグ」を選択します。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4063083/98247c5e-3d45-4999-95d4-16dee4b86263.png" width=100%>



## Webアプリケーションのデバッグ
Webアプリケーションをデバッグする場合はデバッグ構成ファイルを作成します。

デバッグ構成ファイルは launch.json という名前で、プロジェクトフォルダ直下の .vscode フォルダに作成します。


### launch.jsonの新規作成
まだデバッグ構成を設定していない場合 launch.json ファイルは存在しません。
VSCodeでデバッグ構成を設定すると、自動的に launch.json ファイルが作成されます。

Django フレームワークを使ったWebアプリケーションのデバッグ構成は、次の手順で設定します。

1\. VSCodeでプロジェクトのフォルダを開き「実行とデバッグ」画面を開きます。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4063083/d4635a6d-4d74-477a-b5ba-5c752fc501f1.png" width=20%>

2\. 表示される「launch.json ファイルを作成します」をクリックします。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4063083/cfa58d52-3818-48e5-bdd0-d385ad736e6e.png" width=60%>

3\. 画面上部にデバッガーの種類が表示されるので「Python Debugger」を選択します。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4063083/f8e82fb0-6a0c-46c0-9bb6-eb7af3dee55e.png" width=90%>

4\. デバッグ構成の種類が表示されるので「Django」を選択します。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4063083/4c789f9d-3fb0-455f-860f-4a1b51f64b89.png" width=90%>

5\. Webアプリケーションを開始するファイル「manage.py」のパスを指定します。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4063083/b588da41-a6f1-4092-b6f1-a90b2f9e1fe4.png" width=90%>

6\. .vscode フォルダに launch.json ファイルが作成されます。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4063083/f3c4649a-6ec7-4a62-ace9-8f36e76bb142.png" width=100%>

この設定によって、DjangoアプリケーションをVSCode上で簡単にデバッグできるようになります。

### デバッグ構成の追加
launch.json ファイルが既に存在する場合は以下の手順でデバッグ構成を追加します。

1\. launch.json ファイルを VSCode のエディターに表示し、画面右下「構成の追加」をクリックします。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4063083/d6badc65-05c4-463b-9ab3-05e7a5a45bb2.png" width=100%>

2\. 画面上部にデバッガーの種類が表示されるので「Python デバッガー」を選択します。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4063083/ffeb4c0a-2011-4bb8-8d60-f8ff16d19b16.png" width=80%>

**launch.jsonの新規作成** の4.以降を実施し構成を追加します。

### デバッグ実行
実行とデバッグのドロップダウンリストにデバッグ構成の名前が表示されるので、デバッグ実行するものを選択します。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4063083/594986e3-28fc-4255-89f9-34ab1b534854.png" width=100%>

「デバッグの開始」ボタン使用してデバッグ実行を開始します。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4063083/73ea7ca8-2bb2-4672-99eb-7d7cd05bfcf6.png" width=40%>



## launch.json
launch.json の構成内容について解説します。
```json
{
    "name": "Python デバッガー: Django",
    "type": "debugpy",
    "request": "launch",
    "args": [
        "runserver"
    ],
    "django": true,
    "autoStartBrowser": false,
    "program": "${workspaceFolder}\\manage.py"
}
```
`name`
実行とデバッグのドロップダウンリストに表示されるデバッグ構成の名前になります。わかりやすい名前に変更できます。

`type`
使用するデバッガーの種類。Pythonをデバッグする場合 "debugpy" とします。

`request`
デバッグを開始するモード。
  ・launch : program に指定されたファイルをデバッガーで起動します。
  ・attach : すでに実行中のプロセスにデバッガーを接続します。
  
`args`
program に指定されたファイルに渡す引数を指定します。

`django`
"true" に設定すると Django Web フレームワーク固有のデバッグ機能が有効になります。

`autoStartBrowser`
Django または Flask アプリをデバッグするときにブラウザを自動的に開きます。
"true"の場合に有効となりデフォルトでは"false"になっています。

`program`
Pythonプログラムのエントリモジュール（スタートアップファイル）への完全修飾パスを指定します。${workspaceFolder} は VSCodeで利用できる変数の一つで、ワークスペースのルートディレクトリへのパスを示します。