【VSCode】【Flask】Pythonのデバッグ方法:基本操作から変数の値変更まで

概要

VSCodeを使用してPythonのデバッグを行ったので、その方法についてまとめた。
尚、デバッグを行ったのはFlaskフレームワークで作成したファイルになる。

拡張機能の導入、ブレークポイントの設置方法、処理の進め方や変数の値を書き換える方法について扱う。

 

前提

今回はflaskフレームワークを使用してWEBアプリを作成していたため、ブラウザで動作させながらデバッグを行った。

あわせて読みたい

概要 Pythonのflaskフレームワークを使用して、TODOリストを管理するWEBアプリを作成したのでまとめた。 flaskのGET/POSTの方法やセッション等の扱いについて、当アプリを作成しながら振り返ることが目的。 当記[…]

【Flask】TODOアプリ作成その1:ログイン機能の実装ガイド

 

準備

拡張機能のインストール

VSCodeにてデバッグを行うためには、Pythonの拡張機能をインストールする必要がある。

以下のように、拡張機能ボタンを押下して「Python」と検索する。

【VSCodeデバッグ】拡張機能を選択

 

以下のPythonの拡張機能が表示されるので、インストールする。
尚、【インストール】ボタンはどちらを押下してもOK。

【VSCodeデバッグ】Pythonの拡張機能

 

インストール完了。

【VSCodeデバッグ】Pythonの拡張機能インストール完了

 

デバッグの方法

デバッグしたいファイルを開く

今回はviews.pyのデバッグを行いたいため、該当のファイルを開いておく。

【VSCodeデバッグ】デバッグ対象ファイルをひらく

※注意

ファイルを開いていないと、以下のように「変数 $(file)を解決できません。エディターを開いてください。」と表示された。

【VSCodeデバッグ】デバッグ時、変数を解決できない

 

【実行とデバッグ】ボタンを押下

【VSCodeデバッグ】実行とデバッグを押下

以下が表示された場合、「現在アクティブなPythonファイルをデバッグする」を選択する。

【VSCodeデバッグ】アクティブファイルの実行を選択

 

views.pyがデバッグモードで起動された。

【VSCodeデバッグ】デバッグ実行

 

ブレークポイントの設置

行番号のをクリックするか、対象の行でF9を押すとブレークポイントを設置できる。

【VSCodeデバッグ】ブレークポイントの設置

 

ブレークポイントを設置した処理の呼び出し

views.pyの対象処理を呼び出すために、以下のブラウザ操作を行った。
・【登録】ボタンを押下

【VSCodeデバッグ】テスト実行のためブラウザ操作

 

処理が止まる

ブレークポイントを設置した行で止まり、デバッグパネルが表示される。

【VSCodeデバッグ】処理停止

 

デバッグパネルの使い方

以下のデバッグパネルの使い方について、簡単に説明する。

【VSCodeデバッグ】デバッグパネル

 

続行ボタン

【VSCodeデバッグ】続行ボタン

ブレークポイントで停止した処理を続行する。

以下のようにブレークポイントを複数設置している場合、次のブレークポイントまで処理をスキップする。
次のブレークポイントがない場合、最後まで処理をスキップする。

ブレークポイントの設置

ブレークポイント①

【VSCodeデバッグ】ブレークポイントの設置個所その1

 

ブレークポイント②

【VSCodeデバッグ】ブレークポイントの設置個所その2

 

実行

実行すると、まずブレークポイント①で止まる。

【VSCodeデバッグ】ブレークポイントの設置個所その1で止まる

 

続行ボタンを押下すると、ブレークポイント②まで処理をスキップする。

【VSCodeデバッグ】ブレークポイントの設置個所その2までスキップ

 

この状態で再度続行ボタンを押下すると、最後まで処理をスキップできる。

 

ステップオーバーボタン

【VSCodeデバッグ】ステップオーバーボタン

ブレークポイントで停止した箇所から一行ずつ処理を続行できる。
関数が呼ばれる場合、関数を即実行し次の行に移動する。

実行

ブレークポイントで止まる。

【VSCodeデバッグ】ブレークポイントで処理を止める

 

ステップオーバーボタンを押下すると、処理が一行進む。

【VSCodeデバッグ】ステップオーバーにより行がすすむ

 

ステップインボタン

【VSCodeデバッグ】ステップインボタン

関数が呼ばれる場合、関数の中へ移動する。

実行

ブレークポイントで止まる。

【VSCodeデバッグ】ステップイン確認のため、ブレークポイントで止める

 

ステップインボタンを押下すると、関数の中に移動する。

【VSCodeデバッグ】ステップインを押下する

 

ステップアウトボタン

【VSCodeデバッグ】ステップアウトボタン

止まっている箇所が関数内の場合、呼び出されている箇所へ移動する。

実行

関数内でステップアウトボタンを押下する。

【VSCodeデバッグ】ステップアウトボタン押下

 

呼び出し元へ移動する。

【VSCodeデバッグ】呼び出し元へ移動

 

再起動ボタン

【VSCodeデバッグ】再起動ボタン

実行途中の処理を中断し、再起動する。

 

停止ボタン

【VSCodeデバッグ】停止ボタン

実行中の処理を停止する。

 

変数の値を変更する方法

デバッグ中に変数の値を変更する場合、以下の手順で変更可能。

変数due_dateの値を書き換える

due_dateに値が入っている箇所でブレークポイントを設置

due_date変数には’2023-07-14’が格納されている。

【VSCodeデバッグ】変数の中身確認

 

デバッグコンソールを使用して値を書き換える

デバッグコンソールタブを開き、以下のようにdue_dateの値を書き換える。

【VSCodeデバッグ】変数の中身を書き換える

Enterを押すと、値の書き換えに成功する。

【VSCodeデバッグ】変数の中身書き換え成功

 

実行確認

【VSCodeデバッグ】変数の中身書き換え後に実行確認

想定通り、日付の不正な値チェックエラーとなった。

 

スポンサーリンク