【VSCode】Django のデバッグ環境の構築手順

このページにはプロモーションが含まれています

このページでは、VSCode（Visual Studio Code）で Django のデバッグ環境の構築手順を解説していきます。

デバッグ環境を構築することで、Django で開発したウェブアプリをステップ実行させることができるようになります。

例えばですが、開発したウェブアプリにアクセスされた際に views.py に記述した処理を１行ずつ停止させながら実行するようなことも可能になります。

左側のウィンドウで停止した時点の変数の中身を確認しながら１行ずつ動作確認できるので、開発したアプリがうまく動作しない際に、その原因調査を楽に行うことができるようになります！

MEMO

このページの解説内容は、下記の環境で動作確認をした結果をまとめたものになります

MacOSX（macOS BigSur）
Python3.10
Django4.02
VSCode1.64.1（日本語化済み）

ただ、VSCode を日本語化済みであることを前提に解説していきますので、VSCode を日本語化されていない方は事前に日本語化しておく or 解説を適宜英語に置き換えて読むようにしてください

Contents

Django のデバッグ環境の構築手順
拡張機能 Python をインストールする
プロジェクトを VSCode で開く
使用する Python の選択を行う
launch.json を作成する
ステップ実行を試してみる
Django 本体もステップ実行できるようにする
まとめ

Django のデバッグ環境の構築手順

最初に、VSCode で Django のデバッグ環境を構築する手順の流れをまとめておきます。

まず前提として、このページでは、下記に関しては準備済みのものとして解説を進めさせていただきます。

Python がインストール済み
Django がインストール済み
VSCode がインストール済み

これらの準備が完了しているのであれば、Django をステップ実行するために必要になる手順は下記となります。

拡張機能 Python をインストールする
プロジェクトを VSCode で開く
使用する Python を選択する
launch.json を作成する
ステップ実行を試してみる

簡単に各手順でやることを書いておくと、まず「拡張機能 Python をインストール」では、拡張機能をインストールすことでデバッガーの用意をします。このデバッガーを利用することで、Python スクリプトのステップ実行が可能となります。

次に「プロジェクトを VSCode で開く」で、デバッグしたい Django のプロジェクトを VSCode で開きます。

続いて「使用する Python を選択する」で、デバッグ時に Django をインストールしている Python が使用されるように設定します。

さらに「launch.json を作成する」で、デバッガーを利用して下記コマンドを実行できるように設定を行うためのファイルを作成します。

python manage.py runserver

最後に「ステップ実行を試してみる」で、実際にステップ実行を行う例を示します。

それなりに手順は多く感じるかもしれませんが、すでに Python のデバッグ環境を構築済みでステップ実行できるようになっているのであれば、一言でいうと下記を行うように launch.json を変更すれば良いだけになります。

デバッグ開始時に python manage.py runserver が実行されるようにする

要はこれだけなのですが、VSCode や VSCode でのデバッグ環境の構築に慣れていない方には上記の設定を行うのも大変だと思いますので、このページでは上記の５つの手順を１つ１つ詳しく解説していきたいと思います。

また、上記の５つの手順で Django をステップ実行できるようになるのですが、このページではプラスアルファで下記についても解説していきたいと思います。

Django 本体も含めてステップ実行できるように設定する

拡張機能 Python をインストールする

まず、Django で開発するウェブアプリは、基本的に Python スクリプトから構成されます。ですので、まずは Python をステップ実行するための環境を準備する必要があります。

この環境の準備は、拡張機能「Python」のインストールをするだけで行うことができます（すでに拡張機能「Python」をインストール済みの方は、次のプロジェクトを VSCode で開くまでスキップしてください）。

この拡張機能「Python」はデバッガーの機能を備えており、このデバッガーを利用して Python スクリプトを実行することで下記のようなことを行うことができます。

プログラムを途中（ブレークポイント）で停止させる
停止した時点の変数の中身を表示する
プログラムを１行ずつ停止させながら実行する（ステップ実行）

