Webインスペクタの改善点

♪ (Webインスペクタの改善点) こんにちは パトリックです WebKit DXチーム のエンジニアです 今回ご紹介するのは Webインスペクタに 今年追加された 素晴らしい新機能や 改善点についてです Webインスペクタは macOSのSafariにあり Webデベロッパやデザイナーが使える WebページやApp検証のための 豊富なツールが各種 搭載されています Webページの あらゆるリソースや アクティビティを検証でき macOS, iOS, iPadOS及び tvOSでシームレスに使えます さて 今年の Webインスペクタの新機能として まずCSSグリッドの可視化 に使える新しいオーバーレイ 強化されたブレークポイント Webインスペクタでの 作者名や監査の編集を 行えるようになりました 新機能説明の前に 注意点があります Webインスペクタ 未経験の場合は まずこの機能を有効化します Safariの環境設定の 詳細タブで 「メニューバーに"開発" メニューを表示」をオンにします これで Webインスペクタを 開発メニューから 表示できます Webインスペクタ を有効化したら まずはグリッドオーバーレイ から見ていきましょう 最近のWebページのレイアウトは とても複雑だったりします CSSグリッドは 2次元のレイアウトシステムで デザイナーはコンテンツの レイアウトを簡単に行えます 非常にパワフルで 同時に 印刷物のデザインを したことがある人なら すぐに馴染めます 行や列の構造の定義は 柔軟かつ予測可能なレイアウト を実現できるよう グリッドに配置した 要素の置き場所によります グリッドはWebページの レイアウトに非常に便利ですが レイアウトが複雑になると 新たな疑問や混乱の数々を 引き起こしかねません 「何でこんな大きさの カラムになっているんだ？」 「何でここに青いボックス があるんだ？」などの疑問です 以前のWebインスペクタでは こうした疑問への 答えは当初 要素タブのスタイル サイドバーにありましたが 今年 独立した サイドバーに移動しました これで計算されたスタイル など他のパネルと共に 一致するCSSルールを 表示できます グリッドの作者スタイル を見ると レイアウト情報をある程度 探ることができます でもグリッドの作者スタイルからは 全ての情報は得られません Webインスペクタで もっと視覚的に こうした情報を理解できれば 便利ですよね 今ならそれができます DOMツリーの 要素を見ると クリック可能な新しい グリッドバッジが CSSグリッドの 各要素の横にあります 私たちのページの CSSグリッド2つのうち1つに バッジがあります この新しいバッジをクリックして Webページに戻ると 新しいグリッドオーバーレイが 既存コンテンツの上に表示されます これでグリッドインラインの レイアウトを可視化することができ 作者CSSを読みながら あれこれ計算して レイアウトを調整する 手間が省けます でも グリッドで 欲しい情報は これ以外にもありますよね グリッドエリアや行名 その他オプションなど その答えを得るために Webインスペクタに戻ります さて ここには もう1つの新機能 レイアウトパネルがあり グリッドオーバーレイ関連の オプションやコントロールが 全て表示されています まず ページ上のグリッド 一覧を見てみましょう このオプションからは 全グリッドオーバーレイを一度に オンオフすることができます または個別のグリッドの オーバーレイのオンオフができます 各グリッドは対応する CSSセレクターと一覧表示され リストから簡単に見つけられます 一覧表示された各グリッドの 横には色見本があり グリッドオーバーレイの色を インタラクティブに 変更でき グリッドオーバーレイを 有効化すると 各要素の バッジでこの色が 使われるようになります Webインスペクタは 同じページが次に読み込まれた時 各要素で使われた色を 記憶しています ではこうしたオーバーレイの 表示方法を 管理するオプション について見ていきます まずはトラックのサイズです これには各トラックの 作者サイズ つまりグリッドの 行や列が表示されます このように 分数単位やmin-content が一緒に使われています 次に 行数は 特定の行や列で 小要素の配置に使用される 値をグリッド内に 表示します ここでは マイナスの数を置きました これは最後に表示された グリッド線から 数えた行数です ラベル内にプラスの行数と 合わせて置きました アイテムの置き場所を 選択できるようにするためです 行名では別の方法で エリア名に基づくグリッドの 行や名付けられた行を 参照することができます エリア名からは 名付けられた各エリア を見られます これは子要素の 配置に便利です 置きたい場所の各側で 行を直接触る必要はありません エリア名を各エリアの 中央に配置し 各エリアの名称を 囲み表示しています 最後に 延長した グリッド線を 2番目のグリッドコンテナで オンにすると トラック線がページ端まで 延長されるようになり グリッド配置をページ上の 他の要素と 視覚的に比較できます オーバーレイはパフォーマンス を念頭に構築したので 好きなだけ有効化 することが可能で ページのスクロールも スムーズです 何十ものグリッドを 同時に表示できるのに スクロールがとても 滑らかになっています 元々Wikipedia由来の 縦書きテキストに 対応していて また 右から左読みや それらの組み合わせにも対応しています このオーバーレイは iOS 15 や iPadOS 15でも使えて MacのSafari 15または Safari Technology Previewの最新版から でリモート検証できます 私たちは グリッド線は Webでのツールレイアウトに 非常に重要だと考えており Webインスペクタに こうしたツールを加えることで デバッググリッドを 全プラットフォームで 可視化できるようにしたので これからも素晴らしい レイアウトを作れます では グリッドオーバーレイで Webページの問題の把握や 解決をよりスムーズに 行う方法を見ていきましょう これは現在私が作成中の Webページですが ここからは私が毎朝 確認したい情報を すばやく見られます 通勤情報や その日の天気予報 今夜は上着が 必要そうですね！ また 仕事帰りの 買い物リストも あります このページはCSSグリッドで レイアウトされ このように様々なサイズの タイルを簡単に作ったり ページに配置したりできます でも かつてダッシュボードで 使っていた楽しい絵文字を 置き忘れているようです 他の絵文字と一緒に ありますね！ 大丈夫です 新しいグリッドオーバーレイで 絵文字を好きな場所に 置くことができます ページの検証を始めるには 問題のある要素を 右クリックし 「要素の検証」を選択します 「要素の検証」が 見られない場合は 先程の説明通り Webインスペクタを 有効化してください 詳細サイドバーから レイアウトを選択します ここではページ上の全ての グリッドコンテキストを見られます どのグリッドで作業したいかを 思い出せなくても グリッドオーバーレイ 全てのトップチェックボックス にチェックを入れると 全オーバーレイを有効化できます これで作業したい グリッドコンテキストが ピンク色で 全タイルに 及ぶと分かりました グリッドコンテキスト一覧で チェックを外し その他2つのオーバーレイを 非表示にします これでいじりたいオーバーレイだけ 残るようになりました 皆さんも私と同じように 手元のタスク実行に必要な 情報だけを見たい 場合がありますよね そこで トラックサイズラベルを 非表示にし 見失った絵文字を置くための 行番号だけを 見られるようにします これで 残りの 行番号ラベルから どこに絵文字を置きたいかが はっきり分かります 6番目の列トラックと 4番目の行トラックです はっきりと 右クリックして 問題のある絵文字のタイルを 検証したので すでに選択されています また 修正を確認するための スタイル編集に直接飛べます さらに 新しくなった 3パネルレイアウトでは レイアウトパネルを 同時に表示できます ページで異なる スタイルをテストする際 今見せているラベルか グリッドオーバーレイを 切り替えたい場合に 便利です パネルを何度も切り替える 必要がなくなります スタイルパネルで スタイル属性セクションを クリックし 新しい プロパティやグリッドエリアを 追加します コロン「:」を入力すると 新しいプロパティ値 にジャンプします ここでは「4/6」つまり 行番号の4と列番号の6を 入力します これで 絵文字が思い通りの 場所に正しく配置されます しかしさらに 検討してみると この絵文字は常にここに 表示されるようにしたいのです 後でグリッドから行や列を 追加・削除してもです 行番号4そして 列番号6の値が 出ていたのと同じラベルに 2番目のライン番号「-3」が それぞれ表示されています 実際 このマイナスの 数字に従い 私が明確に定義した グリッドの端から 3本のトラック線で 絵文字がキープされ 私の期待通りの場所に 表示されます グリッドエリアのプロパティ値を この新しい値「-3/-3」と 更新します すると絵文字は正しい場所に 変わらず配置されていて 新しい行を追加したり グリッドから別の列を 加えても 同じ場所に ずっと配置されます Webインスペクタの この新しいオーバーレイで ページのレイアウト調整が すばやくでき 既存レイアウトの理解にも 役立つようになりました もちろん新規レイアウトの デザインも同様です では ブレークポイントでの Javascriptデバッグの 改善点について 見ていきます スクリプトが思い通りに 実行しない場合 私たちは よく console.logから その理由を探ろうとします でも ブレークポイントを やったことがなければ ぜひチェックしてみることを おすすめします パワフルであると同時に 今から見ていくように これまで以上に設定しやすく なっています ブレークポイントに不慣れなら ソースタブに移動し 実行を停止したい行の上で Javascriptの行のガターを クリックすると もっとも簡単に始めることが できます これでブレークポイントが 作成され この行に達すると スクリプトがこの行の 始めで停止され ここまでの実行を待機します 各ステートメント ごとに コードを確認したり 特定のステートメントを より深く掘り下げたり 各ステップで 変数の状態を 見たりできます しかしブレークポイントは それだけではありません 実際 それぞれの シナリオに合わせた 5種類の ブレークポイントがあります debuggerや exception assertionステートメント のブレークポイントや Javascriptの線上で 設定可能なJavascript ブレークポイント クリックやタイムアウト インターバルや アニメーションフレームなどの イベント発生に対応する イベントブレークポイント DOMノード関連の アクション発生時に停止する DOMブレークポイントです これらは要素タブや Webインスペクタにある ノードプレビューの コンテキストメニューから 追加できます そしてネットワークリクエストが URLに作成される時に XMLHttpRequestや FetchなどAPI経由で 停止するURL ブレークポイントです JavaScriptで ブレークポイントを 構成するには ブレークポイントを右クリックし を 選択します ここでブレークポイントを 様々な側面から管理できます では 各オプションを 見ていきましょう ブレークポイントがヒットされるには 値が真である という条件を設定できます 今年から Webインスペクタの コンソールタブのAPIを ブレークポイント条件や アクションの演算内で サポートしています このように要素タブで 現在選択されている DOMノードを参照する 場合などです 場合によって ブレークポイントのヒット前に ブレークポイントを 無視する回数として 条件式を定義した方が いい場合があります 指定した反復回数に 到達するまで 停止しないようにする ループ内にある時などです これはブレークポイントを 実行する条件への追加 またはその代替として 使うことができます 条件に追加して 使う時には 無視された起動回数は 条件が満たされた 場合のみ 増分されます 次に ブレークポイント ヒット時に発生した アクションを定義します JavaScriptを コンテキストで 変数アクセスつきで検証したり コードをJavasScriptソースの インラインのように表示したり 文字列リテラルのテンプレートで メッセージを簡単に コンソールにログしたり ブレークポイントヒットを 音声で知らせる ビープ音を出したり プローブ式を定義したりします これはソースタブの 詳細サイドバーにある プローブパネルで保存された 結果と評価され Webページのライフサイクルで 変化するのに伴い 式の結果を 確認できます 今年からは新しく JavaScriptの式を サポートする アクションタイプで ユーザージェスチャーの シミュレーションを設定できます 通常はユーザーによる起動を 必要とする JavaScript API操作で 便利です 例えばビデオの再生など Webページのソースに 変更を実装する前に 新しい動作をすぐに テストしたりできます こうしたアクションや アクションタイプを 複数組み合わせることで ブレークポイントを カスタマイズできます 最後に ログや 簡単なパッチテストを 追加したい場合 アクションの実行後や検証後に ブレークポイントを自動的に 続行させることができます 基盤となるWebページを 修正する必要はありません これらのブレークポイント 構成オプションは 非常に可変性が高く 嬉しいことに 今年から JavaScriptブレークポイント に限らず 全タイプのブレークポイント で利用可能です これでパワフルなブレークポイント 条件を設定できます ボタンなど特定の タイプの要素が クリックされた時だけ 停止したり 特定のURLで ネットワークリクエストが あった時にビープ音を出すなど あらゆるタイプのブレークポイント で利用できる 構成オプションは 優秀なデバッグツールを さらに優れたものにし ノイズの中から見分けたり 全体的なノイズを減らして 適切なタイミングに注力できます ではダッシュボード Webページに戻り 新ツールによって デバッグやパッチテストが どの程度簡単になったか 見ていきます 私の通勤時間の予測を 共有するため つい最近 通勤タイルに ボタンを追加しました いつ遅刻しそうになるかなど 分かりませんからね でも 共有ボタンを クリックしても 何も起こりません さらに このタイルをいじってから 数日たっているので このボタンの クリックイベントをどこから 操作するか忘れてしまいました でも イベントブレークポイント を使えば クリックイベントハンドラ で停止してコードを見つけられます ソースタブからイベント ブレークポイントを作成できます ナビゲーションサイドバー のブレークポイント セクション右上の「+」を クリックし イベントブレークポイント を選択すると 新しいイベントブレークポイントを 定義できます クリックするイベントを設定し Returnキーを押して 新しいブレークポイントを作ります これで新しいクリック ブレークポイントが ナビゲーションサイドバーに 一覧表示されていますね このイベントブレークポイントは ボタンを クリックすると停止します でもまず 最新の 通勤時間予測を 共有しようと していたのでしたね それで更新ボタンを押すと おっと！ イベントブレークポイントが 更新ボタンも含む 全てのクリックイベント で停止されます でも 共有ボタンを クリックした時だけ 停止したいのです そこで 今年追加された 新しい構成オプションを使って ブレークポイントを編集します 編集するにはブレークポイントを 右クリックし を 選択します すると このイベント ブレークポイントの構成オプション のポップオーバーが表示されます ここでは 必要な時だけ 停止させるための 条件を追加したいです この場合 Webインスペクタ コンソールAPI "$event”を使って 現在のイベントを取得し イベントターゲットが共有ボタンと 一致しているか確認します ここで ブレークポイントを 特定のボタンに合わせて ハードコードする代わりに 別のコンソールAPI を使います イベントのターゲットが 要素タブで現在 選択されているDOMノード に一致しているか "$0”で確認します 構成ポップオーバー の外をクリックすると 変更が全て自動的に 適用されました まだ更新ボタンの クリックから ブレークポイントを 停止中なので 続行ボタンを クリックして ページのスクリプト 実行を再開します 再度更新ボタンを クリックすると 通勤時間の更新と ブレークポイントがヒットしません でも共有ボタンを 右クリックして 要素の検証を選択して 選択された要素にし 共有ボタンをクリックすると 今度は成功です！ ブレークポイントが 希望通りに停止しました 共有ボタンが動かなかった 理由も分かりました この機能を書き忘れたのです ブレークポイントは本当に便利で ソースに戻って実装する前に 共有ボタンのパッチの 変更のテストができました 少なくともこのデモでは かなり時間を節約できました 共有機能にブレークポイント を加えるには 行のガター内でクリックし ブレークポイントインジケーター を右クリックして を選びます このブレークポイントに 条件は要りませんが アクションを追加したいと思います ここで必要なのは デフォルトのアクションタイプ です JavaScriptを アクションに追加します このアクションは データを使って 予め用意したオブジェクト this.shareData と合わせて navigator.style を呼び出します この修正テストで スクリプトを止める 必要はないので を オンにします 先程と同様 ポップオーバーの外を クリックして変更を保存します クリックイベントの ブレークポイントは済んでいるので インジケーターをクリックして 無効にし また続行ボタンも クリックして ページのスクリプト実行を 再開します これで 共有ボタンを クリックすると 共有メニューが 表示されるようになりました メモを選択し 共有データが 正しいか確認します 大丈夫そうなので ソースコードに戻り この変更を行えます 完璧ですね！ これらのブレークポイント の強化により ソースにconsole.log ステートメントを 使わなくても 解決策を見出して テストできるように なりました 解決策が機能することを 確認できたので ソースに修正を 加えるだけです では 監査用の新機能も 見ていきましょう これはWebインスペクタで 直接テストの作成や 編集を行う機能です 監査タブの各テストは JavaScriptで書かれ 調査対象のWebページ に対し実行されます これらのテストでは不正確な DOM構造のチェックや デザインシステム ルールの強化 アクセシビリティ属性欠如 などを確認できます 個々のテストに加えて テストグループの共有や 実行ができます Webインスペクタには デフォルトで2つの テストグループがあり 監査工程やサポートする 機能を表示する デモ監査と タイトルや代替テキストを 全ての画像要素に設定するなど ARIA仕様に基づく DOMアクセシビリティの ベストプラクティスの サブセットを チェックする アクセシビリティテストの セットです テストを実行するには 特定のテストを選択し 監査名横の 開始ボタンを使うか ナビゲーションサイドバーの 一番上にある 開始ボタンから 全てのテストを実行します テスト実行が完了したら 各テストの結果や 合格・不合格の 全体サマリーを 見られます 失敗がある場合 それについての情報を 見られるので パッチ修正に利用できます テストを共有するには または外部テキストエディタで 編集するには テストを書き出しし 生成されたJSONファイル に変更を加えて 編集済みテストをWeb インスペクタに読み込みます この書き出しと 読み込みのプロセスは チーム全体や コミュニティと テストを共有するのに便利です さらに今年 テストの作成や編集が 新しい編集モードで より簡単になります ナビゲーションサイドバー 一番下の編集ボタンを クリックすると 監査タブが 編集モードになり 新しいテストを作成する ことができるほか 既存のテストの 編集も行えます デフォルトのデモ監査や アクセシビリティテストは 削除や編集ができませんが 複製してそれを 編集することが できます では ナビゲーションサイドバーの Create Itemで 新しいテストの作成方法を 見ていきます 個々のテストケースや テストケースグループを作れます まず新しいテストケースの 作成についてです 新しいテストケースを作ると ナビゲーションサイドバーに それが追加され テストの デフォルトコンテンツが 編集可能な状態で表示されます ここでは色々なものを 構成できます テストの名前や テストの詳細 テストが対応する 最小の監査バージョン つまり非対応の機能が あるかも知れない 古いバージョンの Webインスペクタで 監査が実行されないように するものです セットアップスクリプトは JavaScriptで トップレベルのテストやテスト グループの前に実行されます これで このトップレベル テスト以下の全テスト が依存する共通のセットアップ 機能を実行できます そして最後に なりましたが テストそのものとして 真偽や結果オブジェクトを テストの詳細情報と 合わせて返す JavaScript機能があります 特別なWebInspectorAudit オブジェクトも利用可能で 特にテストそのものや テストの設定の両方で 使う追加APIを 表示します このAPIの 詳細については Webインスペクタ リファレンスで見られます 変更は自動的に 保存され これは書き出しなしで 全てWebインスペクタから できます しかしこれらテストの柔軟性を 理解してもらうため 実際の動作を お見せします 最後に私のダッシュボードに 戻って 監査によってアクセシビリティ 問題や Webページの デザイン問題が 検出されているか 見てみましょう 監査タブを開いて まずしたいのは デフォルトのアクセシビリティ テストケースの実行です 一般的なアクセシビリティ ベストプラクティス に照らしたベースライン の状況把握ができます これらのテストはテストグループ 横の実行ボタンをクリックすると すぐに実行できます 結果は悪くないですが 改善の余地がありそうです 合格フィルターをクリックして 該当結果を非表示にし 失敗したテストだけ 表示することができます これを直していきます このテストでは失敗した DOMノードの一覧が表示され マウスオーバーで出てくる 要素タブの表示を使うと そのノードに簡単に ジャンプできます 要素タブで画像への タイトル追加をテストするため DOMノードを 右クリックし 追加＞属性を選択して 新規タイトルを入力します

