WWDC Quick Look 💓 By SwiftGGTeam
中文 EN 日本語
Discover Web Inspector improvements

Discover Web Inspector improvements

SafariWebKitDeveloper Tools
元の動画を見る

ハイライト

Web インスペクターには、CSS グリッドのビジュアル オーバーレイ、フルタイプのブレークポイント構成、および監査編集モードが追加され、Safari のデバッグ エクスペリエンスが Chrome DevTools と同等になります。

主な内容

CSS グリッドのデバッグは、フロントエンド開発で常に課題になります。「スタイル」パネルに grid-template-columns: 1fr 2fr 1fr と書いても、要素が実際にどこへ配置されるかは頭の中で追うしかありません。グリッドが深く入れ子になるほど、レイアウト問題の特定は難しくなります。

今年の Web Inspector にはグリッドオーバーレイが追加されました。DOM ツリー内の各 Grid コンテナの横にバッジが表示され、クリックするとグリッド線、トラックサイズ、エリア名がページ上に直接描画されます。複数のグリッドオーバーレイを同時に開いても、スクロール時の遅延は発生しません。

ブレークポイントに关しては、前はJavaScript行ブレークポイントのみが条件判定とカスタムアクションをサポートしていました。イベントブレークポイント、DOMブレークポイント、URLブレークポイント、例外ブレークポイントなど、すべてのブレークポイントタイプに条件とアクションを切り取れることができました。イベントに条件設定して、特定のボタンのみで一時停止することができます。ネットワークリクエストブレークポイントにアクションを追加して、プロンプト自動再生システムです。

監査機能は、編集のために JSON をインポートおよびエクスポートすることしかできませんでした。今年は、Web Inspector で直接テスト コードを作成できる編集モードが追加されました。アクセシビリティ テストのセットが組み込まれており、ルールをカスタマイズしてデザイン システムのコンプライアンスをチェックすることもできます。

詳細

CSS グリッドのビジュアル オーバーレイ

オンにする方法は簡単です。

  1. [要素] パネルでグリッド コンテナを見つけ、その横にあるグリッド バッジをクリックします (01:20)
  2. 色付きのグリッド オーバーレイがページ上にすぐに表示されます
  3. [レイアウト] パネルでは、すべてのグリッド オーバーレイをオンまたはオフにしたり、1 つを個別に制御したりできます。

[レイアウト] パネルで提供される表示オプション:

  • トラック サイズ: 各行/列のトラック サイズを表示します。1fr、min-content（04:04）
  • 行番号: 正負の行番号ヒントを表示します。負の数値は最後の明示的なグリッド線から逆方向に数えるため、-1 や -2 を使った適応的な配置に便利です (04:15)
  • ライン名: 明示的に名前を付けたグリッド ラインとゾーン名に基づいて生成されたライン名を表示します (04:34)
  • エリア名: エリアの中央に名前を表示し、エリアの境界を太線で囲みます (04:43)
  • 拡張グリッド線: 他の要素との位置合わせと比較を容易にするために、グリッド線をページの端まで拡張します (04:58)

オーバーレイのパフォーマンスが最適化され、数十のグリッドをスムーズなスクロールで同時に表示できるようになりました (05:11)。すべての書き込みモードをサポートします: 縦書きテキスト、RTL 方向、複合モード (05:26)。iOS 15 および iPadOS 15 でリモート デバッグする場合にも利用できます (05:35)。

実際のデバッグ シナリオ:

/* 用 Grid Overlay 定位一个错位元素 */
.emoji-tile {
    grid-area: 4 / 6;  /* 第4行第6列 */
}

/* ネガティブな手がかりに切り替えてグリッドの変化に適応する */
.emoji-tile {
グリッド領域: -3 / -3; /* 下から 3 番目の行/列、常に右下隅にあります */
}

キーポイント:

  • グリッド バッジは、Elements ツリー内のすべての Grid コンテナを識別します (02:35)
  • オーバーレイの色はカスタマイズ可能で、Web Inspector は設定を記憶します (03:42)
  • 3 列レイアウトで [レイアウト] パネルと [スタイル] パネルを同時に表示できます (08:08)
  • 負の行番号のヒントにより、レイアウトがより柔軟になります (09:02)

ブレークポイントの機能強化: すべてのタイプで構成をサポート

Web インスペクターには 5 つのブレークポイント タイプがあります (10:34)。

  1. デバッガー/例外/アサーション ブレークポイント — 内debuggerステートメントまたは例外がスローされたときに一時停止する
  2. JavaScript ブレークポイント — 指定されたコード行で一時停止します
  3. イベント ブレークポイント — クリック、タイムアウト、間隔、アニメーション フレームなどのイベント処理中に一時停止します。
  4. DOM ブレークポイント — DOM ノードが追加、削除、変更されたとき、または属性が変更されたときに一時停止します。
  5. URL ブレークポイント — にありますXMLHttpRequestまたはfetchリクエストする前に一時停止してください