さらに、この拡張機能「Python」のインストールは、次の手順により行うことができます。

まず、VSCode を起動し、VSCode のウィンドウの左側にある「拡張機能」ボタンをクリックします。

クリックすると画面が遷移しますので、上部にある検索窓に「python」と入力します。

すると、検索結果として拡張機能「Python」が表示されますので（おそらく一番上に表示される）、その拡張機能の「インストール」ボタンをクリックします。

「インストール」ボタンをクリックすれば、拡張機能「Python」のインストールが始まります。下の図のように、元々「インストール」ボタンがあった箇所に歯車マークが表示されるようになれば、インストール完了です。

プロジェクトを VSCode で開く

続いて、Django のプロジェクトを VSCode で開いていきます。

プロジェクトを作成する

まだ Django のプロジェクトを作成していない方もおられるかと思いますので、プロジェクトを作成する手順についても解説しておきたいと思います。

今回は、Django 公式チュートリアルを真似させていただき、mysite というプロジェクトを作成していきたいと思います。さらに mysite の中に polls アプリを作成していきます。以降もプロジェクトが mysite で、アプリが polls である前提で解説を進めていきますので、この辺りはご自身のネーミングに合わせて適宜置き換えながら解説を読んでいっていただければと思います。

また、プロジェクトやアプリを既に作成済みという方は、プロジェクトを開くまでスキップしていただければと思います。

Django では、プロジェクトは django-admin コマンドにより作成することができます（コマンドは、ターミナル等から実行する必要があります）。

具体的には、下記コマンドを実行することで、mysite というプロジェクトを作成することができます。

django-admin startproject mysite

上記コマンドを実行したフォルダにプロジェクトが作成されることになりますので、予めプロジェクトを作成したいフォルダに移動してからコマンドを実行することをオススメします。

また、もし Django をインストール済みであるのにも関わらず、上記のコマンドを実行するとエラーが出てしまう場合、django-admin に PATH が通っていない可能性が高いです。

下記ページで対処法を紹介していますので、解決方法がわからない場合は参考にしてみてください。

【Python/Django】django-admin が実行できない場合の対処法（”コマンドが見つかりません”の対処法）

mysite というプロジェクトが作成できた場合、上記コマンドを実行したフォルダの中に mysite というフォルダが作成されているはずです。

アプリを作成する

プロジェクトを作成したので、ついでにアプリも作成しておきたいと思います。

まずは、先程作成した mysite フォルダの中に cd コマンドで移動します。

cd mysite

mysite のフォルダの中には manage.py という Python スクリプトファイルが存在するはずですので、ここで、この Python スクリプトを実行します。この時に、引数として startapp polls を指定します。

具体的には、下記のコマンドを実行します。これにより、polls というアプリが作成されることになります。

python manage.py startapp polls

python の部分は、ご自身でいつも Python スクリプトを実行しているときのコマンドに置き換えて実行してください（例えば python3.10 や python3 など）。

上記コマンドを実行することで、manage.py と同じ階層に polls というフォルダが作成されているはずです。

プロジェクトを開く

プロジェクト（ついでにアプリ）が作成できたので、次は作成したプロジェクトを VSCode で開いていきたいと思います。

VSCode を起動し、メニューバーの「ファイル」から「フォルダーを開く…」を選択します（Mac の場合は「開く…」でも OK なはず）。これによりファイルやフォルダを選択する画面が表示されますので、先程作成したプロジェクトのフォルダをクリックして選択してから「開く」ボタンをクリックします（アプリのフォルダでは無いので注意）。

すると、VSCode で選択したフォルダが開かれ、VSCode のウィンドウの左側に選択したフォルダ以下のファイルやフォルダが表示されるはずです。

この、上の図のオレンジ枠で囲んだ部分を「ワークスペース」と呼びます。このワークスペースに表示されているファイルは、ファイル名をクリックすることでファイルの中身を右側のウィンドウに表示することができ、そのウィンドウからファイルを編集することも可能です。

