WWDC Quick Look 💓 By SwiftGGTeam
中文 EN 日本語
What's new in Web Inspector

What's new in Web Inspector

SafariWeb InspectorWebKit
元の動画を見る

ハイライト

Safari 14 の Web インスペクターには、ソース タブ、ローカル オーバーライド、インスペクター ブートストラップ スクリプト、ストレージ Cookie 編集、メディアとアニメーション タイムライン、グラフィックス/レイヤー視覚化、およびコンソール ヒープ クエリが追加されており、開発者が Safari、WKWebView、JSContext でネットワーク、スクリプト、アニメーション、ストレージの問題を直接トラブルシューティングできるようになります。

主要内容

Web ページをデバッグする場合、問題が複数の場所に分散していることがよくあります。リソースはサーバーから取得され、スクリプトは 1 行に圧縮され、サードパーティのライブラリはブレークポイントをブロックし、アニメーションの遅延はレンダリング レイヤに隠されます。以前は、Safari でこれらの問題をトラブルシューティングするには、開発者は複数のタブを行ったり来たりし、サーバー ファイルを変更し、ページを再起動して、再度観察する必要がよくありました。

このセッションでは、Safari 14 の Web インスペクターへの変更点を示します。入口は依然として Safari の [開発] メニューにあり、その機能は Safari ページ、アプリの WKWebView、および JSContext をカバーします。 Apple はまずインターフェイスの高さを圧縮し、ツールバーとダッシュボードをタブ バーに統合し、次にネットワーク統計をメイン テーブルの下に移動して、ページをチェックするときにより多くの垂直スペースを確保しました。

より重要な変更はデバッグ パスにあります。新しい [ソース] タブには、リソースの表示、JavaScript のデバッグ、およびネットワーク カバレッジがまとめられています。開発者は、リモート HTML、JSON、画像、またはスクリプトに問題がある場合、ローカル オーバーライドを直接作成し、コンテンツ、ステータス コード、または HTTP ヘッダーを変更し、検証のためにページを更新できます。 WebKit によってページに公開される JavaScript API の動作を変更する場合は、インスペクター ブートストラップ スクリプトを使用して、ページ スクリプトの前でデバッグ ロジックを実行します。

後半は専門的なツールに移ります。 [ストレージ] タブでは、Cookie のフィルタリング、編集、削除がサポートされています。 [タイムライン] タブ メディアとアニメーションのタイムラインが追加されました。グラフィック タブは元のキャンバス タブを拡張し、Web アニメーション、CSS アニメーション、CSS トランジションを表示できます。 [レイヤー] タブを使用すると、開発者はレイヤー ツリー、メモリ コスト、ペイント数、および特定のレイヤーが作成された理由を直接表示できます。コンソールも追加queryInstancesそしてqueryHolders、オブジェクト インスタンスと強参照を JavaScript ヒープから直接検索するために使用されます。

詳細

[ソース] タブを使用して、リソース、デバッガ、ネットワーク オーバーレイを同じパスに配置します

(02:11) [ソース] タブには、古い [リソース] タブと [デバッガー] タブのコア機能が統合されています。これには、Web Inspector が開いてからページに読み込まれたリソースがリストされます。これには、有効期間の長い WebSocket、XHR、fetchこのタイプの短いライフサイクルのリクエスト。また、JavaScript デバッガのステッピング コントロール、ブレークポイントのエントリ ポイント、およびネットワーク オーバーライドの主要な場所でもあります。

(03:08) リソースを表示する場合、Web Inspector は適切なコンテンツの代替表現を提供します。 HTML レスポンスは DOM ツリーに、JSON はオブジェクト ツリーに切り替えることができます。リクエスト本文にも同様の見解があります。インターフェイスの応答のトラブルシューティングを行う場合、開発者は、単に生のテキストを見つめ、スクロールしてラベルやフィールドを見つける必要はありません。

キーポイント:

  • [ソース] タブでは、リソースの表示、ブレークポイントのデバッグ、およびネットワーク カバレッジを同じワークスペースに集中化します。
  • HTML レスポンスは DOM ツリーで、JSON レスポンスは Console オブジェクト ツリーで表示できます。
  • これらの表現はリクエストの内容にも適用されます。
  • 以前のエクスペリエンスと比較して、リソース パネルからデバッガーに切り替え、さらにネットワーク パネルに戻る回数が減りました。

ローカル オーバーライドを使用してリモート応答をローカルに置き換えます

