note7月

はじめてのデバッガー

実行中に止まってしまったり、思ったように動かない場合に原因を調べる強力なツールが Xcode にはたくさんあります
代表的なものは「デバッガー」と呼ばれる専門的なツールですが、ほかにも Xcode には気軽に試せる便利な機能が盛りだくさんです。
今回はそれらのツールとその使い方を紹介します。
トラブルの原因をスパッと見つけましょう。

毎月札幌でiOSアプリ作りをアシストするセミナーをやっています。1時間にわたるセミナーの全内容を、物理的に参加できない方のためにnote上で公開します。ぜひアプリ作りにチャレンジしてください。

おしらせ
iOSアプリ作りをアシストするセミナーは今後も月一回のペースで続ける予定です。
詳細は connpass.com の 札幌Swiftでご確認ください。そして機会があればぜひ参加してください。
アプリ作りやプログラミング教育に関連する話題は 札幌Swift のfacebookページで発信しています。

・画像クリックで拡大表示できます
・画像を拡大表示中は画像の左右をクリックで画像だけを順に表示できます


1-1 まずは Xcode でコードを実行

今回は実行中に利用可能な便利な機能を紹介します。
コード入力中のエラーなどはすべて解決し、実行してください。

実行は Product メニュー > Run(ショートカットは⌘R)またはランボタンです。

実行しなければデバグ機能は使えません。
実行時のプロジェクト画面はシミュレータでも実機でもほぼ同じです。

画像1

Xcode は多機能な開発ツールです。
同じ操作がメニューやボタンなど複数の方法で可能な場合がほとんどです。
ボタンなどのマウスオーバーでツールチップに概要を表示します。
Help > Xcode Help メニュー などを参考に、使いやすい方法を探ってください。

1-2 Xcode 画面デバグ関連の概要


1-2-1 デバグエリア

デフォルトでは Xcode で実行すると、エディタの下にデバグエリアを開く設定になっています。
デバグエリアの一番上に操作ボタンの並んだデバグバーがあります。
デバグエリアは左側の変数ビューと右側のコンソールにわかれています。

右下にそれぞれの表示・非表示ボタンがあります。
変数ビューのみ、コンソールのみにも切り替えることができます。

画像2

デバグエリアは必要により閉じることもできます。
View > Debug Area > Show/Hide Debug Area メニュー(ショートカットはシフト⌘Y)または、ツールバーの Hide or show the Debug area ボタンでも開閉できます。

