Xcode 11でのデバッグ

(音楽)

Debugging in Xcode 11へようこそ Xcodeチームのクリス･マイルズです 今回の内容は 盛りだくさんです まずは Device Conditionsと Environment Overridesを 紹介します

アプリケーションが 期待どおり動作しないと 報告を受けたことが あるでしょう 開発環境では その条件を 再現するのが困難です 例えば ネット接続条件です 現実のネット応答速度は 必ずしも― 理想的でないかもしれません 接続が制限された状況で ユーザがアプリケーションを使う場合 その条件を忠実に再現して デバッグする必要があります あるいは 屋外の高温条件下なら 使用できるリソースを 制限しなくてはなりません その条件下での動作を 知る必要があります リソースを食うようであれば 積極的に対応すべきでしょう 高温下でのリソース使用量を 減らすのです しかし 過熱状態を 忠実に再現して― デバッグと検証を行うには？ Device Conditionsの出番です Xcode 11ではデバイスの熱状態を 安全かつ確実に ３段階に上げられる機能があります fair　serious　criticalの３つです こうした条件下で アプリケーションの動作を確認し デバッグして 検証することができます 実際に熱くはならないので 手を温めるのには使えません

ネット接続条件も変えられます Xcodeから 直接デバイスで シミュレーションできます 長い待ち時間 低帯域幅 高パケットロス DNS遅延などです さまざまな条件で動作を確認し― デバッグすることができます iOS開発では すでにおなじみの Network Link Conditionerに似ています しかし現代の幅広い状況にも 対応しています Xcodeだけで操作可能です 後ほど お見せします

ユーザの操作によっても 条件は変わります ユーザが自分で調整できる 設定も多数あります 例えば ライトモードと ダークモードです iOS 13では ライトとダークの両方で― 快適に使えなくてはなりません

Dynamic Typeも 細かくカスタマイズできます ユーザは 表示サイズを 選択することができます アクセシビリティでは さらに大きくできます ですから 幅広い設定の下で デバッグをする必要があります

アクセシビリティの選択肢も多様です システムは多くが適応済みですが カスタムでも 動作を確認する必要があります 使える環境設定の組み合わせは 無数にあります わざわざ設定を変えて デバッグしますか？ 設定方法を覚えられますか？ Environment Overridesが 役に立ちます あらゆる設定をXcodeから直接― 簡単に 変更できます

ここまで簡単に説明しました ぜひ 実際の操作を見てください

Travel Projectという アプリケーションです 旅行の行き先を探し 計画や記録ができます 別のセッションでも見たでしょう 美しい3Dの地球が描画されています 旅行先を示すピンも表示されます 熱に強くするため デバイスの熱状態を見るコードを追加 高温の時は リソース使用量を 減らしましょう その方法を見せます GlobeSceneControllerは― 3Dシーンを制御するファイルです イニシャライザに 熱状態を見る オブザーバを追加しました 状態に変化があれば呼び出されます configureSceneFeaturesを通して 呼び出します この関数を見ると ２つのパラメータがあります アンチエイリアスとフレームレートです 呼び出すと熱状態をフェッチします デバイスの状態が criticalの時は リソース使用量を 減らすことが推奨されます デバイスを冷ますためです この場合 アンチエイリアスをオフにして フレームレートも減らします 熱状態が seriousの場合は アンチエイリアスを切り フレームレートは変えません それより温度が低い時は何もしません ここで一旦止めて 再実行します デバイスの画面をQuickTimeで ミラーリングします 熱状態を criticalにして 問題があればデバッグします Device Conditionsを使います その前に デバイスの状態を見たいので デバッグナビゲータに切り替え Energy Impactを選びます このゲージは消費電力を示しています 右上は コンポーネントの使用率です やはり 操作中は GPUが主なコンポーネントです 見てほしいのは中央です Xcode 11の新機能 Thermal Stateトラックです 示す情報は２つです 上は アクティブな Device Conditionsの有無です 下は 現在のデバイスの熱状態です 青色は 問題がないことを示します これは開いたままで メニューから“Devices”を開きます 上に移動させ― 下にスクロールすると Device ConditionsのUIがあります このデバイスで設定できる条件です ネット接続状態も詳細に設定できます “Thermal State”を選びます “Critical”を選んで “Start”を押します 注意してほしい点は― criticalになるまで しばらくかかります トラックを見ると Device Conditinsがアクティブです 少しすると 熱状態が criticalに変わります 右のデバイス本体を見ると 時刻の背景に色がついています これが Device Conditionsの ステータスバーです 3Dシーンを動かしてみると フレームレートの表示は 30fpsです 論理回路が正しく機能していますね アンチエイリアスも オフです もっと大きなデバイスなら よく分かります Device Conditionsでの 検証が済みました 停止方法は “Stop”ボタンを押す以外に― Xcodeとの接続を切るか Xcodeを終了します 自動的に Device Conditionsが停止します デバイスは通常の状態に戻ります もう１つの方法は デバイスのステータスバーを タップします すると 情報が表示されるので “Stop”を選べばオフにできます Devicesウインドウも閉じます トラックを見るとDevice Conditionsは 非アクティブです デバイスも元に戻り始めます fairなどの状態に戻ります (拍手) Device Conditionsの 使い方の実例でした 次は Environment Overridesです それでは これは停止して あるビューに切り替えます SwiftUIで書いたProfileViewです SwiftUIと 新しいプレビューは 私のお気に入りです さっそくプレビューを開始しましょう デバイスは不要なので閉じます

