DevTools の新機能（Chrome 111）

Jecelyn Yeen

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

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

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

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

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

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

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

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

また、新しいショートカットを使用して、画面から色を選択することもできます。スポイトを有効にするには 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 テンプレートの構文ハイライト表示が強化され、コードの読み取りと構造の認識が容易になりました。 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 の新機能、アップデート、その他のトピックについて話し合います。

DevTools の新機能

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