このページは Cloud Translation API によって翻訳されました。

DevTools の新機能（Chrome 111）

Jecelyn Yeen

[Styles] ペインでの HD カラーのデバッグ

新しい CSS の色タイプとスペースがウェブで利用できるようになります。同様に、DevTools に、高画質のカラーの作成、変換、デバッグに役立つ新しいツールが導入されていることも、非常にエキサイティングです。

CSS Color Level 4 仕様に記載されているように、[Styles] ペインで新たに 12 の色空間と 7 つの新しい色域がサポートされるようになりました。ウェブで利用可能なカラーオプションについて詳しくは、High Definition CSS Color Guide をご覧ください。

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

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

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

DevTools では、色形式間の色の変換がサポートされています。[Change Color Format] アイコンを使用して変換のポップアップにアクセスするか、[Styles] ペインで 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 の強化

デザインが一新された [Breakpoints] ペインでは、よく使用する機能（特にブレークポイントの無効化、編集、削除）にすばやくアクセスできます。

ハイライトは次のとおりです。 - 一時停止の例外オプションの両方を [Breakpoints] ペインに移動し、わかりやすいようにテキストでラベルを付けました。一時停止の例外オプション。

ブレークポイントはファイルごとにグループ化され、行番号または列番号順に並べられ、閉じることができます。
ブレークポイントまたはファイルにカーソルを合わせたときに、ブレークポイントを無効化、削除、編集するための新しいオプションが追加されました。
[Edit Breakpoint] ボタンをクリックして、ブレークポイントエディタを開きます。ここからブレークポイント条件を入力したり、ログポイントに切り替えたりできます。

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

Chromium に関する問題: 1407586、1402891、1402893

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

キーボードショートカットを使用すると、ユーザーフローをすばやく記録して再生できます。

レコーダーに、ユーザーフローをすばやく記録および再生するための便利なキーボードショートカットがいくつか導入されました。

ショートカットを思い出せない場合は、? ボタンをクリックすると、いつでもすべてのショートカットを表示できます。レコーダーのショートカット。

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

別のパネルで作業していて、ユーザーフローの記録を開始する場合は、DevTools のコマンドメニューから [Create a new recording] を選択してください。新しい録画コマンドを作成します。

Chromium の問題: 1339771

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

DevTools では、Angular HTML テンプレートの構文のハイライト表示が強化され、コードを読みやすくなり、その構造を認識しやすくなります。 Angular HTML テンプレートの構文ハイライト表示。

Chromium に関する問題: 1385374、1385678

[Application] パネルでキャッシュを再編成する

[Cache Storage] ペインは [Application] パネルの [Storage] セクションに表示され、[バックフォワードキャッシュ] ペインは [Background Services] セクションに移動しました。 [Application] パネルのキャッシュ。

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 の問題を報告するには、DevTools でその他のオプション アイコン > [ヘルプ] > [DevTools の問題を報告する] を選択します。
@ChromeDevTools にツイートします。
「DevTools の新機能」の YouTube 動画または DevTools のヒントの YouTube 動画でコメントを残してください。