また、ステップ実行を行うためには後述で説明するブレークポイントの設定も必要であり、この設定もワークスペースからファイルを開いて設定していくことになります。

ちなみに、このワークスペースには、後からフォルダを追加したりすることもできます（今回は行いませんが）。

以上で、VSCode で Django のプロジェクトフォルダを開くことができたことになります。一度フォルダを開いておけば、ウィンドウを閉じた場合でも、次回以降はメニューバー「ファイル」の「最近使用した項目を開く」から再度フォルダを VSCode で開くことが可能です。

使用する Python の選択を行う

次は、VSCode で使用する Python の選択を行います。

PC 内に Python が複数インストールされている場合、どの Python を使用するのかを VSCode に指定する必要があります。また、今回は Django のデバッグ環境を構築するのですから、Django をインストールしているバージョンの Python を指定する必要があります。

まず、VSCode のウィンドウ下部のバーの左側を確認してください。おそらく、そこに 3.10.2 64-bit のように、あなたが PC にインストールしている Python のバージョンが表示されているはずです（Python のバージョンが表示される位置はウィンドウ下部のバーの左側とは限らないようです。実際私の環境でもいつの間にかバーの真ん中付近に表示されるようになっていました）。

以降で行うデバッグでは、Python スクリプトを実行する際に、ここに表示されているバージョンの Python が使用されることになります。

ですので、表示されているバージョンが、デバッグ時に使用したい Python ＆ Django がインストールされている Python のバージョンと一致する場合は、改めて Python のバージョンを選択し直す必要はありません。そのため、次の手順である launch.json を作成するまでスキップしていただいて問題ありません。

もし、Django がインストールされている Python のバージョンとは異なるものが表示されている場合、Python のバージョンが表示されている部分はボタンになっていますので、そのボタンをクリックしてください。

そうすると、下の図のように、PC にインストールされている Python のバージョンがリストアップされて選択肢として表示されると思います。この中から、VSCode で使用する Pythonを選択してください。

選択すれば、VSCode のウィンドウの左下に表示されている Python のバージョンが、選択したものに切り替わるはずです。これで、VSCode で使用する Python を変更できたことになります。

また、もし VSCode の左下に Python のバージョンが表示されていない場合、一旦 VSCode から manage.py などの .py ファイルを開いてから再度確認してみてください。

それでも表示されない場合は、コマンドパレットから Python のバージョンを選択する必要があります。

この際には、まず画面左下の歯車マーク（「管理」ボタン）をクリックし、表示されるメニューの中から「コマンドパレット」を選択します。

すると、下の図のような画面が表示されますので、上側の検索窓に >python select interpreter と入力します（> は最初から入力されているはずです）。

検索結果として、Python: インタープリターを選択 が表示されるはずですので、それをクリックしてください。

これにより、あなたの PC にインストールされている Python が選択肢として表示されますので、使用したい Python のバージョンを選択してください。

`launch.json` を作成する

ここから、いよいよ VSCode から Django で開発したウェブアプリをデバッグ・ステップ実行できるようにしていきます。

`launch.json` とは？

そのために、まずは launch.json というファイルを作成していきます。このファイルは、デバッグ時の設定を行うための設定ファイルになります。

Django を使ったことのある方ならご存知の方も多いと思うのですが、Django で開発したウェブアプリを動作させるためには、まず下記のコマンドで manage.py を実行し、ウェブサーバーを起動する必要があります。

python manage.py runserver

ウェブサーバー起動後は、起動中のウェブサーバーにウェブブラウザ等からアクセスすることで、ウェブアプリの動作確認を行うことができます。

VSCode 上でウェブアプリの動作確認を行う際にも、要はデバッグ開始時に上記のコマンドを実行してウェブサーバーを起動し、その後にウェブブラウザからアクセスして動作確認を行うことになります。

