DevTools の新機能（Chrome 95）

Jecelyn Yeen

新しい CSS 長さオーサリング ツール

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

[スタイル] ペインで、長さのある CSS プロパティ（height、padding など）を探します。

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

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

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

Chromium の問題: 1126178、1172993

[問題] タブで問題を非表示にする

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

[問題] タブで、非表示にする問題にカーソルを合わせます。その他アイコン   もっと見る   > [Hide issues like this] をクリックします。

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

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

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

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 など）で役立ちます。

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

これらの変更に加えて、[プロパティ] ペインのプロパティもフラット化され、特に ウェブ コンポーネントの 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 の新機能シリーズで取り上げられたすべての内容の一覧。