DevTools の新機能 (Chrome 95)

Published on Updated on

Translated to: English, Español, Português, 한국어, 中文, Pусский

翻訳者の lacolaco さん、レビュアーの technohippy さんと yoichiro さんに感謝いたします。

DevTools の改善に興味がある方はサインアップして Google User Research にご協力ください。

新しいCSSの長さ編集ツール

CSSの長さを簡単かつ柔軟に更新する方法を DevTools に追加しました。

Styles ペインで、長さのあるCSSプロパティ(例:heightpadding)を探してください。

単位の上にカーソルを置くと、下線が引かれていることに気づくでしょう。それをクリックして、ドロップダウンから単位を選択します。

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

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

Chromium issues: 1126178, 1172993

Issues タブで問題を隠す

Issues タブで特定の問題を非表示にして、自分にとって重要な問題だけに集中できるようになりました。

Issues タブで、非表示にしたい問題にマウスオーバーします。 More options   More   > Hide issues like this をクリックしましょう。

Hide issues menu

すべての隠された問題は Hidden issues ペインに追加されます。ペインを展開して、すべての隠された問題、または選択した問題の非表示を解除できます。

Hidden issues ペイン

Chromium issue: 1175722

プロパティの表示の改善

DevTools では、以下のようにしてプロパティの表示を改善しています。

  • ConsoleSource パネルと Properties ペインでは、常に自身のプロパティを太字にして先頭に並べます。
  • Properties ペインのプロパティ表示をフラットにします。

例えば、以下のスニペットでは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}`;

Consolelink をログに出力してみてください。独自のプロパティが太字になり、最初にソートされるようになりました。この変更により、特に多くの継承されたプロパティを持つ Web API (例: URL) のカスタムプロパティを見つけやすくなりました。

独自のプロパティは太字で先頭に並びます

これらの変更以外にも、特にWebコンポーネントのために、DOMプロパティのデバッグがしやすくなるよう Properties ペインのプロパティがフラット化されました。

Flatten properties

Chromium issues: 1076820, 1119900

Lighthouse 8.4 が Lighthouse パネルに

Lighthouse パネルに Lighthouse 8.4 が搭載されました。 Lighthouse は Largest Contentful Paint (LCP) 要素が遅延読み込みされた画像であるかどうかを検出し、その要素から loading 属性を削除することを推奨するようになりました。

アップデートの詳細は、 What's new in Lighthouse 8.4 をご確認ください。

Lighthouse レポートにおける遅延読み込みされた LCP の監査

Chromium issue: 772558

Sources パネルでのスニペットの並べ替え

Sources パネルの Snippets ペインにあるスニペットが、アルファベット順にソートされるようになりました。以前はソートされていませんでした。

スニペット機能を活用して、コマンドを素早く実行しましょう。このビデオでヒントをご覧ください!

Sources パネルでのスニペットの並び

Chromium issue: 1243976

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

6つの言語で DevTools のリリースノートを What’s new タブからクリックしてご覧いただけるようになりました - ロシア語中国語スペイン語日本語ポルトガル語韓国語

Chrome 94以降、 DevTools で優先言語の設定ができるようになりました。翻訳に関する問題を発見された場合は、 More options > Help > Report a translation bug翻訳の問題を報告して、改善にご協力ください。

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

Chromium issues: 1246245, 1245481

DevTools Command MenuのUI改善

Command Menu でファイルを検索するのに苦労したことはありませんか?そんなあなたに朗報です! Command Menu のユーザーインターフェースが強化されました。

Windows と Linux では Control+Pで、 MacOS では Command+P のキーボードショートカットでファイルを検索するための Command Menu を開きます。

Command Menu のUI改善は現在も継続中です。さらなるアップデートをお楽しみに!

Command Menu

Chromium issue: 1201997

プレビューチャンネルのダウンロード

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

Chrome DevTools チームとの交流

新しい機能や、この投稿の変更、その他 DevTools に関することであれば何でも、意見があれば以下のいずれかを使用してご連絡ください。

  • 私たちへの提案やフィードバックはcrbug.comから投稿してください。
  • DevTools の問題は DevTools の More options   More   > Help > Report a DevTools issues を使用してレポートしてください。
  • @ChromeDevTools 宛にTweetしてください。
  • What's new in DevTools YouTubeビデオにコメントを残してください。

More DevTools features

関連する機能の完全なリストは、What's New In DevTools の英語版を参照してください。以下は、日本語に翻訳された内容の一部です。

Chrome 96

Chrome 95

Chrome 94

Chrome 93

Last updated: Improve article

We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.