追記：VS Codeの入門書をZennでリリースしました
ブログで扱ったVS Code関連の記事をまとめて、無料の電子書籍としてZennというプラットフォームでリリースしました。よければ、こちらも参考にしてみてください。
printデバッグから卒業したい！
プログラムを書いて問題があったとき必要なのがデバッグですね。私はいつも問題が起こったとき、問題ありそうなところで print(ほにゃらら)として、気になるものを一つずつ中身を確認していました。
デバッガという言葉は知っていて、何度か試したことはあるのですが、いちいちコマンドを打つのが大変で、次にデバッグが必要なときは既にデバッガの使い方を忘れてしまい、結局また1からprintデバッグをするという体たらくでした。
しかし、いい加減もうちょっとレベルアップしないといけないと思い立ったのと、VS Codeというエディタを使いこなすと結構楽にデバッグできるという噂を聞いたので、実際に試してみることにしました。結果、めちゃめちゃ良かったので、この喜びをおすそ分けするべく記事にしてみることにしました。
以下Macの環境でのPythonのデバッグの説明を例としてますが、基本的な考え方はWindowsや他の言語でも参考になるとは思います。
VS CodeでのPythonのデバッグ
VS Code自体のインストール方法や、拡張機能に関しては以下記事を参照下さい。
拡張機能に関しては、今回はPythonの拡張機能のみを追加して下さい。以下の画面の通り、拡張機能のメニューで「Python」で検索して、InstallとReloadをするだけです。
次に、適当なプログラムを書いて保存しておきます。今回は、以下のようないかにも入門書に出てきそうなコードを使います。
x = "hello world" print(x)
次に、下図の通り、VS Codeのデバッグメニューを開いて、Configurationのところで、Add Configuration... を選択してからPython: Current File（Integrated Terminal）を選択します。
Add Configuration... のところでは、以下のように選択肢が表示されるはずですが、もしここで、Python関連の設定が選択肢にない場合は、拡張機能が正しく追加されているか確認して下さい。
これにより、launch.jsonというファイルが、.vscodeというフォルダ以下に生成されます。このファイルは、デバッグを実行するときに実行されるプログラムの設定を記載した内容となっています。今回は特にいじらずこのままの内容でデバッグを行います。
デバッグに際して、ブレイクポイントを設定しましょう。2行目のprint(x)の左側をクリックするとすると、赤丸が表示されます。これがブレイクポイントです。詳細な説明は省きますが、プログラムで詳しく調べたい箇所に設定するのが一般的な使い方です。
デバッグを実行します。左上の緑の右矢印をクリックするか「F5」ボタンで実行できます。以下のようにデバッグが開始されます。
画面が小さく見づらいかもしれませんが、左の画面のVARIABLESという欄に、x: 'hello world'と表示されています。このようにデバッグ画面には、設定された変数の中身が全て自動的に表示されます。
今まで、問題が起こったら、気になる変数の中身をいちいちprintして表示して確認していた人は多いのではないのでしょうか？VS Codeでデバッグを行えばそのような苦痛からは解放されます！VS Code万歳！
実際に自分が書いたプログラムをデバッグしてみる
サンプルが簡単過ぎるので、次は過去に自分が作った画像処理のプログラムでデバッグを実行してみます。画像処理のプログラムといっても、画像のリサイズをするだけの簡単なものです。プログラムは以下となります。
OpenCVなどのライブラリを使用するので、予めPythonのライブラリ等の環境のセットアップが必要です。私は以下のようにpyenvやAnacondaを使って環境セットアップしています。
次に、VS Codeで使用するPythonを選択します。左下のPython xxx と記載されている箇所をクリックします（xxx の箇所は環境によって異なります）。
すると、以下のようにセットアップされているPython環境がずらっと表示されますので、適切な環境を選択しましょう。
また、今回使用するプログラムは、対象のファイルや、リサイズするサイズを引数として必要とするプログラムになっています。具体的には、以下のような形で実行しないと、プログラムのエラー処理ですぐ終了してしまいます。
$ python resize.py test.jpg 50 50
そのような場合はlaunch.jsonファイルを修正します。具体的には、以下のようにargsオプションを追加して保存します。
{ "name": "Python: Current File (Integrated Terminal)", "type": "python", "request": "launch", "program": "${file}", "console": "integratedTerminal" "args" : ["test.jpg", "50", "50"] },
プログラムの開始部分（param = sys.argv部分） にブレイクポイントを設定して、デバッグを先ほどと同様に実行します。argvの引数に先ほど設定した引数が入力されていることが確認できます。
続いて、デバッグメニューの下矢印（Step Into）を実行すると、1行ずつデバッグが進みます。
画面細かく見づらいですが、今回のような画像処理プログラムだと、例えばinput_imgといういかにも画像っぽい名前の変数が、どのような型で、どんなサイズなのかから、その生値まで、1つずつprintしなくても自動的に全て表示され、確認することが可能です。
これでprintデバッグから卒業できそうですね！
C++でのVS Codeのデバッグ
今回はPythonを例として取り上げましたが、他の言語でも基本的には同じです。ただし、実行する前にビルドが必要なC++のようなコンパイラ言語だと、一手間必要です。C++を使いこなすような人は、自分でできてしまいそうですが、参考になりそうなサイトをいくつか紹介します。
基本的には、最低限やることは以下2つで、Pythonと考え方は同じです。
- ターミナル等でデバッグオプションをつけてビルドする（ex:
$ g++ -g test.cpp） - launch.json の"program" オプションに生成された実行ファイルのパスを指定
C++のようなコンパイラ言語の場合は、いちいちターミナルでビルドするのも面倒です。その場合は、VS Codeでtask.jsonというファイルを設定することで、VS Code上でデバッグオプションをつけたビルドも可能となります。task.jsonの設定方法は、環境によって異なりますので上記の参考サイト等を参考に設定下さい。
まとめ
VS Codeでデバッグをする基本的な方法に関してまとめました。これでprintデバッグから卒業できた！と思います…デバッグに関しては、なかなか独学だと必要性を感じることが少なく、身につけ辛いですし。複雑なデバッグ方法だと、一度覚えても、肝心なときに忘れてしまっていたりして結局printデバッグに逆戻りしてしまったりします。
デバッグ方法は身につけると、バグの修正時だけでなく、通常の開発も効率化しレベルアップできると思います。また、デバッグの表示画面をみると、コンピュータの中でどのようなことが起こっているかが可視化されるのでプログラムへの理解も深まるのではないかなと感じました。
VS Codeを使うことで、簡単かつ効率的にデバッグを行うことができると思いますので、今までなかなかデバッグをできなかった人は一度試してみることをお勧めいたします。
参考リンク
