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 をロギングしてみてください。独自のプロパティが太字で表示され、最初に並べ替えられるようになりました。この変更により、特にプロパティを継承するウェブ 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

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

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

スニペット機能を使用して、コマンドをすばやく実行します。ヒントについては、こちらの動画をご覧ください。

[Sources] パネルでスニペットを並べ替える

Chromium の問題: 1243976

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

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

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

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

Chromium の問題: 1246245、1245481

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

コマンド メニューでファイルを検索するのが難しいですか？コマンド メニューのユーザー インターフェースが強化されました。

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

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

コマンド メニュー

Chromium の問題: 1201997

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

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

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

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

DevTools の新機能

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