(04:26) 多くの場合、リモート リソースを直接変更するのは簡単ではありません。サーバー上にある場合もあれば、複雑な前処理が行われる場合もあります。ローカル オーバーライドはこのリンクを解決します。開発者がリソースを表示するときに [オーバーライドの作成] をクリックすると、Web Inspector は現在のコンテンツをリソースのローカル オーバーライド バージョンにコピーします。

(05:43) ローカル オーバーライドは、応答本文を変更するだけではありません。 [ローカル オーバーライドの編集] 操作を通じて、HTTP ステータス コードと HTTP ヘッダーも変更できます。ページが URL に一致するリソースを再度読み込むと、コンテンツ、ステータス コード、ヘッダーを含む応答全体がローカルで上書きされたバージョンに置き換えられます。オーバーライドされたリソースには、Web Inspector 全体に特別なアイコンが表示されます。

キーポイント:

  • ローカル オーバーライドは、検査されたページと Web Inspector セッション全体で持続します。
  • メインリソースと非テキストリソースも上書きすることができ、トランスクリプトで明示的に言及されている画像も適用されます。
  • URL が一致すると、応答コンテンツ、ステータス コード、HTTP ヘッダーを含む置換が行われます。
  • これは、HTML コピー、ヘッダー構成、画像の置換など、検証サーバーが一時的に公開できない修正に適しています。

Inspector Bootstrap Script を使用してデバッグ環境を事前に書き換える

(06:50) 一部の問題はネットワーク リソースではなく、WebKit がページに提供する JavaScript API サーフェスにあります。インスペクター ブートストラップ スクリプトは、[ソース] タブのサイドバーの下部にあるリソースの追加ボタンから作成され、コンテンツは検査されたページ内のスクリプトよりも前に実行されることが保証されます。

このタイミングだと2種類の事に適しています。 1 つ目のタイプは、組み込み関数がどこで呼び出されるかを監視する組み込み関数のスウィズルです。 2 番目のタイプは、ページ自体のコードがより多くのデバッグ情報を出力できるようにするために、グローバル状態を事前に設定するものです。ローカル オーバーライドと同様に、検査されたページと Web インスペクター セッション全体で持続します。

キーポイント:

  • インスペクター ブートストラップ スクリプトは、ページの開始時に表示される JavaScript API サーフェスを変更します。
  • ページ上の他のスクリプトよりも前に実行されることが保証されており、初期のプローブの挿入に適しています。
  • トランスクリプトによって与えられる用途には、スウィズル組み込み関数やグローバル デバッグ状態の設定が含まれます。
  • Web サイトのコード ベースに一時コードを送信せずにデバッグに使用されます。

新しいブレークポイントとブラックボックス化でサードパーティ ライブラリのノイズを回避

(07:54) Web Inspector は複数の新しいグローバル ブレークポイントを追加します。デバッガーステートメントのブレークポイントは個別に制御されますdebuggerステートメントを無視するためにすべてのブレークポイントをオフにする必要はありません。すべてのマイクロタスクは、マイクロタスクが実行される前に一時停止されます。PromiseそしてqueueMicrotask()。すべてのアニメーション フレーム、すべてのタイムアウト、すべての間隔、すべてのイベントがそれぞれカバーされます。requestAnimationFrame、setTimeout、setIntervalイベントリスニングコールバック。

(10:06) グローバル ブレークポイントはライブラリ コード内で簡単に停止できます。 jQuery を使用してセッションでリッスンするイベントをラップする例は、この問題を示しています。スクリプトのブラックボックス化により、開発者はスクリプトをブラックボックス化としてマークすることができ、JavaScript デバッガーは、スクリプト内で最初に発生した一時停止を、スクリプトから出る最初の式まで遅らせます。大規模なライブラリでは、通常のパターンを使用して、[設定] タブで複数のスクリプト URL を照合することもできます。

キーポイント:

  • debuggerステートメントには独立したスイッチがあり、他のブレークポイント タイプは引き続き機能します。
  • マイクロタスク、アニメーション フレーム、タイムアウト、間隔、およびイベント リスナーはすべてグローバル ブレークポイント エントリを持ちます。
  • ブラックボックス化の目的は、開発者コード内のブレークポイントを停止し、サードパーティのライブラリ ラッパーからの干渉を減らすことです。
  • Web インスペクターでは、ブラックボックス化されたスクリプトの呼び出しフレームが灰色で強調表示されます。

Step および HTML pretty print を使用して圧縮スクリプトまたはインライン スクリプトを処理します