監査タブに戻り 再び同じテストグループを 実行します 今回は テストに全て合格しています 監査でもう1つ便利なのは Webページが自分の デザイン基準を満たしているか 確認できることです このプロジェクトでの 私のルールの1つは 全ての要素で 限定した フォントファミリーの セットを 一貫して使う ようにすることでした 今年Webインスペクタに 追加された 新しいAudit Edit Modeで やってみましょう まず ナビゲーションサイドバー 一番下の 編集ボタンをクリックして 編集を開始します これは編集モードです これでサイドバーの上の 作成ボタンを使って 新しいテストケースを 作れます テストケースの デフォルトオプションを維持し 「フォント」と名付けます テストケースの残りを これで編集できます まず説明を追加して このテストケースの目的を 思い出せるようにします 次に 準備しておいた 実際のテストコードを挿入します

テストには3つの 主なステップがあります まず予測されるフォント ファミリーの配列を作成します 次に予測フォントファミリーに リストされていない フォントファミリーを 使っている ページ上の 全要素を集めます 最後に テストに合格 しなかった要素を含む 結果オブジェクトを 返します 監査を書き終えたら ナビゲーションサイドバー下部の 完了をクリックするだけです これで 名前横の 実行ボタンをクリックして 監査を実行できます ページのノードの 1つに問題が あるようなので おかしい部分を 見ていきます また要素タブで表示 ボタンを使って 要素に移動して スタイルをチェックします これは恥ずかしいですね Comic Sansとは！ このフォントは 使いたくないので もっとUIに適したフォント ファミリーに変更します