ブレークポイントを右クリックし、「ブレークポイントの編集 (構成可能)」を選択します。

  • 条件: 式が true の場合にのみ一時停止します。次のような Web Inspector コンソール API をサポートします。$0(DOM ノードは現在選択されています)、$event(現在のイベントオブジェクト) (11:31)
  • カウントを無視: 最初の N ヒットを無視し、ループ内デバッグに適しています (11:52)
  • アクション: ヒット時に実行されるアクション。次のものが含まれます。
  • JavaScript を評価する — コンテキスト内でコードを実行する (12:21)
  • ログメッセージ — テンプレート文字列を使用してログを出力します (12:29)
  • サウンドの再生 — システムサウンドの再生 (12:34)
  • プローブ式 — プローブパネルの式結果の変化を記録します (12:38)
  • ユーザー ジェスチャをエミュレート: アクションを実行するときにユーザー ジェスチャをシミュレートし、ユーザー インタラクションを必要とする API 制限 (ビデオの自動再生など) をバイパスします (12:56)
  • 自動続行: アクションの実行後、一時停止せずに自動的に続行します (13:20)

実用的なデバッグ例 - 特定のボタンのクリック イベントのみをキャプチャします。

// イベント ブレークポイント条件を記述します。
$event.target === $0  // [要素]パネルで現在選択されている要素のみを一時停止します。

キーポイント:

  • 条件式は、コンソール API をサポートします。$0、$event（15:55）
  • アクションは、制限された API のテストを容易にするためにユーザー ジェスチャのシミュレートをサポートします (16:56)
  • 同じ種類の複数のアクションを組み合わせることができます (17:12)
  • 5 つのブレークポイント タイプすべてで完全な構成がサポートされています (13:40)

監査: Web Inspector でのカスタム テストの作成

監査は JavaScript で記述され、現在のページに対して実行されます。DOM 構造、デザイン システム ルール、アクセシビリティ プロパティなどを検査できます (18:42)。

組み込みのテストグループ:

  • デモ監査 — 監査機能がどのように機能するかを示します (19:05)
  • アクセシビリティ — 画像にaltまたはtitle（19:11）

[編集] ボタンをクリックして編集モードに入ります (20:15)。

// カスタム監査: フォント ファミリがデザイン システムに準拠しているかどうかを確認します。
function test() {
    const allowedFonts = ['ui-sans-serif', 'ui-serif', 'ui-monospace'];
    const offenders = [];

    for (const element of document.querySelectorAll('*')) {
        const fontFamily = getComputedStyle(element).fontFamily;
        const fonts = fontFamily.split(',').map(f => f.trim().replace(/['"]/g, ''));
        const isAllowed = fonts.some(f => allowedFonts.includes(f));
        if (!isAllowed) {
            offenders.push(element);
        }
    }

    return {
        passed: offenders.length === 0,
        details: offenders.map(el => ({
            node: el,
            message: `Unexpected font: ${getComputedStyle(el).fontFamily}`
        }))
    };
}

テスト構成項目:

  • 名前/説明: テスト名と説明 (21:04)
  • バージョン: サポートされている監査の最小バージョン。サポートされていない Web Inspector での実行を防止します (21:07)
  • セットアップ スクリプト: 各テストの前に実行される共通のセットアップ コード (21:17)
  • テスト関数：returntrue/falseまたは結果オブジェクト (21:32)
  • WebInspectorAudit API: 監査固有の API。詳細については、Web Inspector リファレンス (21:41) を参照してください。

キーポイント:

  • デフォルトのデモ監査およびアクセシビリティ テストは編集できませんが、コピーおよび変更は可能です (20:27)
  • 手動でエクスポートおよびインポートしなくても、変更は自動的に保存されます (21:57)
  • テスト結果で失敗したノードは、ワンクリックで要素パネルにジャンプできます (22:56)
  • 監査を JSON としてエクスポートしてチームと共有できます (25:27)

重要ポイント

  1. グリッド オーバーレイは手動計算を置き換えます。Gridレイアウトをデバッグする際は、まずオーバーレイを確認して行と列の位置を確認してからCSSを記述すると試行錯誤の回数が減ります。
  2. 監査を使用して設計システムのルールを強化します。「Comic Sans の悲劇」を避けるために、フォント、色、間隔、その他の仕様を監査テストに書き込み、各送信前に自動的にチェックします。
  3. イベントブレークポイント + 条件で問題を特定する。console.log を挿入する必要はありません。条件付きクリックブレークポイントを設定すれば、対象要素の処理関数で直接停止できます。
  4. ブレークポイント アクションは、ユーザー ジェスチャ テスト API をシミュレートします。呼び出すためにユーザーの操作が必要な API (例:navigator.share)、ブレークポイント アクションを使用してジェスチャをシミュレートし、迅速に検証できます。
  5. リリース チェックリストとしてのアクセシビリティ監査。各リリースの前に、組み込みのアクセシビリティ テストを実行して、画像に alt があり、フォームにラベルがあり、その他の基本的なコンプライアンス項目があることを確認します。

関連セッション

コメント

GitHub Issues · utterances