さらに、上記のコマンドを、拡張機能 Python をインストールするでインストールした拡張機能「Python」のデバッガーを介して実行するようにすることで、途中でアプリのプログラムを停止させたり、１行ずつプログラムを停止させながら動作させることができるようになります。

で、デバッグ開始時に上記のコマンドを拡張機能「Python」のデバッガーを介して実行するように設定を行うのが、これから作成していく launch.json になります。

なんだか難しそうに感じるかもしれませんが、自動的に上記のような設定を行なった launch.json を作成することができるので安心してください。

`launch.json` の作成手順

ということで、launch.json を作成していきたいと思います。

まず、VSCode のウィンドウの左側にある「実行とデバッグ」ボタンをクリックします。

クリックすると左側のウィンドウの画面が遷移しますので、その中の「launch.json ファイルを作成します」のリンクをクリックします。

すると、下の図のように選択肢が表示されますので、Python を選択します（この選択肢が表示されず、次に紹介する選択肢がいきなり表示されることもあります）。

Python 選択後、さらに下の図のように選択肢が表示されますので、ここで Django を選択します。

これにより、launch.json が作成され、右側に launch.json の中身が表示されます。この launch.json は、プロジェクトを VSCode で開くで開いたフォルダの直下の .vscode というフォルダの中に作成されます。

作成された `launch.json` の説明

作成された launch.json の中身は下記のようになっていると思います。

作成直後のlaunch.json

{
    // IntelliSense を使用して利用可能な属性を学べます。
    // 既存の属性の説明をホバーして表示します。
    // 詳細情報は次を確認してください: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Python: Django",
            "type": "python",
            "request": "launch",
            "program": "${workspaceFolder}/manage.py",
            "args": [
                "runserver"
            ],
            "django": true
        }
    ]
}

先ほど launch.json を作成する手順の中で Django を選択したため、Django 用にカスタマイズされた launch.json が作成されているはずです。

具体的には、作成された launch.json では、デバッグの開始さえすればデバッガーを介して下記のコマンドが実行され、自動的にウェブサーバーが起動するようにカスタマイズされています。

python manage.py runserver

ですので、launch.json は変更しなくても、Django で開発したウェブアプリのデバッグ・ステップ実行ができるようになっています（後でちょっとだけカスタマイズする例も紹介しますが）。

念の為、この launch.json について、要点のみ解説しておきます（"request" と "django" に関しては省略しています）。

`"configurations"`

まず、"configurations": [ 〜 ] に記述されているのは構成、簡単にいうとデバッグ時の設定です。この構成は複数定義することができ、構成の定義は { 〜 } 内に記述し、各構成は , によって区切られることになります。

`"name"`

そして、"name" は各構成を区別するための名前になります。上記では Python: Django という名前の構成を１つ定義していることになります。

例えば、下記のように launch.json を変更した場合は構成は２つあることになります。さらに、１つ目の構成の名前は Python: Django であり、２つ目の構成の名前は Python: Current File ということになります。

２つの構成を定義する例

{
    // IntelliSense を使用して利用可能な属性を学べます。
    // 既存の属性の説明をホバーして表示します。
    // 詳細情報は次を確認してください: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Python: Django",
            "type": "python",
            "request": "launch",
            "program": "${workspaceFolder}/manage.py",
            "args": [
                "runserver"
            ],
            "django": true
        },
        {
            "name": "Python: Current File",
            "type": "python",
            "request": "launch",
            "program": "${file}",
            "console": "integratedTerminal"
        }
    ]
}

構成を複数用意した場合、どの構成を用いてデバッグを行うのかを VSCode 上で指定する必要があります。

この指定は、「実行とデバッグ」ボタンを押して表示されるプルダウンメニューから行うことができます。

プルダウンメニューをクリックすれば、下の図のように用意された構成の名前が選択肢として表示されますので、使用したい構成をクリックすることで、デバッグ時に使用する構成（設定）を指定することができます。

`"type"`