(11:03) JavaScript では、複数の関数呼び出しが 1 行にまとめられている場合があります。以前は、開発者が 3 回目の呼び出しの前に停止したい場合は、ステップインとステップアウトを複数回行う必要がありました。新しいステップ デバッガー アクションは、現在の呼び出しフレームの次の式の前に再び一時停止します。 Session の例は継続実行ですa、bようやく、徐々に辿り着くc電話。

(13:16) インライン スクリプトも改善されました。 Safari の Web Inspector の最新バージョンは、インライン スクリプトやスタイル シートを含む、HTML およびその他の XML に似たコンテンツの書式設定をサポートしています。 Pretty print の後は、既存の JavaScript デバッガとステッピング機能もこのインライン コンテンツに使用できます。

キーポイント:

  • ステップ アクションの粒度は式、ステップ オーバーの粒度はステートメントです。
  • 単一回線に複数のコールがある場合、Step は Step In と Step Out の間で往復するステップ数を減らすことができます。
  • HTML pretty print により、インライン スクリプトとスタイルシートが読みやすくなります。
  • Web インスペクターは、縮小された HTML を検出し、自動的にきれいな印刷を有効にしようとします。

メディアとアニメーション、グラフィックス、レイヤーを使用してアニメーションとレンダリングの問題を確認する

(14:25) [タイムライン] タブ メディアとアニメーションのタイムラインを追加しました。ビデオの一時停止などのメディア要素イベントをキャプチャし、CSS アニメーションと CSS トランジションのライフサイクルもキャプチャします。各メディア要素、CSS アニメーション、または CSS トランジションには、DOM ノードが関連付けられた独自の行があります。animation-nameまたはtransition-property情報。

(17:54) [グラフィックス] タブは、元の [キャンバス] タブを拡張します。引き続きコンテキストとシェーダーのリストを表示し、コンテキストでの JavaScript API 呼び出しの記録をサポートし、JavaScript、CSS アニメーション、CSS トランジションなどのソースごとに分類された新しい Web アニメーション リストを追加します。アニメーションが選択されると、詳細サイドバーには、JavaScript API がアニメーションを作成するときの ID、関連するノード、タイミング パラメーター、キーフレーム、およびバックトレースが表示されます。

(20:02) [レイヤー] タブには、検査されたページのレイヤー ツリー ライブ ビューが表示され、各レイヤーのメモリ コストとペイント数がリストされます。開発者はレイヤーを選択すると、そのレイヤーが作成された理由を確認できます。 Session の例は、現在のレイヤーが CSS アニメーションと CSS から来ていることを示しています。will-change property。

キーポイント:

  • メディアとアニメーションのタイムラインは、メディアの状態、アニメーションのライフサイクル、その他のタイムライン アクティビティを調整するために使用されます。
  • Graphics タブは、Web アニメーションのタイミング、キーフレーム、作成ソースを確認するのに適しています。
  • [レイヤー] タブは、意図しないレイヤー、メモリ コスト、ペイント数を見つけるのに適しています。
  • レイヤー ツリー ビューは回転、拡大縮小、移動をサポートしており、視覚的な構造からターゲット レイヤーを簡単に見つけることができます。

ストレージとコンソールを使用して状態とヒープ オブジェクトを直接処理する

(16:19) [ストレージ] タブには、Cookie、LocalStorage、IndexedDB など、ブラウザに保存されているデータが表示されます。 Safari 14 の Web Inspector では、さまざまなストレージ タイプのフィルタリング機能が追加され、Cookie の編集と削除が強化されています。開発者は、Cookie セルをダブルクリックしてポップオーバーを開き、各フィールドを変更できます。 [Cookie の追加] ボタンを使用して Cookie を追加することもできますが、名前は必須です。

(22:08) コンソールには、覚えておく価値のある 2 つの新しいヒープ クエリ関数が追加されています。queryInstancesコンストラクターまたはプロトタイプを受け取り、そこから継承されたオブジェクトの JavaScript ヒープをスキャンして、配列を返します。queryHoldersオブジェクトを取得し、そのオブジェクトへの強い参照を持つ他のオブジェクトがないかヒープをスキャンします。セッション用Person.parent強参照はメモリ リークを引き起こす可能性があることに注意してください。

(24:38) プライバシー関連のログも Web Inspector コンソールに入ります。 Web Inspector が開いていて、Safari の [開発] メニューで Intelligent Tracking Prevention デバッグ モードが有効になっている限り、ITP デバッグ ログは Web Inspector コンソールと macOS Console.app の両方に表示されます。広告クリック アトリビューション デバッグ モードのログは、Web Inspector コンソールにも表示されます。

