DevTools の新機能（Chrome 95）

Jecelyn Yeen

新しい CSS 寸法オーサリング ツール

DevTools に、CSS の寸法をより簡単かつ柔軟に更新できる方法が追加されました。

[スタイル] ペインで、寸法を指定する CSS プロパティ（height、padding など）を探します。

単位タイプにカーソルを合わせると、単位タイプに下線が引かれます。クリックして、プルダウンから単位の種類を選択します。

単位値にカーソルを合わせると、マウスポインタが水平カーソルに変わります。値を増減するには、水平方向にドラッグします。値を 10 ずつ調整するには、ドラッグ時に Shift キーを押します。

単位の値はテキストとして編集できます。値をクリックして編集を開始してください。

Chromium の問題: 1126178、1172993

[問題] タブでの問題の非表示化

[問題] タブで特定の問題を非表示にして、重要な問題のみに集中できるようになりました。

[問題] タブで、非表示にする問題にカーソルを合わせます。その他 もっと見る > [類似の問題を非表示] をクリックします。

問題の表示切り替えメニュー

非表示にした問題はすべて、[非表示にした問題] ペインに追加されます。ペインを開きます。非表示にした問題をすべて再表示することも、選択した問題を再表示することもできます。

[非表示にした問題] ペイン

Chromium の問題: 1175722

プロパティの表示を改善

DevTools では、プロパティの表示を次のように改善しています。

  • [コンソール]、[ソース] パネル、[プロパティ] ペインでは、常に独自のプロパティを最初に太字で表示し、並べ替えます。
  • [プロパティ] ペインに表示されるプロパティをフラット化します。

たとえば、次のスニペットは、2 つの独自のプロパティ（user と access）を持つ URL オブジェクト link を作成し、継承されたプロパティ search の値を更新します。

/* example.js */

const link = new URL('https://goo.gle/devtools-blog');

link.user = { id: 1, name: 'Jane Doe' };
link.access = 'admin';
link.search = `?access=${link.access}`;

コンソールで link を出力してみてください。独自のプロパティが太字で表示され、最初に並べ替えられるようになりました。これらの変更により、カスタム プロパティを簡単に見つけられるようになります。特に、多くの継承プロパティを持つ Web API（URL など）で便利な機能です。

独自のプロパティは太字で最初に並べ替えられる

これらの変更に加えて、[プロパティ] ペインのプロパティもフラット化され、特に Web コンポーネントの DOM プロパティのデバッグ エクスペリエンスが向上しました。

プロパティをフラット化する

Chromium の問題: 1076820、1119900

Lighthouse パネルの Lighthouse 8.4

Lighthouse パネルで Lighthouse 8.4 が実行されるようになりました。Lighthouse で、Largest Contentful Paint（LCP）要素が遅延読み込みされた画像であるかどうかが検出され、その要素から loading 属性を削除することが推奨されるようになりました。

アップデートの詳細については、Lighthouse 8.4 の新機能をご覧ください。

Lighthouse レポートの遅延読み込みされた LCP 監査

Chromium の問題: 772558

[ソース] パネルでのスニペットの並べ替え

[ソース] パネルの [スニペット] ペインにあるスニペットがアルファベット順に並べ替えられるようになりました。以前は、並べ替えられていませんでした。

スニペット機能を利用して、ココマンドをより迅速に実行できます。こちらの動画でヒントをご覧ください。

[ソース] パネルでのスニペットの並べ替え

Chromium の問題: 1243976

翻訳されたリリースノートへの新しいリンクと翻訳バグの報告

[新機能] タブから、ロシア語、中国語、スペイン語、日本語、ポルトガル語、韓国語の 6 つの言語で DevTools のリリースノートを読むことができるようになりました。

Chrome 94 以降では、DevTools で優先言語を設定できます。翻訳に問題が見つかった場合は、その他のオプション > [ヘルプ] > [翻訳バグを報告] から翻訳の問題を報告して、改善にご協力ください。

翻訳されたリリースノートへの新しいリンクと翻訳バグの報告

Chromium の問題: 1246245、1245481

DevTools コマンド メニューの UI の改善

コマンド メニューでファイルを探すのが難しいと感じたことはありませんか？このたび、コマンド メニューのユーザー インターフェースが強化されました。

コマンド メニューを開き、キーボード ショートカット Ctrl+P（Windows と Linux の場合）または Command+P（MacOS の場合）を使用してファイルを検索します。

コマンド メニューの UI の改善は引き続き行われています。今後のアップデートにご期待ください。

コマンド メニュー

Chromium の問題: 1201997

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

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

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

DevTools の新機能、更新、その他の関連事項について話し合うには、次のオプションを使用します。

DevTools の新機能

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