1-2-2 デバグナビゲーター
ナビゲーターエリアにデバグナビゲーター(Debug Navigator)があります。(ショートカットは⌘7
通常は何も表示しませんが、実行中は4つのゲージを表示します。(実機で実行中は Energy や FPS それに iCloud などのゲージを表示する場合があります)
ナビゲーターエリアの開閉ショートカットは ⌘0 です。

画像3

デバグゲージはアプリがデバイスのリソースをどの程度消費しているかをリアルタイムにグラフ表示します。
デバグナビゲーターの各ゲージは1行のコンパクトな荒い表示ですが、クリックでエディタ領域に詳細を表示します。

Xcode のデバグ専用機能は、デバグエリアとデバグナビゲーターの二つが中心です。
コードを編集するエディタにもデバグ機能があります。

1-3 CPU ゲージ

実行中のアプリがどの程度CPUを使っているかをグラフ表示します。
Threadsはアプリの中で同時に動作しているスレッド別のグラフ表示です。
シンプルなアプリでも複数のスレッドが動いていることを確認できます。

画像4

1-4 Memory ゲージ

アプリが使っているメモリの合計をグラフ表示します。

なにかの操作でグラフがメモリ合計の増加を示していたら、メモリ管理の問題があるかもしれません。

画像5

1-5 Energy ゲージ

Energy ゲージは実機で実行している場合にのみ表示します、シミュレータでは表示しません。
バッテリー消費に直結するエネルギー消費量の概要を記録し表示します。
どのような操作でエネルギー消費が多いかを確認し対策する手がかりにできます。
さらに Time Profile などの詳細情報を Instruments を起動して解析するボタンがあります。

Instruments は Xcode に内蔵しているパフォーマンス解析ツールです。
非常に強力なツールです。活用にはある程度のスキルが必要ですが GUI で手軽に利用できるようになっています。ぜひチャレンジしてください。

画像6

1-6 Disk ゲージ

ファイルアクセスを読み込みと書き出し別にグラフ表示します。
開いているファイルの一覧もあります。

最適化する際の情報となります。

画像7

1-7 Network ゲージ

ネットワークアクセスを受信と送信別にグラフ表示します。

画像8

1-8 FPS ゲージ

アプリによっては画面のフレームレートを表示するゲージがあらわれます。
どのような操作をした場合にフレームレートが下がるかなど重要な情報が得られます。
画面は Game テンプレートアプリを実機で実行した場合です。

画像9

1-9 デバグバー

デバグバーにはデバッガーを操作するボタンが並んでいます。

画像10

Touch Bar を搭載している機種では実行中は Touch Bar でデバグバーに対応する操作ができます。(ボタン位置がデバグバーと異なるようです)

画像11

ブレイクポイントのディスエイブル/イネーブル切り替え
クリックで全ブレイクポイント無効(ディスエイブル)と有効(イネーブル)を切り替えます。
無効にするとブレイクポイントを一つも設定していないのと同じ状態で実行を続けます。

メニューは Debug > Deactivate Breakpoints / Activate Breakpoints (ショートカットは ⌘Y)です。


1-9-1 一時停止/継続ボタン

いつでも一時停止できます。
Debug > Pause メニュー(ショートカットは ⌃⌘Y)です。

一時停止中は Pause メニューアイテムは Continue に変わります。(ショートカットは ⌃⌘Y でかわりません)

1-9-2  ステップオーバーボタン
現在止まっている行を実行し次の行に進みます。
Debugメニュー > Step Over (ショートカットは F6)と同じです。

1-9-3 ステップイントゥボタン
関数やメソッドの行で止まっている時にその関数の中に入り先頭行で一時停止します。
Debugメニュー > Step Into (ショートカットは F7)と同じです。

1-9-4 ステップアウトボタン
関数やメソッドの中で止まっている場合に残りの処理を実行し、その関数を呼び出した行に戻りそのつぎの行で一時停止します。
Debugメニュー > Step Out (ショートカットは F8)と同じです。

1-9-5 ビュー階層表示ボタン
エディタにビュー階層を表示します。
実行中は一時停止します。
継続ボタンで実行を継続できます。継続するとビュー階層表示は消えます。

メニューは Debug > View Debugging > Capture View Hierarchy です。

1-9-6 メモリグラフ表示ボタン
エディタにメモリグラフを表示します。
実行中は一時停止します。
継続ボタンで実行を継続できます。継続するとメモリグラフ表示は消えます。


2-1 ビュー階層ツール

ビュー階層ツールでエディタエリアに表示中は一時停止状態です。このためシミュレータ/実機の操作はできません。
継続ボタンクリックで実行を再開できます。実行を再開するとビュー階層表示は消えます。

画面のビューをクリックするとインスペクタに詳細を表示します。
ナビゲーターエリアでもクリックできます。

画像12


2-1-1 トラックパッド操作:

三本指でドラッグすると3D表示を回転させます。
ピンチ操作で拡大縮小します。
二本指でドラッグすると上下左右に並行移動できます。

デバグバー上部のスライダーでビュー階層の間隔を調整したり、ビュー階層の表示階層を絞り込んだりできます。

画像13

インスペクタはオブジェクトインスペクタサイズインスペクタがあります。
選択したビューの詳細情報を表示します。

2-2 メモリグラフツール

メモリグラフツールでオブジェクトの参照関係をグラフで確認できます。(上級者向けツールです)
各オブジェクトとそれらを結ぶ矢印をクリックすると、インスペクタエリアに詳細が表示されます。
グラフの表示倍率により、詳細情報が表示されます。

画像14

画像15

グラフを拡大するとメモリの参照に使われているプロパティ名などを表示します。

2-3 エラーとバグ

デバッガーを使って問題を探すのは実行中です。
実行前のコンパイルエラーにはデバッガーは使いません。

2-4 デバッガーはむずかしい?

たしかに簡単ではありません。
初心者にとってのデバッガーの難しさは、現代のコンピュータの複雑さと専門用語の多さにあると思います。
使って、慣れて、確認して少しずつでも使いこなしていきましょう。

専門用語はオンラインの辞書などを活用してください。
ウィキペディアよりも簡潔な説明のものが多いです。

2-5 デバッガーで追及できる問題

デバッガーを使って原因を追及できる問題はいくつかに分類できます。

2-5-1 実行中に発生するエラー
突然エラーで停止したり、画面が乱れたりする場合。
表示されたログや、停止したコードから原因を追及します。

2-5-2 思ったように動かない場合
特定の画面が真っ白(あるいは真っ黒)で何も表示しない場合や、ボタンをタップしても反応しない場合などで原因を調べる場合。
意図した部分のコードが実行されているかを確認できます。

2-5-3 性能を改善したい場合
処理に時間がかかりすぎるなど、性能を改善したい場合にもデバッガーは活躍します。
しかしこのセッションでは性能改善には触れません。
ボトルネックの調査などにはパフォーマンス解析ツールを使って詳細を追求します。パフォーマンス解析ツールを使う場合にもデバッガー関連の知識が生きます。

2-4 エディタに行番号を表示する

Xcode でエディタに行番号を表示する設定は Xcode > Preferences... メニューの Text Editing にあります。
コンソールに問題発生箇所の行番号を示す場合があります。エディタ画面にも行番号は表示して使うのが便利です。
行番号を表示していない場合は Editing タブの Show: Line numbers をチェック状態にしてください。

画像16

2-6 16進表示

デバッガーではアドレスなどで16進表示が多く使われています。
16進数に馴染みのない人向けに説明します。

2-6-1 16進数
英語ではhexadecimalでヘキサと略されます。
10進数では10で桁が上がりますが、16進数では16で桁が上がります。
0から9は通常の数字を使い、10から15はAからFを使います。(小文字のaからfを使う場合もあります)

コンピュータでは4bitが16進数の一桁に対応するので頻繁に使われます。
8bitで2桁、16ビットで4桁、32ビットで8桁、64ビットで16桁になります。

Swiftでは 0xに続けて書いた数字とaからfまたはAからFは16進数表記として扱われます。

macOS の計算機アプリは「プログラマ」表示(ショートカットは⌘3)で8進数・10進数・16進数で入力と表示ができます。
数値キーもA~Fが追加になります。
16進数で入力し、10進数に切り替えると入力した値を10進数に変換して表示します。
対応する文字コードも表示します。下の画面は0x3042に対応したUnicode 「あ」を表示しているところ。
0x3042 は2進数で 0011_0000_0100_0010 であることも表示しています。

画像17

計算機アプリはプログラミングツールとしても重宝します。ぜひ使ってください。


3-1 ブレイクポイント

デバッガーには指定場所で実行を一時停止させる機能があります。

Xcode のエディタで実行を一時停止したい行の行番号部分をクリックするとブレイクポイントを追加します。
(62行にブレイクポイントを設定した画面)

画像18

ブレイクポイントで止まったら、その行の直前まで実行されていることを確認できます
これはとても重要です。
思ったように動かない場合、想定したコードが実行されない場合が少なくないのです。

ブレイクポイントでは一時停止しているだけです。
実行を継続することができます。
一時停止中に変数の内容などを確認することもできます。
どこから呼ばれてきたかを確認することもできます。

ブレイクポイントの情報はデバッガに設定します。完成したアプリは影響を受けません。

3-2 ブレイクポイントの設定と解除

Xcode のエディタで行番号部分をクリックするとその行にブレイクポイントを追加します。

ブレイクポイントは上下にドラッグで移動できます。

ブレクポイントを行番号部分以外へドラッグしはなすと削除できます。
削除はコンテキストメニューでもできます。

ブレイクポイントをクリックすると消さずに無効にできます
無効のブレイクポイントをクリックすると有効になります

画像19

上の画面で62行は有効なブレイクポイント、64行は無効にした状態。

続きをみるには

残り 6,087字 / 7画像
この記事のみ ¥ 500
期間限定 PayPay支払いすると抽選でお得に!

今後も記事を増やすつもりです。 サポートしていただけると大変はげみになります。