このページは Cloud Translation API によって翻訳されました。

DevTools の新機能（Chrome 60）

Kayce Basques

ようこそ。Chrome 60 で導入される DevTools の新機能と主な変更点は次のとおりです。

新しい [監査] パネル。プログレッシブウェブアプリ、パフォーマンス、ユーザー補助、ベストプラクティスのテストが含まれます。
サードパーティのバッジ。ネットワークリクエスト、コンソールへのロギング、JavaScript の実行を行っているサードパーティを確認します。
[Continue To here] を選択します。JavaScript のデバッグワークフローをスピードアップできる新しい操作です。
非同期 JavaScript の予測可能なデバッグ。
コンソールでのオブジェクトプレビュー。
[カバレッジ] タブでリアルタイムの最新情報。
コンソールでコンテキストを選択するための新しいメニュー。
よりシンプルなネットワークスロットリングオプション。
非同期スタックトレースをデフォルトで有効にする。

注: お使いの Chrome のバージョンは chrome://version で確認できます。Chrome は約 6 週間ごとに新しいメジャーバージョンに自動更新されます。

詳細については、以下のリリースノートの動画をご覧ください。

新しい機能と特長

Lighthouse による新しい監査パネル

監査パネルが Lighthouse を利用できるようになりました。Lighthouse には、ウェブページの品質を測定するための包括的なテストセットが用意されています。

[プログレッシブウェブアプリ]、[パフォーマンス]、[ユーザー補助]、[ベストプラクティス] の上部にあるスコアは、これらのカテゴリごとの集計スコアです。レポートの残りは、スコアを決定した各テストの内訳です。失敗したテストを修正してウェブページの品質を向上させます。

Lighthouse レポート

図 1. Lighthouse レポート

ページを監査するには:

[Audits] タブをクリックします。
[Perform an audit] をクリックします。
[Run audit] をクリックします。Lighthouse では、モバイルデバイスをエミュレートするように DevTools をセットアップし、ページに対して一連のテストを実行して、[Audits] パネルに結果を表示します。

Google I/O '17 での灯台

DevTools での Lighthouse の統合について詳しくは、以下の Google I/O 2017 での DevTools の講演をご覧ください。

Lighthouse に投稿する

Lighthouse はオープンソースプロジェクトです。その仕組みや貢献の方法について詳しくは、Google I/O 2017 で発表された Lighthouse のトークをご覧ください。

Lighthouse の監査についてアイデアが必要な場合は、ぜひご投稿ください。

サードパーティのバッジ

サードパーティのバッジを使用すると、ページでネットワークリクエストを行い、コンソールにロギングし、JavaScript を実行しているエンティティについて、より詳細な分析情報を得ることができます。

[ネットワーク] パネルでサードパーティのバッジにカーソルを合わせる

図 2. [ネットワーク] パネルでサードパーティのバッジにカーソルを合わせる

コンソールでサードパーティのバッジにカーソルを合わせる

図 3. コンソールでサードパーティのバッジにカーソルを合わせる

サードパーティのバッジを有効にするには:

コマンドメニューを開きます。
Show third party badges コマンドを実行します。

[Call Tree] タブと [Bottom-Up] タブの [Group by product] オプションを使用すると、アクティビティを発生させたサードパーティエンティティ別にパフォーマンス記録アクティビティをグループ化できます。DevTools でパフォーマンスを分析する方法については、ランタイムパフォーマンスの分析を開始するをご覧ください。

[ボトムアップ] タブでの商品別のグループ化

図 4. [ボトムアップ] タブでの商品別のグループ化

「ここに続ける」の新しい操作

スクリプトの 25 行目で一時停止し、50 行目に移動するとします。以前は、50 行目にブレークポイントを設定するか、行を右クリックして [Continue to here] を選択することでしたが、今回は、このワークフローを処理するためのより高速な操作が追加されました。

コードをステップ実行するときに、Command（Mac）または Ctrl（Windows、Linux）を押したままクリックして、そのコード行に移動します。DevTools で、ジャンプ可能なデスティネーションが青色でハイライト表示されます。

ここに移動

図 5. ここに進む

DevTools でのデバッグの基本については、JavaScript のデバッグを開始するをご覧ください。

非同期にステップ

