対象読者
- Xcode開発🔰入門者🔰
- 「デバッグってなに?」「ブレークポイントっておいしいの？」な人
デバッグは、プログラムのミスを見つける作業のこと。
本稿では、Xcodeを使う際に効率的にデバッグする方法をお伝えします✌️
実務経験を積まれている方は「知ってる！」と思うので、読まなくて大丈夫です。
（記事のアラ探しお願いします🙏笑）
環境
今回載せている結果の実行環境を記載します。
| macOS Catalina | 10.15.5 |
| Xcode | 11.5 |
本稿を書いた理由
デバッグ方法を知っているのと知らないのでは、今後の開発パフォーマンス（主に開発時間）に大きく影響すると思うから。今回紹介するのは基本中の基本ですが、知らない方もいると思います。そういった方のお役に立てれば幸いです👌
内容
- ブレークポイント
- ウォッチポイント
- LLDBを使う
- Viewの重なりを見る
- まとめ
今回は、XcodeでiOSアプリを作成する場合を例に進めます。
「iOSアプリ？」「どう始めるの？」
という方は、次のように進めてみてください。
新規プロジェクト作成画面で、下のようにiOS、SingleViewAppを選択し、Next。プロジェクト名や保存場所はよしなにどうぞ。
そうしてできたアプリを動かす（実行する）には、画面左上の▶︎ボタン、またはcommand + Rキーを押下しましょう。
この時、iPhoneのシミュレータを選択しておきましょう。
下の画像ではiPhone SE (2nd generation)が選択されてますね。
＊今回はあくまでデバッグの仕方の説明です。以降、アプリの説明やコードの説明は省略させていただきます。
ブレークポイント
ブレークポイントを付けて実行することで、その行で処理を止めることができます。
下図のように、エディタの左の行番号をクリックすると、ブレークポイントができます。
もし、行番が表示されてなかったら、設定画面>TextEditingでShow:項目のLine numbersにチェックを入れましょう。設定画面はcommand + ,で開けます。
上のようにviewDidLoad()の中で、ブレークポイント前後にprint("〜")を記述してみましょう。
実行すると、下のようになります。ブレークポイントのある行で処理が止まります。ある行は実行されません。
指定した行で処理が止まり、**「変数の状態を見る」ことと「1行ずつ実行する」**ことができます。
下は、コードを足して21行目にブレークポイントを付けて実行した結果です。停止中にマウスのカーソルを変数i上に持っていくと、次のように中身を見ることができます（1から100まで足し合わせると5050らしい）。
停止状態から1行ずつ実行することができます。図中の黄色い線の上に何やらボタンがありますね。
左から1~5とすると、その機能は次のようになります。
- ブレークポイントの有効（色が濃い状態）・無効（色が薄い状態）を切り替える
- 実行を再開する
- 1行だけ実行する（ステップオーバーと言います）
- 関数の中に入る（ステップインと言います）
- 関数の外に出ます（ステップアウトと言います）
ちなみに無効状態は削除されたわけではありません。ブレークポイントを削除したい場合は、行番号の外にドラッグ＆ドロップしましょう。
ウォッチポイント
指定した変数の値が変化したタイミングで処理を止めることができます。この変数がウォッチポイントです。設定するにはブレークポイントを使って一度停止させます。
下図のここ！部分でウォッチポイントの設定を行います。ちなみにここ！部分はVariables Viewといい、停止位置以前で宣言されている変数の状態が確認できます。
Variables View内の変数を右クリックすると、下図のようにWatch "○○"があります。これでウォッチポイントが設定できます。その後実行を進めていて変数の値が変わった時、それを検知して実行が止まります（実行を停止するとウォッチポイントは消えます）。
LLDBを使う
LLDBとはデバッガのことで、上記で行ってきた操作は全て裏側でLLDBが動いています。ここでは、コマンドを使ってLLDBを（GUIでなく）直接操作してみましょう。
今回紹介するコマンドは1つ、poです。ぽ！
ブレークポイントで停止中のコンソール画面（下図ここ！部分。(lldb)とあるね。）にpoコマンドを入力して行います。
私、poはPrint Objectの略だよ、と聞きました。その通り、po ○○と入力することで、オブジェクトの内容を出力できます。
例えば、po iとすると、5050と出力されます。次の画像をみてください↓。
また、poコマンドを使うと、値を見るだけでなく値を書き換えることができるんです。
po i = 100とすることで、iの値を5050から100に書き換えることができていますね。このまま実行・ステップ実行して進めることで、書き換わった値のまま処理を進めることができます。
＊~~値の書き換えは、ブレークポイントで停止中に書き換えたい変数をダブルクリックすることで行えます。~~のはずだったのですが、私の環境で試したところ、できなくなっていました。値を書き換えて処理を進めたい方は、上記の方法を使ってみてください。
Viewの重なりを見る
Xcodeでレイアウトを作成する場合、画面を階層構造で表現します。土台のViewがあって、その上に子Viewを重ねていく、挿入していくイメージです。Xcodeでは、画面の重なりをひとめで確認できます。
上記の機能を確認するために、以下のような画面の構成を作りました。
画面の構成は、Viewという土台があって、その中にChild View Oneを重ね、その中にChild View Two、その中にChild View ThreeとChild Three Labelを重ねてます。重なりがわかるように画面中央に階層構造が表示されていますが、右側に表示される画面のレイアウトは2Dなので、わかりにくいと感じる方もいるでしょう（複雑な画面の構成になってくるとわかりにくくなります）。
この画面のViewの重なりを可視化しましょう。アプリを実行してください（今回はブレークポイントで止めなくて大丈夫です）。そしたら、Debug View Hierarchyボタンを押下しましょう。これは下のようにステップアウトボタンの右にあります。
アプリを実行した状態でこのボタンを押すと、Xcode上に下のようにアプリの画面が表示されます。この画面をマウスドラッグすることで、画面を見る視点の方向を変えることができます。これにより、階層構造が3Dに可視化できます。
まとめ
デバッグをするためのXcodeの便利機能を紹介しました。Xcodeに限った話ではなく、様々なエディタで同様のデバッガが実装されています。
デバッガを使う理由は、間違いを見つけるだけでなく、コードのわからない部分を理解することだと思います。初めて参加するプロジェクトや、誰かが書いたコードを確認する際にも大いに活躍します。ぜひご活用ください！
もし、間違っている部分や不適切な表現があれば、教えてください🙌