ブラウザに入っている開発者ツールは、毎日のように開いているわりに、更新内容を追いかける機会の少ない道具です。Chrome 152 に含まれた開発者ツールの更新には、通信の調査まわりを中心に、現場の手数をそのまま減らすものがいくつか入っていました。派手な新機能ではありませんが、知っているかどうかで不具合を追うときの段取りが変わります。

通信を作り直さずに送り直せる

ネットワークパネルの右クリックにあった Replay XHR という項目が Resend に変わりました。名前が変わっただけではなく、対象が XHR に限られなくなり、取得できる通信全般を送り直せるようになっています。標準の通信は fetch の呼び出しに変換されたうえで再送され、その通信がどの実行文脈から出たのか、コンソールのどこが発端だったのかも表示されます。フォーム送信やAPIの応答がおかしいときに、画面の操作を最初からやり直さずに再現できる場面が増えます。

一覧の見え方も整理されました。通信の連番を示す列が先頭に固定され、あとから特定の通信を指し示しやすくなっています。フィルタ欄にドメインやホスト名、ポート番号を入れたときに、同じサイト内の通信が正しく絞り込まれるようになった点も地味に効きます。ペイロードのタブには Base64、16進数、UTF-8 という復号方法の切り替えが加わり、バイナリや圧縮された送信内容の中身も読めるようになりました。クエリやフォームの値は、はじめから復号された状態で表示されます。

先読みの扱いも分かりやすくなりました。その通信が投機的な先読みによって始まったものかどうかを示す列が追加され、右クリックからは、そのまま HTML に貼れる先読み用の link 要素の記述をコピーできます。Early Hints は発信元の列にまとめられました。表示速度の改善を頼まれたときに、いま何が先読みされているかを一覧で確かめられるのは便利です。

要素パネルがカスタム要素と入れ子のCSSに追いついた

ハイフンを含む独自のタグや、組み込み要素を拡張した書き方をしている要素には、DOM ツリー上に目印のバッジが付くようになりました。ブロックエディタやフレームワークが吐き出したマークアップを読むときに、素の HTML との区別が一目で付きます。

入れ子で書かれた CSS の親セレクタにカーソルを合わせると、該当する要素がページ上で強調され、スタイルタブの絞り込みにも反応するようになりました。入れ子の宣言に対する詳細度の説明も出ます。擬似要素まわりも改善され、DOM ツリーで before や after を選ぶと、コンソールの直前選択の変数にその擬似要素が入るので、そのまま JavaScript から確かめられます。text-wrap の値の候補表示や、画像の値を取るプロパティの補完も加わりました。ボックスモデルの図も、スクロールバーが出ている要素の内容領域を正しく計算するようになっています。

調べた結果を外に持ち出しやすくなった

コンソールで表として出力した内容を、Markdown か CSV の形式でそのままクリップボードに写せるようになりました。調査結果を社内の共有ドキュメントや課題管理に貼るまでの手間が減ります。デバッガで停止中にカーソルを合わせて式を評価する動作についても、新しいオブジェクトの生成や動的な読み込み、削除などを含む式は評価されないよう守りが入りました。調べているつもりが状態を書き換えてしまう事故を防ぐ変更です。

アクセシビリティまわりの改善も入っています。アクセシビリティツリーのノードや、その配下のまとまりをテキストとしてコピーできるようになり、要素パネルとアクセシビリティツリーの行き来も右クリックからできるようになりました。暗い配色のときに検索結果の強調が見えにくかった問題も直っています。画像の遅延読み込みを指定しているのに幅と高さの指定がない場合には、警告が出るようになりました。遅延読み込みだけ入れて寸法を書き忘れ、読み込み中に表示がずれるというのはよくある型なので、指摘してもらえるのは助かります。

そのほか、ファイルを開くときに手元の作業ディレクトリのファイルが上位に来るようになった点、保存データの削除まわりの設定が一箇所にまとまった点、回線速度の制限について既定の設定と自作の設定が別の欄に分かれた点なども、細かいながら毎日の操作に効いてきます。

更新の届く間隔そのものも短くなる

こうした改善の届き方も変わります。Chrome は9月8日の安定版から、これまで4週間だった更新の間隔を2週間に縮めます。1回あたりの変更の幅は小さくなる見込みですが、開発者ツールの項目名や場所が以前より短い周期で動くことになります。すぐに追随できない管理環境向けには、8週間ごとの Extended Stable がこれまでどおり用意されます。

中小企業のサイトを預かる保守作業では、不具合の再現と確認にかかる時間がそのまま作業量に響きます。使い慣れた道具ほど更新内容を見落としやすいので、手が空いたときに一度、いつも使っているパネルを開いて何が変わったかを眺めておくと、次に慌てる場面で効いてきます。