DevTools の新機能 (Chrome 102)

Published on Updated on

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

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

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

プレビュー機能: 新しいパフォーマンスインサイトパネル

Performance insights パネルを使用して、ウェブサイトのパフォーマンスに関する実用的でユースケース駆動の洞察を得ることができます。

このパネルを開き、あなた自身のユースケースに基づいて新しく記録を開始します。例えば、このデモページのページ読み込みについて測定してみましょう。

新しいパフォーマンスインサイトパネル

記録が完了すると、Insights ペインにパフォーマンスインサイトが表示されます。それぞれのインサイトアイテム(例えば、Render blocking request や layout shift)をクリックして、問題点と考えられる対策を確認してください。

Performance insights パネルのドキュメントを使用すると、ステップ・バイ・ステップのチュートリアルを通じてさらに学習を深めることができます。

この機能は、(特にパフォーマンスの専門家ではない)ウェブ開発者が潜在的なパフォーマンス上の問題を見つけ出して修正できるようにするためのプレビュー機能です。私たちのチームは積極的にこの機能の開発を進めていて、これからの機能追加のために皆さんのフィードバックを待っています。

Chromium issue: 1270700

ライトテーマとダークテーマをエミュレートする新しいショートカット

Styles ペインで新しいショートカットを使用して、ライトテーマとダークテーマ(CSSメディア特性の prefers-color-scheme)をより素早くエミュレートできるようになりました。

これまでは Rendering タブでテーマをエミュレートするためにより多くの手順が必要でした。

ライトテーマとダークテーマをエミュレートする新しいショートカット

Chromium issue: 1314299

Network Preview タブのセキュリティ改善

DevTools は Network パネルの Preview タブに Content Security Policy(CSP)を適用するようになりました。

例えば、最初のスクリーンショットは混合コンテンツを含むページを示しています。このページはセキュアな HTTPS 接続を使用して読み込まれますが、スタイルシートはセキュアではない HTTP 接続が使用されています。

デフォルトではブラウザはスタイルシートのリクエストをブロックします。しかし、これまではこのページが Network パネルの Preview タブで開かれたときには、スタイルシートがブロックされませんでした(そのため背景が赤色に変わります)。これが期待どおりにブロックされるようになります(2枚目のスクリーンショット)。

Network Previewタブのセキュリティ改善

Chromium issue: 833147

ブレークポイントのリロード改善

デバッガはブレークポイントでリロードするとスクリプトの実行を停止するようになりました。

例えば、これまではこのReact デモReactDOM ブレークポイントを設定してリロードすると、スクリプトが無限ループしていました。Sources パネルは無限ループのせいで動かなくなります。

JavaScriptの実行を続けることは多くの開発者にとってトラブルの元で、不正な状態のまま描画が残ることもあります。今回の変更により Firefox のような他のブラウザとデバッグ時の動作が等しくなります。

ブレークポイントのリロード改善

Chromium issues: 1014415, 1004038, 1112863, 1134899

コンソールの更新

コンソールでスクリプトの実行エラーを処理

コンソールでスクリプトを評価している最中のエラーが、window オブジェクトの "error" イベントとして発火され、window.onerror に捕捉されるような、適切なエラーイベントを発生させるようになりました。

コンソールでスクリプトの実行エラーを処理

Chromium issue: 1295750

Enter キーでlive expressionを確定

live expressionの入力を終えたときに、Enter をクリックして確定できます。これまでは、Enter を押下すると新しい行が追加されていました。以前の動作は DevTools の他の部分と一貫性がありません。

live expression エディタで新しい行を追加するには、代わりに Shift + Enter を使用します。

Enter キーでlive expressionを確定

Chromium issue: 1260744

ユーザーフローレコーディングを開始時にキャンセル

ユーザーフローレコーディングの開始中にレコーディングをキャンセルできます。これまでは、レコーディングをキャンセルする手段がありませんでした。

ユーザーフローレコーディングを開始時にキャンセル

Chromium issue: 1257499

Styles ペインで継承されたハイライト疑似要素を表示

Styles ペインで継承されたハイライト疑似要素(例: ::selection::spelling-error::grammar-error::highlight)が確認できます。これまでは、これらのルールは表示されませんでした。

こちらの仕様に記載された通り、複数のスタイルが衝突すると、優先されるスタイルはcascadeが決定します。この新機能はこれらのルールの継承と優先度の理解を助けてくれるでしょう。

現時点では、この機能を有効にするには --enable-blink-features=HighlightInheritance フラグを有効にして Chrome を起動する必要があります。

Styles ペインで継承されたハイライト疑似要素を表示

Chromium issue: 1024156

その他のハイライト

今回のリリースには、以下のような注目すべき修正点があります。

  • Properties ペインはデフォルトでアクセサプロパティを値付きで表示するようになりました。以前は、不具合で隠されていました。(1309087
  • Styles ペインは上書きされた @support ルールを取り消し線付きで適切に表示するようになりました。以前は、それらのルールに取り消し線がありませんでした。(1298025
  • CSS を編集するときに複数の空行が発生する原因になっていた Sources パネルの CSS フォーマットロジックが修正されました。(1309588
  • 循環オブジェクトを無限に辿り続けないように、Console のオブジェクトの Expand recursively オプションの最大値が100に制限されます。(1272450

[実験的] CSS の変更をコピー

この実験的機能を有効にするには、Settings > Experiments にある Sync CSS changes in the Styles pane をチェックしてください。

この実験的機能を使用すると、Styles ペインはあなたの CSS の変更を緑色にハイライトします。コピーするには変更されたルール上にマウスを重ね、その隣にある新しいコピーボタンをクリックします。

それ以外にも、任意のルールを右クリックして、Copy all CSS changes を選択すると、宣言全体に渡る CSS の変更をすべてコピーできます。

CSS の変更を簡単に追跡してコピーできるように、新しい Copy ボタンは Changes タブにも追加されました。

CSS の変更をコピー

Chromium issue: 1268754

[実験的] ブラウザ外の色を抽出

この実験的機能を有効にするには、Settings > Experiments にある Enable color picking outside the browser window をチェックしてください。

この実験的機能を有効にすると、カラーピッカーでブラウザ外の色を抽出できます。これまでは、ブラウザ内の色しか抽出できませんでした。

カラーピッカーを開くには、Styles ペインで任意のカラープレビューをクリックしてください。スポイトを使用して好きな場所の色を抽出できます。

ブラウザ外の色を抽出

Chromium issue: 1245191

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

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 102

Chrome 101

Chrome 100

Chrome 99

Chrome 98

Chrome 97

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.