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

DevTools の新機能（Chrome 95）

Jecelyn Yeen

新しい CSS 長さ作成ツール

DevTools により、CSS の長さを簡単かつ柔軟に更新できるようになりました。

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

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

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

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

Chromium に関する問題: 1126178、1172993

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

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

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

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

[非表示の問題] ペイン

Chromium の問題: 1175722

プロパティの表示の改善

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

最初に、コンソール、[ソース] パネル、[プロパティ] ペインで、自身のプロパティを太字にしたり並べ替えたりします。
[Properties] ペインで、プロパティ表示をフラット化します。

たとえば、以下のスニペットは、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

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

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

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

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

Chromium の問題: 1243976

翻訳済みのリリースノートへの新しいリンクと変換に関するバグの報告

[What’s new] タブから、DevTools リリースノートをロシア語、中国語、スペイン語、日本語、ポルトガル語、韓国語の 6 言語で閲覧できるようになりました。

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

翻訳済みのリリースノートへの新しいリンクと変換に関するバグの報告

Chromium に関する問題: 1246245、1245481

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

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

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

Chromium の問題: 1201997

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

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

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

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

crbug.com からご提案やフィードバックをお送りください。
DevTools の問題を報告するには、DevTools でその他のオプション アイコン > [ヘルプ] > [DevTools の問題を報告する] を選択します。
@ChromeDevTools にツイートします。
「DevTools の新機能」の YouTube 動画または DevTools のヒントの YouTube 動画でコメントを残してください。