近い将来の DevTools チームの主なテーマは、非同期コードのデバッグを予測可能にすること、そして非同期実行の完全な履歴を提供することです。

「ここに続ける」の新しい操作は、非同期コードでも機能します。Command キー（Mac）または Ctrl キー（Windows、Linux）を押すと、DevTools でジャンプ可能な非同期デスティネーションが緑色でハイライト表示されます。

I/O での DevTools の講演で紹介した以下のデモで例をご覧ください。

変更回数

コンソールでのオブジェクトプレビューのより詳細な情報

これまでは、コンソールでオブジェクトのロギングや評価を行う際には Object しか表示されていませんでしたが、これは特に役に立ちませんでした。これで、コンソールにオブジェクトの内容に関するより詳細な情報が表示されるようになりました

コンソールを使用してオブジェクトをプレビューする方法

図 6. コンソールを使用してオブジェクトをプレビューする方法

コンソールでのオブジェクトのプレビュー

図 7. コンソールでのオブジェクトのプレビュー

コンソールのコンテキスト選択メニューがより有益である

コンソールの [コンテキスト選択] メニューに、利用可能なコンテキストに関する詳細情報が表示されるようになりました。

タイトルは、各項目が何であるかを説明するものです。
タイトルの下のサブタイトルは、そのアイテムの取得元ドメインを表しています。
iframe コンテキストにカーソルを合わせると、ビューポートでハイライト表示されます。

新しいコンテキスト選択メニュー

図 8. 新しいコンテキスト選択メニューで iframe にカーソルを合わせると、iframe がビューポートでハイライト表示されます。

[カバレッジ] タブのリアルタイム更新

Chrome 59 でコードカバレッジを記録すると、[カバレッジ] タブに「Recording...」とだけ表示され、どのコードが使用されているかはわかりません。これで、[カバレッジ] タブで、使用されているコードをリアルタイムで確認できるようになりました。

図 9. 以前の [カバレッジ] タブを使用したページの読み込みと操作

図 10. 新しい [カバレッジ] タブを使用したページの読み込みと操作

シンプルなネットワークスロットリングオプション

[ネットワーク] パネルと [パフォーマンス] パネルのネットワークスロットリングメニューが簡素化され、[オフライン]、[低速 3G]（インドなどで一般的）および [高速 3G]（米国などの地域で一般的）の 3 つのオプションのみが表示されるようになりました。

新しいネットワークスロットリングオプション

図 11. 新しいネットワークスロットリングオプション

スロットリングオプションは、他のカーネルレベルのスロットリングツールに合わせて調整されています。これらの値は誤解を招くものであったため、DevTools の各オプションの横にレイテンシ、ダウンロード、アップロードの指標が表示されなくなりました。目標は、それぞれの選択肢を実際の状況に合わせることです。

非同期スタックをデフォルトで有効にする

[ソース] パネルから [非同期] チェックボックスが削除されました。非同期スタックトレースがデフォルトで有効になりました。以前は、パフォーマンスのオーバーヘッドを考慮してこのオプションを選択していました。オーバーヘッドは最小限に抑えられ、デフォルトでこの機能を有効にできます。非同期スタックトレースを無効にする場合は、[設定] で、またはコマンドメニューで Do not capture async stack traces コマンドを実行して無効にできます。

Google I/O '17 での DevTools

DevTools チームが過去 1 年間に取り組んできた取り組みと、近い将来に取り組んでいる大きなテーマについて、神話の Paul Irish による以下の講演をご覧ください。

プレビューチャンネルをダウンロードする

デフォルトの開発ブラウザとして Chrome の Canary、Dev、または Beta を使用することを検討してください。これらのプレビューチャンネルを使用すると、DevTools の最新機能にアクセスしたり、最先端のウェブプラットフォーム API をテストしたり、ユーザーに先駆けてサイトの問題を検出したりできます。

Chrome DevTools チームへのお問い合わせ

以下のオプションを使用して、投稿の新機能や変更点、または DevTools に関連するその他のことについて話し合います。

ご提案やフィードバックは、crbug.com からお送りください。
DevTools の [More options] > [Help] > [Report a DevTools issues] を使用して、DevTools の問題を報告します。
@ChromeDevTools でツイートしてください。
DevTools の新機能に関する YouTube 動画または DevTools のヒントの YouTube 動画にコメントを残してください。