DevTools の新機能（Chrome 111）

Jecelyn Yeen

スタイルペインを使用した HD 色のデバッグ

新しい CSS の色の種類と空間がウェブに登場します。また、デベロッパーがハイ デフィニション カラーの作成、変換、デバッグに役立つ新しいツールが DevTools に導入されたことも、同様に注目に値します。

[スタイル] ペインで、CSS Color Level 4 仕様で概説されている 12 の新しい色空間と 7 つの新しい色域がサポートされるようになりました。ウェブで利用可能な色のオプションについて詳しくは、高解像度 CSS カラーガイドをご覧ください。

color()、lch()、oklab()、color-mix() を使用した CSS の色定義の例を次に示します。

color-mix() 関数を使用すると、最終的な色の出力を [計算済み] ペインで確認できます。

カラー選択ツールは、新しいカラースペースをすべてサポートし、より多くの機能を備えています。たとえば、color(display-p3 1 0 1) の色見本をクリックします。また、色域境界線も追加され、sRGB と display-p3 の色域を区別して、選択した色の色域をより明確に把握できるようになりました。

DevTools では、カラー形式間での色の変換がサポートされています。[色形式を変更] アイコンを使用して変換ポップアップにアクセスするか、Shift キーを押しながら [スタイル] ペインで色見本をクリックします。

変換する際には、スペースに合わせて変換が切り詰められたかどうかを確認することが重要です。DevTools では、変換された色の横に警告アイコンが表示され、このクリッピングを警告します。

また、新しいショートカットを使用して、画面から色を選択することもできます。スポイトを有効にするには c キーを、無効にするには Escape キーを押します。スポイトツールは、sRGB 色空間の色のみをサンプリングします。たとえば、sRGB 色空間外の色 color(display-p3 1 0 1) をサンプリングしようとすると、スポイトツールは sRGB 空間で最も近い色（マゼンタ color(display-p3 0.92 0.2 0.97)）に色をクリップします。

最後に、新しい HD 色形式に対応するため、[色形式] の設定が非推奨になりました。

Chromium の問題: 1073895、1395782、1408777、1395782、1392717、1382409、1392054

ブレークポイントの UX の強化

ブレークポイントペインが再設計され、よく使用する機能（特に、ブレークポイントの無効化、編集、削除）にすばやくアクセスできるようになりました。

主な変更点は次のとおりです。 - 一時停止例外の両方のオプションが [ブレークポイント] ペインに移動され、わかりやすいようにラベルが付けられました。

• ブレークポイントはファイルごとにグループ化され、行番号または列番号で並べ替えられます。また、折りたたむこともできます。

• ブレークポイントまたはファイルにカーソルを合わせると、ブレークポイントを無効化、削除、編集するための新しいオプションが表示されます。

• ブレークポイントの編集ボタンをクリックして、ブレークポイント エディタを開きます。ここから、ブレークポイント条件を入力するか、ログポイントに切り替えることができます。

DevTools でデバッグする方法については、JavaScript デバッグ リファレンスをご覧ください。

Chromium の問題: 1407586、1402891、1402893

カスタマイズ可能なレコーダー ショートカット

キーボード ショートカットを使用すると、ユーザーフローの記録と再生をより迅速に行うことができます。

レコーダーには、ユーザーフローの迅速な記録と再生に便利なキーボード ショートカットがいくつか用意されています。

ショートカットを覚えていない場合? ボタンをクリックすると、いつでもすべてのショートカットを表示できます。

これらのショートカットは、[設定] メニューからカスタマイズすることもできます。

別のパネルで作業していて、ユーザーフロー レコーディングを開始する場合は、DevTools のコマンド メニューから [新しい録画を作成] コマンドを使用して開始します。

Chromium の問題: 1339771

Angular の構文のハイライト表示の改善

DevTools で Angular HTML テンプレートの構文ハイライト表示が強化され、コードの読み取りと構造の認識が容易になりました。

Chromium の問題: 1385374、1385678

[アプリケーション] パネルでキャッシュを整理する

[キャッシュ ストレージ] ペインは、[アプリケーション] パネルの [ストレージ] セクションに移動されました。[バック/フォワード キャッシュ] ペインは、[バックグラウンド サービス] セクションに移動されました。

Chromium の問題: 1407166

その他のハイライト

このリリースで修正された主な点は次のとおりです。

• ソースマップを読み込むときに [キャッシュを無効にする] 設定が尊重されるように DevTools が更新されました。（1407084）
• [要素] パネルで、検索結果の最初の一致する要素が自動的にフォーカスされるようになりました。（1381853）
• ソースマップとブレークポイントの信頼性を向上させるためのさまざまな修正。（508270、1403362、1403432、1396298、1395337、1405134）
• デバッグをより簡単に行うため、DevTools で非公開クラス メンバーを含む式の評価がサポートされるようになりました。（1381806）

プレビュー チャネルをダウンロードする

デフォルトの開発用ブラウザとして Chrome の Canary、Dev、Beta のいずれかを使用することを検討してください。これらのプレビュー チャンネルでは、最新の DevTools 機能にアクセスしたり、最先端のウェブ プラットフォーム API をテストしたりできます。また、ユーザーよりも早くサイトの問題を見つけることもできます。

Chrome DevTools チームに問い合わせる

次のオプションを使用して、DevTools の新機能、アップデート、その他のトピックについて話し合います。

• フィードバックや機能リクエストは crbug.com から送信してください。
• DevTools で more_vert [その他] > [ヘルプ] > [DevTools の問題を報告] を使用して、DevTools の問題を報告します。
• @ChromeDevTools にツイートします。
• DevTools の新機能に関する YouTube 動画または DevTools のヒントに関する YouTube 動画にコメントを残してください。

DevTools の新機能

DevTools の新機能シリーズで取り上げられたすべての内容のリスト。