起動します デバッグしながら Environment Overridesを使います プレビューのデバッグをする時は 右下のLiveボタンをクリックします “Debug Preview”を選びます こうすることで― ライブモードになり デバッグとも連動します インタラクティブな状態です 下の方のデバッグバーを表示させると デバッグセッションが― アクティブだと確認できます さまざまなデバッグツール そして― Environment Overridesが使えます クリックするとUIが表示され 簡単にインターフェイスを変更できます ダークモードにしました ダークとライトを 何度でも切り替えられます お気づきでしょう ダークモードに切り替えると 説明の文字が見えません 見てみましょう カーソルの下が説明を表示する部分です ダークモードに対応しておらず 固定色になっています 色を“secondary”に変えます プレビューに反映されます デバッグセッションの実行中に Environment Overridesを使い 簡単に修正できました (拍手) 次は“Text”をオンにします スライダでDynamic Typeを設定できます 最小サイズから― 最大まであります アクセシビリティにも対応し 特大サイズまで拡大できます この部分だけ問題があります このサイズでは小さな枠に収まりません これも直しましょう 枠を表示しているのは ImageTextPillです 画像と文字を横並びにしています タイプサイズが大きすぎる時は 縦の配置に切り替えましょう そこで カスタムビュー AdaptingStackを作りました Option + クリックで開きます キャンバスは不要なので閉じます エディタの分割ウインドウを開きました AdaptingStackは HStackやVStackと同様に ViewBuilderクロージャを取得します sizeCategoryにバインドします サイズカテゴリが変更されると bodyが呼び出されます アクセシビリティの サイズに切り替われば― 縦並びにして 余白を調整します それ以外は横並びです やってみましょう “HStack”を“AdaptingStack”に 変えます

プレビューが更新され Environment Overridesを試せます 大きなサイズにすると 縦並びになりました (拍手) アクセシビリティの 設定の一覧がこれです 今日は全部を試せませんが ぜひ 皆さんのアプリケーションで― 試してみることをお勧めします 以上です

(拍手) では ここまでのおさらいです まず Device Conditionsの 説明をしました ネット接続条件や 熱状態を 設定することができます デバイス接続と関連づけられているので デバイスとの接続を切れば 自動的に終了します iOSのステータスバーで アクティブ状態が分かります タップすれば 詳細の確認や停止ができます Environment Overridesも便利です 多数の設定を即座に変更できます デバッグにのみ 適用され 他のプロセスには 影響しません システムの設定も一切 変えません 非常に便利な機能です デバイス シミュレータ プレビューに 適応しており あらゆるプラットフォームに有効です 設定の一部は異なることがあります この新機能を活用して さまざまな設定や環境でテストできます 優れたアプリケーションを 多くのユーザに届けてください ここからは ハンミンが Live Previewsの説明をします (拍手) ありがとう クリス こんにちは

