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

DevTools の新機能（Chrome 95）

Jecelyn Yeen

CSS の長さを作成する新しいツール

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

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

ユニットタイプにカーソルを合わせると、ユニットタイプに下線が表示されます。これをクリックして、プルダウンからユニットタイプを選択します。

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

単位の値をテキストとして編集することは引き続き可能です。値をクリックして編集を開始します。

Chromium の問題: 1126178、1172993

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

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

[問題] タブで、非表示にする問題にカーソルを合わせます。[その他のオプション] > [このような問題を非表示] をクリックします。

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

[非表示の問題] ペイン

Chromium の問題: 1175722

プロパティの表示を改善しました

DevTools では、次の方法でプロパティの表示を改善できます。

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

たとえば、以下のスニペットでは、user と access という 2 つの独自のプロパティを持つ 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 Containful Paint（LCP）要素が遅延読み込みされた画像であるかどうかが検出され、そこから loading 属性を削除することが推奨されます。

更新内容について詳しくは、Lighthouse 8.4 の新機能をご覧ください。

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

Chromium の問題: 772558

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

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

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

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

Chromium の問題: 1243976

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

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

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

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

Chromium の問題: 1246245、1245481

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

Windows と Linux では Command メニューを開いて、キーボードショートカットの Ctrl+P キー、MacOS では Command+P キーを使ってファイルを検索します。

コマンドメニューの UI は現在も改善中です。今後の情報にご期待ください。

Chromium の問題: 1201997

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

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

Chrome DevTools チームへのお問い合わせ

以下のオプションを使用して、投稿の新機能や変更点、または DevTools に関連するその他のことについて話し合います。

ご提案やフィードバックは、crbug.com からお送りください。
DevTools の [More options] > [Help] > [Report a DevTools issues] を使用して、DevTools の問題を報告します。
@ChromeDevTools でツイートしてください。
DevTools の新機能に関する YouTube 動画または DevTools のヒントの YouTube 動画にコメントを残してください。