What's new in Web Inspector

ハイライト

Safari Web Inspector には、可変フォントのインタラクティブコントロール、合成スタイルの警告、ユーザー設定の上書き、スクロールコンテナとイベントリスナーのバッジ、Symbolic Breakpoints が追加され、タイポグラフィからアクセシビリティ、JavaScript ブレークポイントまで、フロントエンドのデバッグがより直感的になりました。

主要内容

タイポグラフィの検査

フロントエンド開発者は、フォントに関する疑問に直面することがよくあります。この文字はなぜ十分に太く見えないのか？イタリックはなぜ不自然に見えるのか？実際に読み込まれているのはどのフォントファイルか？

Web Inspector の Elements タブの Details サイドバーにある Font パネルがこれらの疑問に答えます。選択した要素が使用例する主要フォント名、基本属性（サイズ、スタイル、ウェイト、ストレッチ）、フォント機能（合字、スモールキャップ、数字スタイルなど）を表示します。

（02:49）

今年追加された重要な警告は、合成ボールドと合成イタリックです。フォントファイルに対応する太字やイタリックのバリアントがない場合、WebKit はアルゴリズムで模倣します。ボールドはストロークを太くし、イタリックは正体のグリフを傾けます。タイプデザイナーは専用のイタリックを丁寧に描いており、機械的な傾斜とは見た目が大きく異なります。Web Inspector は Font パネルで合成スタイルを明示し、対応するフォントファイルの読み込みが必要かもしれないことを示します。

（03:53）

可変フォント（Variable Fonts）も重点項目です。1 つの可変フォントファイルに、ウェイト、幅、傾斜など複数のスタイル変化の情報を含められます。各変化軸は連続値の範囲を提供し、静的フォントの離散的な段階とは異なります。

今年 Web Inspector には可変フォント用のインタラクティブコントロールが追加されました。可変フォントを使う要素を選ぶと、Font パネルに利用可能な変化軸（wght、wdth、GRAD など）が一覧表示され、各軸にリアルタイム調整用のスライダーがあります。スライダーを動かすとページ上の文字が即座に更新され、対応する CSS 値が Styles パネルに書き込まれます。

（06:59）

ユーザー設定のシミュレーション

異なるアクセシビリティ設定下でのサイトの挙動をテストするには、以前はシステム設定を変更する必要がありました。これはテスト対象のページだけでなく macOS 全体に影響します。

Web Inspector には User Preference Overrides ポップオーバーが追加されました。Elements タブの新しいアイコンをクリックすると、現在検査中のページのユーザー設定を上書きできます。

• 配色（Color Scheme）：prefers-color-scheme の light/dark をシミュレート
• モーション低減（Reduce Motion）：prefers-reduced-motion をシミュレート
• コントラスト強調（Increase Contrast）：prefers-contrast をシミュレート

これらの上書きは Web Inspector を開いている間だけ有効で、システムの他の部分には影響しません。

（10:28）

要素バッジ

Elements タブの DOM ツリーでは、Flex と Grid コンテナにはすでにバッジ表示がありました。今年 2 つ追加されました。

• Scroll バッジ：内容が溢れてスクロールするコンテナを示します。スクロールバーが非表示のシステムでは特に有用で、意図しない横スクロールを素早く発見できます。
• Event バッジ：JavaScript イベントリスナーがバインドされた要素を示します。バッジをクリックすると、イベント種別、ハンドラ名、ソース位置、設定（バブリング、once など）を含むリスナー一覧が表示され、リスナーの無効化やイベントブレークポイントの設定もできます。

（15:52）

ブレークポイントの強化

JavaScript ブレークポイントに Symbolic Breakpoints が追加されました。特定のコード行にブレークポイントを置くのではなく、指定した関数が呼ばれる直前に実行を一時停止します。

関数名を完全一致させることも、正規表現で複数の関数にマッチさせることもできます。組み込み JavaScript API（navigator.share() など）の呼び出しをデバッグしたり、同名関数を探したりする際に特に有用です。