Live Previewsは もうご存じでしょう テストには便利な機能です コード編集からプレビュー更新まで Xcodeはとても迅速です コードにバグが混入してしまうのは 避けられないので プレビューとデバッガの 連結を可能にしました

多数のデバッグツールが使えます バックトレースを確認できる デバッグナビゲータ

デバッグを停止するブレークポイント

プロセス管理ボタンのあるデバッグバー プロセスの状態を調べる変数ビュー

SwiftUIランタイムの問題も示します

これは 新たなカテゴリに属する問題で 主にAPIが― 正しく使用されないことに 関連しています

Xcodeが それを見つけてくれます 複数のフレームワークが関与しています SwiftUIは 新しいため このような問題はつきものです プロセスを停止させることは ありませんが 解決しておきたい重大なバグです このようなマークで注意を喚起します アクティビティビューアに 紫のアイコンが出て 問題ナビゲータに詳細が表示されます

あらゆる実行先での こうした問題を確認できます さっそくデモを見せます

製作中のプロジェクトです 静的プレビューが表示されます

データがフェッチされていれば 右に気温が示されます その前に表示されるスピナーは isLoadingというstate値で制御します

データがフェッチされていれば falseとなり スピナーは消えます シンプルですね

ライブにするには Playボタンを押します デバッガと連結するには Control + クリックで “Debug Preview”を選択 さて スピナーが消えないバグが あるそうです 注目していてください デバッグを開始します

今 Xcodeがこのファイルを 再コンパイルして 新たなプレビューを作ります デバッガは２カ所で連結されています まず デバッグナビゲータで探せます またはデバッグバーの プロセス管理ボタンです 進行中のデバッグがあります キャンバスでは やはり スピナーが消えません 直しましょう エディタに新たな ランタイムの問題が表示されています クリックするとメッセージが出ます “更新中に状態を変更しており―” “未定義の動作の原因となります” 分かりやすく説明すると―

bodyプロパティはビュー階層を返します ビューの更新が必要な時 bodyが呼び出されます いつ 何回呼び出されるかは 制御できません ですから state値の変更は 何の脈絡もなく決定されます 幸い isLoadingの場所は変えられます WeatherFetcherの コールバックがある―

47行目にします この部分をまとめて―

47行目に移します Xcodeはコードの変更を認識し 自動的にプレビューを更新します スピナーに注目していてください

スピナーがあります データがフェッチされ… ちょっとお待ちください データがフェッチされ― スピナーが消えました バグは解決です (拍手) デバッグをやめるには 最初に戻り― Stopボタンを押します

さて またバグを指摘されました 今度は別のビューのバグです

これです

説明しながら デバッグセッションを開始します

上にヘッダがあります 下にスライドすると少し大きくなります 見やすくするためです それでは進めましょう

大きくなりますが― 急に消えてしまいます これが指摘されたバグです アクティビティビューアに 紫のアイコンが出ました

クリックすると 問題ナビゲータにこうあります “特異行列を反転できない” 私たちには意味は分かりますが そうでない人には― 線形代数の授業が必要でしょう

数学博士がガッツポーズしてますね まあ ごく簡単に説明すると― 行列の反転とは割り算の一種です 割り算は分かりますね それが不可能な値があるようです 理由は後ほど分かりますが まず見てほしいのは― 問題ナビゲータの もう１つのデータです デバッガが生成したバックトレースです 開くと バックトレースが見られます シンボルとともにフレームが 表示されます 選択すると問題の発生している― 行を教えてくれます しかし今 重要なのは 場所ではありません そのため デバッガを停止して― プロセスの状態を調べます これから使うツールは ご存じでしょう ブレークポイントです 44行目にブレークポイントを入れます

しかし―

何度もスライド操作するのは 非効率的です それはしません ブレークポイントナビゲータに行き

Addボタンを押します

新たに導入された Runtime Issue Breakpointを追加します System Frameworksが残ります ここで 生産性を高める技を紹介します いい機能があります プレビューを中断して再開する時― エディタメニューにある “Refresh”が便利です やってみます