キーポイント:

  • [ストレージ] タブのフィルター バーは、Cookie などのストレージ行のフィールドと一致します。
  • Cookie の編集はポップオーバーが閉じられた後に適用され、新しい Cookie には名前が必要です。
  • queryInstances特定のコンストラクターまたはプロトタイプに対応するインスタンスを見つけるために使用されます。
  • queryHolders強力な参照ホルダーを見つけるために使用され、JavaScript のメモリ リークのトラブルシューティングに適しています。
  • ITP および広告クリック アトリビューションのデバッグ ログは、Web Inspector コンソールで直接表示できます。

重要ポイント

  • リモート応答の迅速な検証プロセスの作成: やるべきこと: HTML コピー、画像、HTTP ヘッダー、ステータス コードをカバーする、オンライン ページ用のローカル オーバーライド チェックリストのセットを準備します。実行する価値がある理由: セッションでは、ローカル オーバーライドが完全な応答を置き換えてセッション間で保持できることを明示的に示しています。開始方法: 最も頻繁に変更されるページ リソースからオーバーライドの構築を開始し、検査されたページ検証動作を更新して、確認された変更を実装のためにサーバーに同期します。

  • サードパーティ ライブラリのブレークポイント テンプレートを作成: 手順: プロジェクト内でよく使用されるライブラリのブラックボックス化ルールを構成して、すべてのイベントやすべてのタイムアウトなどのグローバル ブレークポイントでビジネス コードを停止しやすくします。実行する価値がある理由: Session の jQuery の例は、イベント コールバックがライブラリ ラッパーによってラップされることが多いことを示しています。開始方法: [設定] タブでライブラリ ファイル URL の規則的なパターンを作成し、実際のクリックまたはタイムアウト コールバックで一時停止位置を確認します。

  • アニメーション パフォーマンスのトラブルシューティング パネルを作成します: 何をするか: メディアとアニメーションのタイムライン、グラフィックス タブ、およびレイヤー タブの検査ステップを固定プロセスに整理します。実行する価値がある理由: セッションは、アニメーションのライフサイクル、Web アニメーションのパラメーター、レイヤーのメモリ コスト、ペイント数、レイヤーの作成理由をそれぞれ提供します。開始方法: まずタイムラインを記録し、次に異常なアニメーションを選択してキーフレームを表示し、最後に [レイヤー] タブに移動して関連する DOM ノードに冗長レイヤーがあるかどうかを確認します。

  • Cookie とログイン ステータスの再現実験を行う: 内容: ストレージ タブのフィルタリング、編集、および新しい Cookie 機能を使用して、ログイン、A/B グループ化、またはエリア切り替えステータスを再現します。実行する価値がある理由: セッション説明 Cookie フィールドは直接編集でき、新しい Cookie は HTTP Cookie やdocument.cookie設定された Cookie は永続的に残ります。開始方法: ターゲット Cookie をフィルタリングし、変更前にフィールドを記録し、変更後にページを更新して、コンソールとネットワークの動作を観察します。

  • メモリ リークを特定する小規模なマニュアルを作成します: 何をすべきか: putqueryInstancesそしてqueryHoldersフロントエンド メモリのトラブルシューティング プロセスに参加してください。実行する価値がある理由: Session は、ヒープを直接スキャンし、インスタンスと強参照ホルダーをそれぞれ見つけて、完全なヒープ スナップショットを確認するよりも速くターゲット オブジェクトに入ることができると説明しています。開始方法: まずコンストラクターを使用してコンソール内のインスタンスを検索し、次に疑わしいオブジェクトに対してホルダー クエリを呼び出し、強参照に従ってホルダーに戻ります。

関連セッション

  • Web 開発者向けの新機能 - Safari と WebKit の Web API、CSS、メディア、JavaScript の更新を確認してから、Web Inspector に戻ってこれらの機能をデバッグします。
  • WKWebView の機能強化をご覧ください - Web インスペクターは、アプリに埋め込まれた Web コンテンツに新しい機能を追加する WKWebView を検査できます。
  • Safari Web Extension について — Safari Web Extension の開発には、ページ スクリプト、拡張機能ロジック、ブラウザの動作が含まれており、Web Inspector を使用したデバッグに適しています。
  • Web 用の Face ID と Touch ID について - Web 認証 API の登録とログインのプロセスを Web Inspector を通じて監視し、スクリプト、ネットワーク、コンソールの動作を監視できます。
  • ユニバーサル リンクの最新情報 - ユニバーサル リンクは Web サイトとアプリを接続し、Safari 側のデバッグ ツールと併せてジャンプ リンクを理解するのに適しています。

コメント

GitHub Issues · utterances