DevTools の新機能(Chrome 95)

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

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

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

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

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

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

Chromium の問題: 11261781172993

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

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

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

問題メニューを非表示

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

[非表示の問題] ペイン

Chromium の問題: 1175722

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

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

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

たとえば、以下のスニペットでは、useraccess という 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 のロギングを試します。所有プロパティが太字で、先頭に並べ替えられるようになりました。この変更により、特にプロパティを継承するウェブ APIURL など)で、カスタム プロパティを見つけやすくなります。

所有するプロパティを太字にして最初に並べ替える

今回の変更とは別に、[プロパティ] ペインのプロパティもフラット化され、特にウェブ コンポーネントでの DOM プロパティのデバッグが容易になりました。

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

Chromium の問題: 10768201119900

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 の問題: 12462451245481

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

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

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

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

コマンド メニュー

Chromium の問題: 1201997

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

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

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

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

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

DevTools の新機能

DevTools の新機能」シリーズで紹介されているすべてのリスト。