新たにプレビューが表示されました プレビューの設定は記憶されており 新たなプレビューでも デバッガが連結されています スライドすると ブレークポイントにヒットしました 変数ビューが開きます scaleTransformに問題があるので マトリクスを見てみましょう

M11は X-スケーリングに 用いている値です これはそのままにします

M22はY-スケーリングに用いる数値で この値が０になると 逆数を得る数式が無効になります

さて 問題が発生した理由が分かりました コードを確認して ０となる値を割り当てた場所を探します この行ですね　直しましょう コードを簡潔にします

おっと

いいですね　デバッグエリアを閉じます では やってみます

大きくなって 固定されました ２つ目のバグも解決です デモも終わりです (拍手)

さて

プレビューを使う場合 通常のデバッグとは― 異なる点が３つあります 第一に― デバッグを開始するには Playボタンから― コンテキストメニューを使います 停止も同じボタンです

Xcodeは自動的に コードの変更を認識して 新たなプレビューを起動し 反映させます この時 デバッガを使っていると 新たなセッションが開始されます デバッグセッションとファイルの関連を 維持する必要があります 別のファイルは 別のペーンやタブで 見てください 後ほど セバスチャンが説明します

さて Live Previewsで デバッグすれば― 優れたツールが使えます もっと生産性を上げるには ワークフローを活用します ランタイムの問題に 注意を向けてください 本当のバグが分かるからです そして ブレークポイントを 活用してください 時として デバッグを 視覚的に行う必要があります セバスチャンの登場です (拍手) ありがとう

SwiftUIのビュー階層の デバッグをします その前に SwiftUIの いくつかの特徴と― 従来のフレームワークとの 違いを説明します その影響を見てみましょう まず SwiftUIは宣言型APIを使用します 実行時に提示されるビューを 初期化しません 提示したビュー階層を フレームワークが構築し 更新し続けるのです SwiftUIは コンポジションや 軽量の修飾子を採用し 実行時に検査すべきプロパティが 減少しました

SwiftUIのビューは値型なので 参照に依存するデバッグは 適用できません 実行時には 使用する特定のビューを― UIKitや AppKitのビューに転換します 後ほどデモで見せます

SwiftUIは UIKitやAppKitの ビューとも併用できます 先ほどの旅行アプリケーションも UIKitのビューが混在しています それがメインビューに なっています

今の話を念頭において ビュー階層の検査について デモをします (拍手) ありがとう ProfileViewのデバッグをします インスペクタのサイズを調整します

ビュー階層を調べるには デバッグバーの― このボタンを押します デバッグ中は プレビューを 開いたままにします セッションと連結しているからです エディタ分割機能が有用です ビュー階層ボタンを Option + クリックします 別のエディタでキャンバスが開きます 左上にソースコード　左下にプレビュー 右にキャンバスが見えます (拍手) ありがとう

慣れている人もいるでしょう ビュー全体を見られる キャンバスエリアです 回転すると3Dで階層がよく分かります エレメントを選択して プロパティが見られます 左のナビゲータにも 階層が表示されるので 位置関係が分かります

このビューは UIKitと SwiftUIを組み合わせています 詳しく見るとbodyの一部として― VStackを返しています AvatarViewControllerViewは Storyboardファイルから UIViewControllerをロードします その下がListです つまり 上部はUIKitを用い 下部はSwiftUIを用いているのです

前半では UIKitに焦点を当て 後半で SwiftUIを見ます

Xcode 11はUIWindowScene対応です iOS 13のマルチウインドウに 使用するものです UIWindowSceneの下に― すべてのUIWindowがありますね マルチウインドウの管理には とても便利です ナビゲータから選べば プロパティを見られます インスペクタで タイトルや 状態を確認できます

iOS 13にはダークモードもあります そのため ビューデバッガを 強化する方法が― いくつかあります まず UIViewや UIViewControllerを選択すると インスペクタに特徴が表示されます インターフェイスを しっかり確認できます 階層の一部のスタイルを変更する場合 ビューデバッガからデバッグできます