"type" では、使用するデバッガーを指定します。

構成 Python: Django においては、"type": "python" が指定されており、この指定によりデバッグ開始時には拡張機能 Python をインストールするでインストールした拡張機能「Python」のデバッガーが使用されることになります。

そして、次で説明する "program" で指定されたファイルが、このデバッガーを介して Python スクリプトとして実行されることになります。

`"program"`

"program" では、デバッグを開始した時に実行する Python スクリプトのパスを指定します。

例えば、"program": "${file}" と指定した場合は、デバッグを開始したときに現在 VSCode で表示しているファイルが実行されるようになります。

構成 Python: Django においては、"program": "${workspaceFolder}/manage.py" が指定されていますが、${workspaceFolder} の部分は、デバッグを開始する際に自動的に「ワークスペースに開いているフォルダのパス」に置き換えられることになります。今回の場合は、プロジェクトを VSCode で開くで開いたフォルダのパス、つまり、Django のプロジェクトのフォルダのパスに置き換えられることになります。

さらに、${workspaceFolder}/manage.py と記述されているので、Django のプロジェクトのフォルダの直下にある manage.py が実行されるということになります。

このように "program" を設定しておくことで、イメージとしては、デバッグを開始すると下記のコマンドが実行されることになります（デバッガーを介して）。

python manage.py

`"args"`

ただし、この章の冒頭でも説明した通り、Django で開発したウェブアプリを動作させるためには、事前にウェブサーバーを起動させておく必要があり、ウェブサーバーを起動するためのコマンドは下記になります。

python manage.py runserver

つまり、引数に runserver の指定が必要です。

この引数を指定するのが "args" になります。

"args" には複数の引数を指定することができ、[ 〜 ] の中に , 区切りで指定します。

構成 Python: Django においては、"args" に下記のように１つの引数が指定されており、

argsの設定

"args": [
    "runserver"
],

デバッグを開始すると、runserver が引数として指定されて下記のコマンドがデバッガーを介して実行されることになります。

python manage.py runserver

デバッガーを介して上記コマンドが実行されることになりますので、ウェブアプリの動作確認時に好きな位置でプログラムを停止させたり、変数の中身を確認しながら一行ずつプログラムを進ませるようなこともできるようになっています。

こんな感じで、launch.json を作成するで作成した launch.json における構成 Python: Django は Django 用にカスタマイズされた状態で作成されていますので、変更しなくても Django のデバッグの設定として利用することができます。

ちなみに、launch.json を変更することで、毎回異なる引数を指定して manage.py を実行するようなことも可能です。これに関しては下記ページで解説していますので、引数に runserver 以外を指定した場合のデバッグも行いたいような場合は是非読んでみてください。

【VSCode】毎回異なるコマンドライン引数を指定してプログラムを実行する

ステップ実行を試してみる

ここまでの準備により、Django のデバッグ環境の構築が完了したことになります。

次は実際にデバッグを開始し、ステップ実行を実際に試してみましょう！

事前準備：スクリプトの変更を行う

今回は views.py にブレークポイントを設定し、そこからステップ実行を行なっていきたいと思います。

そのために、事前に mysite/urls.py と polls/views.py を変更したいと思います。

MEMO

すでに作成しているプロジェクトやアプリがある場合は、わざわざここから説明する変更を行う必要はありません

ただし、ブレークポイントを設定する際には、アプリ動作時に必ず通る位置にブレークポイントを設定するようにしてください（ブレークポイントの設定方法とは後述で解説します）

mysite/urls.py と polls/views.py は、VSCode から下の図に示す手順で開いて編集することができます。

今回は、とりあえずステップ実行だけ試せるよう、下記のように mysite/urls.py と polls/views.py を変更したいと思います。

mysite/urls.pyの変更

from django.contrib import admin
from django.urls import include, path
import polls.views

urlpatterns = [
    path('polls/', polls.views.index),
    path('admin/', admin.site.urls),
]