監査タブに 戻って テストを再度実行すると 完璧です！ 最後にやりたいのは ボタンを使って テストを書き出すことで これを同僚たちと 共有して このようなミスを防ぐよう 知らせることです でもComic Sansを 使ったことは シェアしないで おこうと思います 内蔵のアクセシビリティ テストで 見過ごしていた 問題を検出するだけでなく テストを書いて Webページのデザインシステム ルールを強化することで 変更をチェックする前に チームのみんなの 足並みをより簡単に 揃えられるように なりました これで Webインスペクタ の主な新機能を すべて紹介しました コンテンツが適切に 見えるようにしてくれる 新しいCSSグリッドのオーバーレイ Webインスペクタから直接 問題の検出やデバッグ 修正点のテストができる 改善されたブレークポイント そしてWebインスペクタでの 新しい監査の作成と 編集機能では Webページが独自の基準や アクセシビリティの基準を 満たしているかのテストを すばやく作成できます これら新機能に加え Webインスペクタを さらに改善するための 調整や強化を行い 多くのバグを 修正しました セッションを終える前に 便利なリソースを紹介します Webインスペクタが オープンソースのWebkit プロジェクトであることは あまり知られていません これはSafariやメール App Storeで使われる 高速でプライベート かつ 安全なWebブラウザ エンジンで macOSやiOSの他の多くの Appにも使われています webkit.orgでは WebKitプロジェクト詳細や Webインスペクタの グリッドオーバーレイ機能など WebKit新機能についての ブログ記事などもあります さらに Webインスペクタ の機能やインターフェイスを 幅広く網羅した ドキュメントもあり 今日お話しした 監査やブレークポイントなど 多くの機能について 深く学ぶことができます これらの機能について 今日話しきれなかった 部分もあるので 詳しく知りたい方は ぜひドキュメントを ご覧いただければと 思います また フィードバックも 募集中です！ Webインスペクタについて バグを発見したり 改善案などの提案があれば macOSの フィードバックアシスタントから フィードバックを送り その時WebKitを エリアとして選択してください また Safari Technology Preview のダウンロードもおすすめします 大体2週間ごとに リリースされていて デベロッパ向けに 設計されています WebKitやWebインスペクタの 新しいツールや機能 修正点を Macや iPhone iPadの Safariの公開版リリース前に いち早くアクセス することができます 最後に Safariでの美しい コンテンツの適用やデザイン を学べる 「Design for Safari 15」や Webページのさらなる 改善に使える JavaScriptや WebAssembly新機能 について詳しく学べる 「Develop advanced web content」 など素晴らしいセッションも チェックしてください またWWDC2020の 「What's new in Web Inspector」 では Webインスペクタの さらなる改善点をご覧いただけます これらのセッションや その他のコンテンツは Developer Appから ご覧いただけます ありがとうございました ♪