（23:22）

ブレークポイントは自動継続（Auto-continue）も設定できます。Log Message や Evaluate JavaScript アクションと組み合わせると、一時停止せずに console.log() を注入したり変数値を変更したりするのと同等です。

詳細

可変フォントの CSS 利用

可変フォントは @font-face の font-variation-settings または標準 CSS プロパティで制御します。

@font-face {
  font-family: "Inter";
  src: url("Inter-Variable.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-stretch: 75% 125%;
}

body {
  font-family: "Inter", sans-serif;
  font-weight: 450;
}

/* ダークモードで太字に */
@media (prefers-color-scheme: dark) {
  body {
    font-weight: 500;
  }
}

キーポイント:

• @font-face の font-weight: 100 900 はそのフォントがサポートするウェイト範囲を宣言
• font-stretch: 75% 125% は幅の変化範囲を宣言
• 可変フォントでは font-weight: 450 のような非整数値も有効
• 静的フォントは 100/200/300…900 の百の位のみサポート

Web Inspector で可変フォントを操作すると:

/* Styles パネルでスライダーを調整すると、このような CSS が生成される */
.title {
  font-family: "Inter";
  font-weight: 680;
  font-stretch: 95%;
  font-variation-settings: "GRAD" 150;
}

キーポイント:

• font-variation-settings はカスタム変化軸（"GRAD" など）を制御
• GRAD（Grade）軸は文字幅を変えずに見かけの太さを変え、レスポンシブレイアウトでの微調整に有用
• 標準軸（weight、width）は font-variation-settings より font-weight と font-stretch を優先

ユーザー設定上書き向け CSS 適応

/* 基本アニメーション */
.photo-zoom {
  animation: zoom-in 0.3s ease-out;
}

@keyframes zoom-in {
  from { transform: scale(0.8); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

/* モーション低減を好むユーザー向けの代替 */
@media (prefers-reduced-motion: reduce) {
  .photo-zoom {
    animation: fade-in 0.5s ease-out;
  }
}

@keyframes fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

キーポイント:

• prefers-reduced-motion はユーザーがモーション低減を有効にしているかを検出
• すべてのアニメーションを削除するのではなく、より穏やかなアニメーションに置き換える
• アニメーション完全削除は UI 変化の伝達を損なう可能性がある
• User Preference Overrides で Reduce Motion を有効にしてテスト可能

ダークモード適応:

.card {
  background: #ffffff;
  color: #1a1a1a;
  border: 1px solid #e0e0e0;
}

@media (prefers-color-scheme: dark) {
  .card {
    background: #1a1a1a;
    color: #f0f0f0;
    border-color: #404040;
  }
}

キーポイント:

• prefers-color-scheme: dark はシステムのダークモードにマッチ
• Web Inspector で Color Scheme 上書きを切り替えて即座にプレビュー
• アイコン色も上書き状態に応じて変わり、有効な配色を確認しやすい

Symbolic Breakpoint の使い方

Sources タブで Symbolic Breakpoint を設定:

// コードのどこかで navigator.share() が呼ばれているが
// 共有 URL が誤っている場合、呼び出し箇所を見つけたい

// Web Inspector の Sources タブで:
// 1. Breakpoints 領域の + をクリック
// 2. "Symbolic Breakpoint" を選択
// 3. 関数名を入力: navigator.share
// 4. ブレークポイントを設定

// 共有ボタンをクリックすると navigator.share() 呼び出し前に一時停止
// Call Stack からコード内の呼び出し位置を確認できる

// ブレークポイントアクションで自動修正:
// 呼び出し箇所に通常ブレークポイントを置き、右クリックで編集:
// - "Pause" をオフ（Auto-continue を有効）
// - Action: Evaluate JavaScript を追加
// - 入力: data.url = "https://example.com/photo/" + photoId;

キーポイント:

• Symbolic Breakpoint は関数名にマッチし、ソース上の正確な位置は不要
• 正規表現もサポート（例: /share.*/）
• Auto-continue と Evaluate JavaScript を組み合わせれば一時停止なしでランタイムデータを修正
• Call Stack でアプリケーションコードの呼び出し元をたどれる

イベントリスナーバッジのワークフロー

<!-- HTML 構造 -->
<div class="gallery">
  <figure class="photo" data-id="123">
    <img src="photo.jpg" alt="...">
    <button class="share-btn">Share</button>
  </figure>
</div>

// JavaScript イベントバインド
document.querySelector('.gallery').addEventListener('click', handlePhotoClick);
document.querySelector('.share-btn').addEventListener('click', handleShare, { once: true });

Web Inspector では:

• .gallery に Event バッジが表示され、クリックで click リスナーを確認
• .share-btn の Event バッジに { once: true } 設定が表示
• リスナーを一時無効化してイベント競合を切り分け可能
• バッジから直接イベントブレークポイントを設定可能

キーポイント:

• Event バッジはバブリング段階で捕捉したイベントも含むすべてのリスナーを表示
• addEventListener とインライン onclick を区別可能
• リスナー無効化は一時的で、ページ再読み込みで元に戻る
• イベントブレークポイントはハンドラ実行前に一時停止

重要ポイント

1. 複数フォントファイルを可変フォントに置き換える

• やること：Regular、Medium、Bold など複数のフォントファイルを 1 つの可変フォントに置き換える
• 価値：HTTP リクエスト削減、連続調整可能なウェイトと幅、Web Inspector の操作で微調整が直感的
• 始め方：可変フォント（Inter、Roboto Flex など）を選び、@font-face で範囲を宣言、Web Inspector でスライダーを動かして最適値を見つけ CSS をコピー

2. アクセシビリティ適応チェックリストを作る

• やること：Web Inspector で 3 つのユーザー設定上書き（ダークモード、モーション低減、コントラスト強調）を体系的にテスト
• 価値：多くのユーザー体験に直結し、システム設定変更なしでテスト可能
• 始め方：User Preference Overrides を開き、各設定を切り替えてレイアウトと操作を確認。prefers-reduced-motion 向けの代替アニメーションを用意

3. Scroll バッジで意図しないスクロールを除去

• やること：Elements パネルで Scroll バッジをスキャンし、意図しない横・縦スクロールを修正
• 価値：スクロールバー非表示環境では見落としやすく、コンテンツ欠落や混乱の原因になる
• 始め方：Scroll バッジ付き要素の overflow と子要素サイズを確認。min-width、flex、white-space の調整が一般的

4. Symbolic Breakpoint でサードパーティコードをデバッグ

• やること：ブラウザ組み込み API やサードパーティライブラリ関連の問題では Symbolic Breakpoint で呼び出しチェーンを特定
• 価値：minify されたサードパーティコード内を探す必要がなく、関数名で直接ブレーク
• 始め方：Sources タブで Symbolic Breakpoint を追加し、対象関数名（fetch、localStorage.setItem など）を入力、Call Stack で呼び出し元を確認

5. Event バッジで古いイベントバインドを整理

• やること：Elements パネルの Event バッジを定期確認し、必要なリスナーのみ残す
• 価値：重複や古いバインドはメモリリークや予期しない挙動の原因
• 始め方：主要な操作要素を走査し、Event バッジでリスナー一覧を確認。不要なものはソースから削除

関連セッション

• Rediscover Safari developer features — デバイスペアリングとレスポンシブデザインモードを含む Safari 開発者機能の総合アップデート
• What’s new in CSS — コンテナクエリやカスケードレイヤーなど CSS の新機能
• What’s new in WebKit — WebKit エンジンの新機能と改善
• Meet Safari Web Extensions — Safari Web 拡張機能の開発
• Explore WKWebView additions — WKWebView の新 API と機能