DevTools の新機能 (Chrome 103)

Published on Updated on

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

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

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

Recorder パネルでのダブルクリックイベントや右クリックイベントのキャプチャ

Recorder パネルにて、ダブルクリックイベントや右クリックイベントをキャプチャできるようになりました。

Recorder パネルでのダブルクリックイベントや右クリックイベントのキャプチャ

この では、以下の手順を行うために、 レコーディング を開始しています。

  • カードをダブルクリックして拡大します
  • カードを右クリックして、コンテキストメニューからアクションを選択します

Recorder がこれらのイベントをどのようにキャッチしたかを知るために、以下の手順を行います:

  • Double-clicktype: doubleClick としてキャプチャされます。
  • Right-click イベントは type: click としてキャプチャされますが、 button プロパティは secondary に設定されます。通常のマウスクリックの button 値は、 primary です。

Chromium issues: 1300839, 1322879, 1299701, 1323688

Lighthouse パネルでの新しいタイムスパンモードとスナップショットモード

Lighthouseを使用して、ページの読み込みを超えたウェブサイトのパフォーマンスを測定できるようになりました。

Lighthouse パネルでの新しいタイムスパンモードとスナップショットモード

Lighthouse パネルは、ユーザーフローの計測に対して、3 つのモードをサポートするようになりました:

  • Navigation レポートは、単一ページの読み込みを分析します。 Navigation は最も一般的なレポートタイプです。現在のバージョンより前のすべての Lighthouse レポートは、 Navigation レポートです。
  • Timespans レポートは、通常はユーザーの操作を含む任意の期間を分析します。
  • Snapshots レポートは、特定の状態でのページを分析します。通常は、ユーザーがページを操作した後です。

たとえば、この デモページ で、カートにアイテムを追加するパフォーマンスを測定してみましょう。 Timespan モードを選択し、 Start timespan をクリックします。スクロールして、カートにいくつかのアイテムを追加します。完了したら、 End timespan をクリックして、ユーザーインタラクションの Lighthouse レポートを生成します。

タイムスパンモード

各モード固有の使用例、利点、制限については、 User flows in Lighthouse をご覧ください。

Chromium issue: 1291284

Performance Insights アップデート

Performance Insights パネルでの改善されたズーム制御

DevTools は、再生ヘッドの位置ではなく、マウスカーソルに基づいてズームインするようになりました。最新のカーソルベースのズームを使用すると、マウスをトラック内の任意の場所に移動して ズームイン することで、すぐに目的のエリアに移動することができます。

パネルを使用して実用的なインサイトを取得し、ウェブサイトのパフォーマンスを向上させる方法については、 Performance Insights をご覧ください。

Chromium issue: 1313382

パフォーマンスレコーディングの削除確認

DevToolsは、 パフォーマンス記録の削除 の前に、確認ダイアログを表示するようになりました。

パフォーマンスレコーディングの削除確認

Chromium issue: 1318087

Element パネルでのペインの並び替え

好みに応じて、 Element パネルのペインを並べ替えることができるようになりました。

たとえば、狭い画面で DevTools を開くと、 Accessibility ペインが Show more ボタンの下で非表示になります。アクセシビリティの問題を頻繁にデバッグしたいときは、ペインを前面にドラッグして簡単にアクセスできるようになりました。

Element パネルでのペインの並び替え

Chromium issue: 1146146

ブラウザ外でのカラーピッキング

DevToolsは、ブラウザの外部での色の選択をサポートするようになりました。以前は、ブラウザ内でしか色を選択できませんでした。

Styles ペインで、任意のカラープレビューをクリックして、カラーピッカーを開きます。スポイトを使用して、どこからでも色を選択できます。

ブラウザ外でのカラーピッキング

Chromium issue: 1245191

改善されたデバッグ中のインライン値プレビュー

デバッガーは、インライン値のプレビューを正しく表示するようになりました。

この例では、double 関数に入力パラメーター a と変数 x があります。 return 行にブレークポイントを設定してコードを実行します。インラインプレビューには、値 ax が正しく表示されます。以前は、デバッガーはインラインプレビューに値 x を表示しませんでした。

デバッグ中の改善されたインラインでの値のプレビュー

Chromium issue: 1316340

仮想認証器での大きな blob サポート

WebAuthn タブに、仮想認証器向けの新しい Supports large blob チェックボックスが追加されました。

このチェックボックスは、デフォルトで無効になっています。レジデントキーをサポートする ctap2 プロトコルを使用する認証器に対してのみ有効にできます。

仮想認証器での大きな blob サポート

Chromium issue: 1321803

Sources パネルでの新しいキーボードショートカット

2 つの新しいキーボードショートカットが Sources パネルで利用できるようになりました。

  • Control/Command + Shift + Ynavigation サイドバー(左)をトグルします。
  • Control/Command + Shift + Hdebugger サイドバー(右)をトグルします。
Sources パネルでの新しいキーボードショートカット

Chromium issues: 1226363

ソースマップの改善

以前は、開発者は以下の間でランダムな障害を経験していました:

  • Codepen の例を使用したデバッグ
  • Codepen の例にてパフォーマンスの問題に関するソースの場所の特定
  • React DevTools が有効になっているが Component タブがない

全体的なデバッグ体験を向上させるためのソースマップのいくつかの修正を次に示します:

  • インラインスクリプトとソースの場所における、位置とオフセットの間の正しいマッピング
  • フレームのテキストの場所にフォールバック情報を使用する
  • フレームの URL を使用して、相対 URL を適切に解決する

Chromium issues: 1319828, 1318635, 1305475

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

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 104

Chrome 103

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.