polls/views.pyの変更

from django.http import HttpResponse

def index(request):
    message = 'Hello Django!!'
    return HttpResponse(message)

ブレークポイントを設定する

続いてブレークポイントの設定を行います。ブレークポイントとは、デバッグ時にプログラムを停止させる位置です。

このブレークポイントを設定しておけば、プログラムが動作してブレークポイントの行の直前まで動作した際に、プログラムが自動的に停止するようになります。プログラムを停止させたら、そこから一行ずつステップ実行することができるようになります。

ブレークポイントは、プログラムを停止させたい行の行番号の左側をクリックすることで設定することができます。

今回は、polls/views.py の message = 'Hello Django!!' の行にブレークポイントを設定したいと思います。ということで、polls/views.py を開き、message = 'Hello Django!!' の行の行番号の左側をクリックしましょう！

クリックすれば、行番号の左側に赤丸が表示されるはずです。これで、この行にブレークポイントが設定されたことになります。再度赤丸をクリックすればブレークポイントを取り消すようなことも可能です。

デバッグを開始する

ブレークポイントの設定ができましたので、次はデバッグの開始を行い、ステップ実行を実践していきたいと思います。

まず、画面左側のウィンドウの「実行とデバッグ」ボタンを押し、さらに左側のウィンドウの上側にあるプルダウンメニューから、設定されている構成が Python: Django になっていることを確認します（launch.json で複数構成を作成している場合、このプルダウンメニューから構成の切り替えを行うことができます）。

次に、「デバッグの開始」ボタン（再生ボタン）を押します。すると、デバッグが開始されて python manage.py runserver が実行され、ウェブサーバーが起動することになります。

MEMO

もし、デバッグ開始後に下記の例外が発生した場合、使用している Python の選択が上手くできていない可能性が高いです

例外が発生しました: ImportError
Couldn't import Django. Are you sure it's installed and available on your PYTHONPATH environment variable? Did you forget to activate a virtual environment?

この例外は Django がインストールされていない場合に発生する例外ですので、使用する Python の選択を行うを参考にして、Django がインストールされている Python を選択するようにしてください

ステップ実行を行う

続いて、ウェブブラウザ（Google Chrome や Safari、Edge 等）を立ち上げ、アドレスバーに下記をコピペしてエンターキーを押します。

http://127.0.0.1:8000/polls/

すると、polls アプリが動作し、先ほど設定したブレークポイントの行でプログラムが停止することが確認できると思います。

ここからは、下の図で示すボタンを押してステップ実行等を行うことになります。

ステップ実行、つまりプログラムを一行ずつ進めていくためには、下の図で示す「ステップオーバーボタン」もしくは「ステップインボタン」を押します。

この２つのボタンには、プログラムを実行する行に関数やメソッドの呼び出しがある場合、その関数やメソッドの中にまで入り込んでステップ実行するかどうかの違いがあります。

ステップオーバーボタンの場合は、関数やメソッドの中にまで “入り込まずに” ステップ実行が行われます。つまり、ステップオーバーボタンを押した場合、単純に次の行まで処理が進むことになります。

ステップインボタンの場合は、関数やメソッドの中にまで “入り込んで” ステップ実行が行われますので、ステップインボタンを押した場合、呼び出した関数やメソッドの先頭まで処理が進むことになります。

今回は、ステップオーバーボタンを押してみましょう！押すと、プログラムが一行だけ進んで停止することが確認できると思います。

ここで注目していただきたいのが、画面左側にある「変数」ウィンドウです。このウィンドウでは、プログラムを停止している時点の変数の中身を確認することができます。

上の図を見れば、message: 'Hello Django!!' と表示されており、このことから変数 message の中身が 'Hello Django!!' であることが確認できます（この 'Hello Django!!' は、前の行で message に設定された文字列になります）。

こんな感じで、VSCode からデバッグを開始することで、好きな位置でプログラムを停止させ、その時点から一行ずつ変数の中身を確認しながら動作させることができます。