ダークモードの大きな特徴は 動的なカラーです アセットカタログや 名前付きカラーを使います バッジを選択すると このオレンジ色は― 名前付きカラーだと分かります つまり その色が動的か判断できます 変化に応じる色なのか 適応しない固定色なのか確認できます もう１つの新機能はシンボルです このバッジもそうです インスペクタの上部に シンボルの詳細があります 選択した画像の名前を表示 自分で作成した カスタムシンボルなどではなく システムシンボルだと分かります (拍手) シンボルは文字と並べても きれいにレイアウトされます 右のビューでベースラインが見られます 文字との配置を最適にするには UIKitではAuto Layoutの制約を使用 ベースライン制約を用いるようにします 名前が長くなり 一行に入らない時は 最初の行にバッジを配置したいです これは簡単に確認できます サイズインスペクタに切り替え 制約の詳細を見ます Xcode 11では Interface Builderに より近づき マウスを当てると 制約がハイライトされます このナビゲータで特定のエッジを見ると バッジは隣のラベルに対し firstBaselineを使用しています これで問題ありません とても簡単に確認できました UIKitで強化した点を紹介しました 次は SwiftUIです

今 見ているのは ProfileViewのプレビューです ナビゲータを見ると “ProfileView”はここです キャンバスでサイズが分かります

Vertical Stackを 使っていることも分かり 選択すると詳細が表示されます ProfileViewに戻してみると インスペクタに 多数のプロパティが現れます リフレクションを用いて 自動で収集しています カスタムビューでも プロパティが自動で出ます 以前はシステムビューだけでしたが 改善されました さらに インスペクタの表示を カスタマイズできます それには CustomReflectableを 実装します ProfileViewでもそうしています ３つのプロパティを返しています “Account Status”“Last Login” “Profile”です インスペクタを見ると その３つが確かにあります デバッグ時に必要な データを返せる― 実に強力な機能なのです (拍手) もう一度インスペクタを見ると 今 選択されているビューの プロパティがあり その下に 有効な修飾子が 表示されています 余白やセーフエリアなどの 詳細があります

ビュー階層の別の部分を見ると 下部にはビューのレイアウトに Listを用いています 例えば この“965”という テキストを選択して “Reveal in Debug Navigator”を 使うと― ビュー階層内の位置が よく分かります SwiftUIが ListをUITableViewに 変換しています 構築したSwiftUIビューに セルを使っています 実装の方法としては 参考になりませんが レイアウトの問題などを デバッグする際に有用です

このテキストについて 問題が指摘されています 中央揃えではなく ベースラインで― 揃えるべきところです すでに見たように Horizontal Stackで― 横並びに配置しています 実装を見ると HStackは何のパラメータも イニシャライザに渡していません インスペクタを見ると デフォルトは― 中央揃えです ベースライン揃えにしたいのです コードを修正して直しましょう ビューデバッガを閉じ セッションは継続して プレビューを開きます

HStackにパラメータを追加します “.firstTextBaseline”です ２つのラベルが ベースライン揃えに― 直っているのが分かります (拍手) 見てもらったとおり― HStackのアラインメントの修正も Xcode 11のプレビューで 簡単に確認できます スライドに戻ります SwiftUIのビュー階層を調べたい時― ナビゲータとキャンバスに ビュー階層が出現 インスペクタに プロパティと修飾子が出ます プロパティは自動的に収集され 表示内容をカスタマイズできます CustomReflectableを使用します 混在するビュー階層にも 対応しています UIKitとSwiftUIの混在を お見せしました

UIKitのビューも強化しました UIWindowSceneに対応したので マルチウインドウを簡単に導入できます インスペクタも改良され― さらに多くの情報が見られます 名前付き画像や― シンボルの情報を見ました ダークモードで便利な 名前付きカラーもあります 制約の詳細も大幅に改善しました UIKitアプリケーションの デバッグが強化されました

デバイスの条件に興味があれば このセッションを勧めます LLDBについて知りたい方は 優れた動画もご覧ください それでは このセッションを終わります 引き続きWWDCをお楽しみください (拍手)