DevTools の新機能 (Chrome 112)

公開日 2023年3月9日木曜日

翻訳先言語： English, Português, 中文

Jecelyn Yeen

Google で Chrome DevTools に取り組んでいる Developer Advocate です。

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

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

Recorder のアップデート

リプレイの拡張機能サポート

Recorderに、拡張機能を使ってDevToolsに組み込むことができるカスタムリプレイオプションがサポートされています。

拡張機能の例を試してみてください。新しいカスタムリプレイオプションを選択し、カスタムリプレイのUIを開きましょう。

あなたのニーズに合わせて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の中の要素とのインタラクションを記録し、対応するステップを検査します。

Chromium issue: 1411188.

Lighthouse の解析結果を Puppeteer のスクリプトとして書き出す

Recorder に新しいエクスポートオプション Puppeteer (including Lighthouse analysis) を導入しました。Puppeteerを使用すると、Chromeを自動化し制御することができます。Lighthouseを使用すると、ウェブサイトのパフォーマンスを把握し、改善することができます。

記録を開き、をクリックします。Exportで新しいオプションを選択し、.jsファイルを保存してください。

(Lighthouse 解析結果を含む) Puppeteer スクリプトのエクスポート

Puppeteerスクリプトを実行し、Lighthouseのレポートをflow.report.htmlファイルから取得します。

拡張機能を手に入れる

カスタムエクスポートオプションなど、レコーダーの体験をカスタマイズする選択肢を探しましょう。Recorderの拡張機能を入手するには、 Export > Get extensions をクリックします。

Export ドロップダウンメニュー内の Get extensions オプション

気軽にRecorder の拡張機能のリストに、自身の拡張機能を追加してください。みなさんの拡張機能がリストに載るのを楽しみにしています！

Chromium issues: 1417104, 1413168.

Elements > Styles のアップデート

CSS のドキュメンテーション

CSSのプロパティについて、1日に何回ドキュメントを調べていますか？ Elements > Styles ペインでプロパティにカーソルを合わせると、短い説明が表示されるようになりました。

ツールチップには、このプロパティに関する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 がブレークポイントによってトリガーされたメッセージを表示する方法の変更: アイコンと適切なソースリンク

Console では、 Chrome が V8 上で任意の Javascript を実行するために作成する VM<number> スクリプトではなく、ソースファイル内のブレークポイントへの適切なアンカーリンクが表示されるようになりました。

ブレークポイントメッセージの横にあるリンクをクリックすると、ブレークポイントエディタに直接ジャンプします。

Chromium issue: 1027458.

デバッグ時に無関係なスクリプトを無視する

コードの最も重要な部分に集中できるように、 Sources > Page ペインのファイルツリーから、無関係なスクリプトを Ignore List に追加できるようになりました。

スクリプトまたはフォルダを右クリックし、無視関連のオプションのいずれかを選択します。スクリプトまたはフォルダーをリストに追加したり、リストから削除したりするオプションが表示される場合があります。デバッガーはリストに追加されたスクリプトを無視し、コールスタックでそれらを省略します。

無視リストに登録されたスクリプトやフォルダは、ファイルツリーですべてグレーアウトされます。

無視リストのスクリプトとフォルダはグレー表示されます。More オプションドロップダウンメニューの実験的なオプションを使用してそれらを非表示にすることができます。

無視されたスクリプトを選択すると、 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 パネルに対応する警告バナーが表示されるようになりました。

CPU のプロファイルは、 Profiler の代わりに Performance パネルを使ってください。

RFC および crbug.com/1354548 で詳細を確認し、フィードバックしてください。

Chromium issue: 1417647.

コントラスト低減をエミュレートする

Rendering タブでは、 Emulate vision deficiencies に新しいオプション Reduced contrast を追加しました。このオプションを使用すると、コントラスト感度が低下している人にあなたのウェブサイトがどのように見えるかを確認できます。

Rendering > Emulate vision deficiencies でのコントラストを下げるオプション

なお、リストオプションが更新され、そのオプションがどのような色覚異常を表すかがわかるようになりました。

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 設定を使用します。

Lighthouse 10では、 Moto G Power をデフォルトのエミュレーションデバイスとして使用するようになりました。 DevTools はこのデバイスを Settings > Devices に追加しました。

Chromium issue: 772558.

その他のハイライト

今回のリリースでは、以下のような注目すべき修正が行われています：

Sources > Breakpoints ペインで、あいまいなファイル名の横に区別できるファイルパスを表示するようになりました(1403924).
Performance パネルのフレームチャートの Main セクションで、 CpuProfiler::StartProfiling を Profiler Overhead (1358602) と指定するようにしました。
DevToolsのオートコンプリートを改善しました：
- Sources: 任意の単語の一貫した補完（1320204）。
- Console: Arrow down で最初の候補が選択され、Tab で候補のヒントが得られます(1276960)。
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 の英語版を参照してください。以下は、日本語に翻訳された内容の一部です。

DevTools の新機能 (Chrome 112)