プログラムが上手く動作しない場合の原因調査に非常に便利ですので、どんどん活用していくことをオススメします。

さて、まだプログラムが停止中のままですので、今度はステップ実行を終了させたいと思います。

ステップ実行を終了させるには、２つの方法があります。１つはプログラム自体を終了させてしまう方法です。この場合は終了ボタンを押します。終了ボタンを押すことで、直ちに実行中のプログラムを終了させることができます。

また、もう１つの方法は、プログラムを通常通りに連続実行させる方法です。この場合は続行ボタンを押します。続行ボタンを押すと、そこからはプログラムが一行ずつ停止することなく、通常通りプログラムが動作するようになります。

もし、またブレークポイントが設定された行に通過する際には、再びプログラムが停止し、そこからまたステップ実行を再開するようなことも可能です。

とりあえず、今回は続行ボタンを押しましょう！すると、プログラムの通常実行が再開され、ちょっと時間が経つとウェブブラウザに下の図のような画面が表示されるはずです。

更新ボタンを押せば再度アプリを動作させることもできます。この時に、ブレークポイントを設定していれば再度その行でアプリを停止させることができます。

また、Django の場合は一度「デバッグの開始」ボタンを押すと、ずっとプログラムが起動中の状態になります（ウェブサーバーが待機している）。つまり、通常のプログラムと違って自動的にプログラムが終了してくれません。そのため、プログラムを終了させるためには必ず終了ボタンを押す必要があります。

ということで、プログラムを終了させるために終了ボタンを押しましょう！これでプログラムを終了させることができます。またデバッグを行う際には、再度「デバッグの開始」を押してやれば良いです。

ここまでが Django で開発したアプリのデバッグの一連の流れになると思いますし、ここまでのことが確認できれば、しっかり Django のデバッグ環境を構築できていると考えて良いと思います。

念の為、使用しなかったボタンについて解説しておきます。

ステップアウトボタンは、現在実行中の関数が終了するまでプログラムを進めるボタンになります。

また、再起動ボタンは、その名の通り、プログラムを再起動するボタンになります。Django の場合は一旦プログラム終了後、manage.py の最初の処理から再度実行が行われることになります。

Django 本体もステップ実行できるようにする

最後は、おまけです。

先程、ステップインボタンを押すと、関数やメソッドの中にまで入り込んでステップ実行できると解説しましたが、実は下の図の位置でプログラムが停止された状態でステップインボタンを押しても、HttpResponse() の中に入り込んでステップ実行することはできません。

その理由は、デフォルト設定では、ステップ実行はワークスペース内のファイルに対してしか行えないようになっているからです。

それに対し、HttpResponse() は Django の本体側で定義された関数（正確には HttpResponse クラスのコンストラクタ）であり、Django の本体のファイル群はもっと別の場所にあるので、ステップ実行できないようになっているのです。

もし、こういった Django の本体側で定義された関数まで含めてステップ実行したい場合は、launch.json で "justMyCode": false を指定してやる必要があります。

例えば作成された launch.json の説明で紹介した構成 Python: Django に対して "justMyCode": false を指定した場合、変更後の launch.json は下記のようになります。

Django本体側も含めてステップ実行

{
    // IntelliSense を使用して利用可能な属性を学べます。
    // 既存の属性の説明をホバーして表示します。
    // 詳細情報は次を確認してください: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Python: Django",
            "type": "python",
            "request": "launch",
            "program": "${workspaceFolder}/manage.py",
            "args": [
                "runserver"
            ],
            "django": true,
            "justMyCode": false,
        }
    ]
}

これにより、ワークスペース外のファイルも含めてステップ実行することができます。もちろん、Django 本体側で用意されている関数やメソッドも含めてステップ実行することができ、例えば HttpResponse() の呼び出しを行なっている行でステップインボタンを押せば、HttpResponse() の中に入り込んでステップ実行するようなことも可能です。