翻訳者の technohippy さん、レビュアーの yoichiro さん、 lacolaco さん、 yoshiko-pg さんに感謝いたします。
DevTools の改善に興味がある方はサインアップして Google User Research にご協力ください。
Recorder のアップデート
リプレイの拡張機能サポート
Recorderに、拡張機能を使ってDevToolsに組み込むことができるカスタムリプレイオプションがサポートされています。
拡張機能の例を試してみてください。新しいカスタムリプレイオプションを選択し、カスタムリプレイのUIを開きましょう。
![カスタムリプレイ UI](https://wd.imgix.net/image/dPDCek3EhZgLQPGtEG3y0fTn4v82/CAQFVtHyds7ByB0YMZht.png?auto=format)
あなたのニーズに合わせてRecorderをカスタマイズし、あなたのツールと統合するために、独自の拡張機能を開発することを検討してみましょう: chrome.devtools.recorder API を調べて、[拡張機能の例] (https://github.com/puppeteer/replay/tree/main/examples/) をチェックしてみてください。
Chromium issue: 1400243.
ピアスセレクターを使用した記録
カスタム、CSS、ARIA、テキスト、XPathセレクタに加えて、ピアスセレクタを使用して記録できるようになりました。これらのセレクタはCSSのセレクタと同じように振る舞いますが、シャドウルートを貫通することもできます。
Shadow DOMが含まれるページで新規レコードを開始し、Selector types to recordで Pierce にチェックをつけます。Shadow DOMの中の要素とのインタラクションを記録し、対応するステップを検査します。
![ピアスセレクタを使った Recorder の設定; 作動中のピアスセレクタ](https://wd.imgix.net/image/NJdAV9UgKuN8AhoaPBquL7giZQo1/Spqbf2DG3Fr0D2sc1kgC.png?auto=format)
Chromium issue: 1411188.
Lighthouse の解析結果を Puppeteer のスクリプトとして書き出す
Recorder に新しいエクスポートオプション Puppeteer (including Lighthouse analysis) を導入しました。Puppeteerを使用すると、Chromeを自動化し制御することができます。Lighthouseを使用すると、ウェブサイトのパフォーマンスを把握し、改善することができます。
記録を開き、 をクリックします。Exportで新しいオプションを選択し、
.js
ファイルを保存してください。
![(Lighthouse 解析結果を含む) Puppeteer スクリプトのエクスポート](https://wd.imgix.net/image/NJdAV9UgKuN8AhoaPBquL7giZQo1/ko6OD4tgGwUxqCJScYr9.png?auto=format)
Puppeteerスクリプトを実行し、Lighthouseのレポートをflow.report.html
ファイルから取得します。
![Chrome で開いた Lighthouse のレポート](https://wd.imgix.net/image/NJdAV9UgKuN8AhoaPBquL7giZQo1/pfvZ3QX0XhhbDBxpsyBF.png?auto=format)
拡張機能を手に入れる
カスタムエクスポートオプションなど、レコーダーの体験をカスタマイズする選択肢を探しましょう。Recorderの拡張機能を入手するには、 Export > Get extensions をクリックします。
![Export ドロップダウンメニュー内の Get extensions オプション](https://wd.imgix.net/image/NJdAV9UgKuN8AhoaPBquL7giZQo1/vwgXoxR0FyArbCHvdvEY.png?auto=format)
気軽にRecorder の拡張機能のリストに、自身の拡張機能を追加してください。みなさんの拡張機能がリストに載るのを楽しみにしています!
Chromium issues: 1417104, 1413168.
Elements > Styles のアップデート
CSS のドキュメンテーション
CSSのプロパティについて、1日に何回ドキュメントを調べていますか? Elements > Styles ペインでプロパティにカーソルを合わせると、短い説明が表示されるようになりました。
![CSS プロパティ上でのドキュメントのツールチップ](https://wd.imgix.net/image/NJdAV9UgKuN8AhoaPBquL7giZQo1/v0joPkQg0NiMauy0bwwB.png?auto=format)
ツールチップには、このプロパティに関するMDN の CSS リファレンスを参照するための Learn more リンクも表示されます。
CSSをよくご存知の方は、ツールチップを煩わしいと感じるかもしれません。これらをすべて消すには、 Don't show にチェックをつけてください。
機能をオンに戻すには、 Settings > Preferences > Elements >
Show CSS documentation tooltip にチェックをつけてください。
DevToolsは、ツールチップの説明をVS Code Custom Dataから取得します。
Chromium issue: 1401107.
CSS ネスティングのサポート
Elements > Styles ペインで、CSS ネスティング 構文を認識し、入れ子のスタイルを正しい要素に適用するようになりました。
Chromium issue: 1172985.
Console でログポイントや条件付きブレークポイントをマークする
ブレークポイントUXの強化をさらに改善し、 Console がブレークポイントによって引き起こされたメッセージをマークするようになりました:
- 条件付きブレークポイント の中での
console.*
の呼び出しにはオレンジ色の疑問符?
- ログポイント メッセージにはピンクの2つのドット
..
![Console がブレークポイントによってトリガーされたメッセージを表示する方法の変更: アイコンと適切なソースリンク](https://wd.imgix.net/image/NJdAV9UgKuN8AhoaPBquL7giZQo1/5udIX9W4LFcDb3H6DuDp.png?auto=format)
Console では、 Chrome が V8 上で任意の Javascript を実行するために作成する VM<number>
スクリプトではなく、ソースファイル内のブレークポイントへの適切なアンカーリンクが表示されるようになりました。
ブレークポイントメッセージの横にあるリンクをクリックすると、ブレークポイントエディタに直接ジャンプします。
![ブレークポイントエディタを開くログポイントメッセージの横にあるアンカーリンク。](https://wd.imgix.net/image/NJdAV9UgKuN8AhoaPBquL7giZQo1/8lAz0lb168HXKvhscP2Q.png?auto=format)
Chromium issue: 1027458.
デバッグ時に無関係なスクリプトを無視する
コードの最も重要な部分に集中できるように、 Sources > Page ペインのファイルツリーから、無関係なスクリプトを Ignore List に追加できるようになりました。
スクリプトまたはフォルダを右クリックし、無視関連のオプションのいずれかを選択します。スクリプトまたはフォルダーをリストに追加したり、リストから削除したりするオプションが表示される場合があります。デバッガーはリストに追加されたスクリプトを無視し、コールスタックでそれらを省略します。
![無視に関連したオプションを持つフォルダやスクリプトのコンテキストメニュー](https://wd.imgix.net/image/NJdAV9UgKuN8AhoaPBquL7giZQo1/RrL7ZmzMjfhtH4gUW3ST.png?auto=format)
無視リストに登録されたスクリプトやフォルダは、ファイルツリーですべてグレーアウトされます。
![無視リストのスクリプトとフォルダはグレー表示されます。More オプションドロップダウンメニューの実験的なオプションを使用してそれらを非表示にすることができます。](https://wd.imgix.net/image/NJdAV9UgKuN8AhoaPBquL7giZQo1/DRI11RoakrLnwLZPOJPO.png?auto=format)
無視されたスクリプトを選択すると、 Settings > Ignore List を開く Configure ボタンが表示されます。 また、
> Hide ignore-listed sources
で、無視されたソースをファイルツリーから隠すこともできます。
Chromium issue: 883325.
JavaScript Profiler の非推奨化を開始
Chrome 58 の時点で、DevToolsチームは、最終的に JavaScript Profiler を廃止し、Node.js および Deno 開発者には Performance パネルを使用して JavaScript CPU パフォーマンスのプロファイルをしてもらうことを計画していました。
この DevTools バージョン(112)から、4段階の JavaScript Profiler 非推奨化を開始します。 JavaScript Profiler パネルに対応する警告バナーが表示されるようになりました。
![Profiler の上部にある非推奨を表示するバナー](https://wd.imgix.net/image/NJdAV9UgKuN8AhoaPBquL7giZQo1/v4S5YWGdBV3nbc3OkGZ3.png?auto=format)
CPU のプロファイルは、 Profiler の代わりに Performance パネルを使ってください。
RFC および crbug.com/1354548 で詳細を確認し、フィードバックしてください。
Chromium issue: 1417647.
コントラスト低減をエミュレートする
Rendering タブでは、 Emulate vision deficiencies に新しいオプション Reduced contrast を追加しました。このオプションを使用すると、コントラスト感度が低下している人にあなたのウェブサイトがどのように見えるかを確認できます。
![Rendering > Emulate vision deficiencies でのコントラストを下げるオプション](https://wd.imgix.net/image/NJdAV9UgKuN8AhoaPBquL7giZQo1/7qrlmuO7R47l5mytvoeQ.png?auto=format)
なお、リストオプションが更新され、そのオプションがどのような色覚異常を表すかがわかるようになりました。
DevTools を使えば、すべてのコントラストの問題を一度に見つけて修正することができます。詳しくは、 Make your website more readable を参照してください。
Chromium issues: 1412719, 1412721.
Lighthouse 10
Lighthouse パネルが Lighthouse 10.0.1 を実行するようになりました。詳しくは、 Lighthouse 10.0.1の新機能 をご覧ください。
Lighthouse > >
Legacy navigation はデフォルトで無効になっています。このオプションは、ナビゲーションモードでレガシーな Lighthouse 設定 を使用します。
![レガシーナビゲーションを無効化](https://wd.imgix.net/image/NJdAV9UgKuN8AhoaPBquL7giZQo1/mYuX9d2TFaJuWBOYGN5R.png?auto=format)
Lighthouse 10では、 Moto G Power をデフォルトのエミュレーションデバイスとして使用するようになりました。 DevTools はこのデバイスを Settings > Devices に追加しました。
![デバイスリスト中の Moto G Power](https://wd.imgix.net/image/NJdAV9UgKuN8AhoaPBquL7giZQo1/GpqmLAiuNasdRsfisVS7.png?auto=format)
Chromium issue: 772558.
その他のハイライト
今回のリリースでは、以下のような注目すべき修正が行われています:
- Sources > Breakpoints ペインで、あいまいなファイル名の横に区別できるファイルパスを表示するようになりました(1403924).
- Performance パネルのフレームチャートの Main セクション で、
CpuProfiler::StartProfiling
をProfiler Overhead
(1358602) と指定するようにしました。 - DevToolsのオートコンプリートを改善しました:
- DevTools にイベントリスナーブレークポイントを追加し、ドキュメントのピクチャーインピクチャーウィンドウ (1315352) を開く際に一時停止できるようにしました。
- DevToolsは、 Vue2 の webpack アーティファクトを JavaScript として適切に表示するワークアラウンドを設定しました([1416562](https://crbug.com/1416562))。
- Console の設定が、より良い名前になりました: Automatically expand console.trace() messages (1139616).
プレビューチャンネルのダウンロード
Chrome Canary、Dev、Betaをデフォルトの開発ブラウザとして利用することを検討してください。これらのプレビューチャンネルでは DevTools の最新機能を利用でき、最先端のウェブプラットフォーム API をテストして、ユーザーが遭遇するよりも先にあなたのサイトの問題を見つけることができます。
Chrome DevTools チームとの交流
新しい機能や、この投稿の変更、その他 DevTools に関することであれば何でも、意見があれば以下のいずれかを使用してご連絡ください。
- 私たちへの提案やフィードバックはcrbug.comから投稿してください。
- DevTools の問題は DevTools の More options
> Help > Report a DevTools issues を使用してレポートしてください。
- @ChromeDevTools 宛にTweetしてください。
- What's new in DevTools YouTubeビデオにコメントを残してください。
More DevTools features
関連する機能の完全なリストは、What's New In DevTools の英語版を参照してください。以下は、日本語に翻訳された内容の一部です。
Chrome 110
- 再読み込み時の Performance パネルのクリア
- Recorder の更新
- Recorder でのユーザーフローコードの表示およびハイライト
- レコーディング時のセレクタタイプのカスタマイズ
- レコーディング中のユーザーフローの編集
- 自動的な直接のプリティプリント
- Vue、SCSS などのシンタックスハイライトとインラインプレビューの改善
- Console での人間工学的で一貫性のあるオートコンプリート
- その他のハイライト
Chrome 109
- Recorder: ステップごとのCopy asオプション、ページ内リプレイ、ステップのコンテキストメニュー
- パフォーマンスの記録の中で実際の関数名を表示
- ConsoleとSourcesパネルでの新しいキーボードショートカット
- JavaScript デバッグの改善
- その他のハイライト
- [実験的] ブレークポイント管理の UX 改善
- [実験的] 自動的な直接のプリティプリント
Chrome 108
Chrome 107
- DevTools のキーボードショートカットのカスタマイズ
- キーボードショートカットでのライトテーマとダークテーマの切り替え
- Memory Inspector で C/C++ オブジェクトをハイライト表示
- HAR インポート時の完全な Initiator 情報をサポート
Enter
を押した時にのみ DOM 検索を開始- CSS のフレックスボックスプロパティ
align-content
にstart
とend
のアイコンを表示 - その他のハイライト
Chrome 106
- Sources パネルでの Authored / Deployed によるファイルのグループ化
- 非同期処理にリンクされたスタックトレース
- 既知のサードパーティスクリプトを自動的に無視する
- デバッグ中の改善されたコールスタック
- Sources パネルで無視リストに含まれるソースを非表示にする
- Command Menu で無視リストにあるファイルを非表示にする
- Performance パネルの新しい Interactions トラック
- Performance Insights パネルでの LCP タイミングの内訳
- Recorder パネルでの記録のデフォルト名称の自動生成
- その他のハイライト
Chrome 105
- Recorder パネルでのステップ・バイ・ステップ再生
- Recorder パネルでのマウスオーバーイベントのサポート
- Performance insight パネルに Largest Contentful Paint (LCP) を追加
- レイアウトシフトの潜在的な主要因であるテキストのフラッシュ(FOIT、FOUT)を識別
- Manifest ペインの Protocol ハンドラ
- Elements パネルの Top layer バッジ
- 実行時に WASM のデバッグ情報をアタッチ
- デバッグ中のライブ編集をサポート
- Styles ペインで @scope at-rule の閲覧と編集
- Source map の改善
- その他のハイライト
Chrome 104
- デバッグ中のフレーム再起動
- Recorder パネルでのスロー再生オプション
- Recorder パネル用の拡張機能を構築
- Sources パネルで Authored / Deployed でファイルをグループ化する
- Performance insights パネルの新しい User Timings トラック
- 要素に割り当てられたスロットの表示
- パフォーマンス計測のためのハードウェア並列度シミュレーション
- CSS 変数のオートコンプリート時に色以外の値のプレビュー
- Back/forward cache ペインでブロックしているフレームの特定
- JavaScript オブジェクトのオートコンプリート候補の改善
- ソースマップの改善
- その他のハイライト
Chrome 103
- Recorder パネルでのダブルクリックイベントや右クリックイベントのキャプチャ
- Lighthouse パネルでの新しいタイムスパンモードとスナップショットモード
- Performance Insights パネルでの改善されたズーム制御
- パフォーマンスレコーディングの削除確認
- Element パネルでのペインの並び替え
- ブラウザ外でのカラーピッキング
- デバッグ中の改善されたインラインでの値のプレビュー
- 仮想認証器での大きな blob サポート
- Sources パネルでの新しいキーボードショートカット
- ソースマップの改善
Chrome 102
- プレビュー機能: 新しいパフォーマンスインサイトパネル
- ライトテーマとダークテーマをエミュレートする新しいショートカット
- Network Preview タブのセキュリティ改善
- ブレークポイントのリロード改善
- コンソールの更新
- ユーザーフローレコーディングを開始時にキャンセル
- Styles ペインで継承されたハイライト疑似要素を表示
- その他のハイライト
- [実験的] CSS の変更をコピー
- [実験的] ブラウザ外の色を抽出
Chrome 101
- 記録されたユーザーフローをJSONファイルとしてインポート/エクスポート
- Styles ペインでカスケードレイヤーを表示する
- hwb() カラー関数のサポート
- プライベートプロパティの表示を改善
- その他のハイライト
- [実験的] Lighthouse パネルに新しいタイムスパンとスナップショットのモードを追加
Chrome 100
- Styles ペインでの @supports アットルールの表示と編集
- デフォルトで共通セレクタをサポート
- レコーディングのセレクタをカスタマイズする
- レコーディングのリネーム
- ホバーでクラスや関数のプロパティをプレビューする
- Performance パネルでの Partially presented frames
- その他のハイライト
Chrome 99
- WebSocketリクエスト数の制限
- Application パネル内に新しく追加されたReporting API ペイン
- Recorder パネルに要素が可視/クリック可能になるまで待機する機能が追加
- コンソールのスタイル設定、フォーマット、フィルタの改善
- ソースマップファイルを使用した Chrome 拡張機能のデバッグ
- Sources パネルのソースフォルダツリーの改善
- Sources パネルにワーカーのソースファイルを表示
- Chrome の自動ダークテーマの更新
- タッチ操作で使いやすいカラーピッカーとスプリットペイン
- その他のハイライト
Chrome 98
- プレビュー機能: フルページアクセシビリティツリー
- Changes タブで変更点のよりわかりやすい表示
- ユーザーフローレコーディングのタイムアウト時間を長く設定する
- Back/forward cache タブでページがキャッシュ可能であることを確認する
- 新しい Properties ペインのフィルター
- CSS の force-colors メディア機能のエミュレート
- ホバー時にルーラーを表示するコマンド
- Flexbox エディターで
row-reverse
とcolumn-reverse
をサポート - XHR のリプレイと全検索結果の展開に新しいキーボードショートカットを追加
- Lighthouse パネルの Lighthouse 9
- Sources パネルの改善
- その他のハイライト
- [実験的] Reporting API ペインに Endpoints を追加
Chrome 97
- プレビュー機能: 新しい Recorder パネル
- デバイスモードでのデバイス一覧の更新
- Edit as HTML でのオートコンプリート
- 改善されたコードデバッグ体験
- デバイスを横断した DevTools 設定の同期
Chrome 96
- プレビュー機能: 新しい CSS Overview パネル
- CSS の length の編集とコピーの挙動の復旧と改善
- CSS の prefers-contrast メディア機能のエミュレート
- Chrome の Auto Dark Theme 機能のエミュレート
- Styles ペインで JavaScript として宣言をコピー
- Network パネルの新しい Payload タブ
- Properties ペインのプロパティ表示の改善
- コンソールで CORS エラーを隠すオプション
- Console での適切な
Intl
オブジェクトのプレビューと評価 - 一貫性のある async スタックトレース
- Console のサイドバーの維持
- Application パネルの Application cache ペインの廃止
- [実験的] Application パネルの新しい Reporting API ペイン
Chrome 95
- 新しいCSSの長さ編集ツール
- Issues タブで問題を隠す
- プロパティの表示の改善
- Lighthouse 8.4 が Lighthouse パネルに
- Sources パネルでのスニペットの並べ替え
- 翻訳されたリリースノートへの新しいリンクと翻訳バグの報告
- DevTools Command MenuのUI改善
Chrome 94
- 好みの言語での DevTools の利用
- 新しく Nest Hub デバイスがデバイスリストに
- フレーム詳細ビューの Origin trials
- 新しい CSS コンテナクエリバッジ
- ネットワークフィルタを反転するための新しいチェックボックス
- Console サイドバーが今後非推奨に
- Issue タブや Network パネルでの未加工の
Set-Cookie
ヘッダーの表示 - Console での自身のプロパティとしてのネイティブアクセサの一貫した表示
- #sourceURL を使ったインラインスクリプトの適切なエラースタックトレース
- Computed ペインでのカラーフォーマットの変更
- カスタムツールチップをネイティブの HTML ツールチップに置き換え
- [実験的] Issues タブでの問題の非表示
Chrome 93
公開日 • 記事を改善する