このページは 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] をクリックします。
[監査を実行] をクリックします。Lighthouse では、モバイルデバイスをエミュレートするように DevTools が設定され、ページに対して一連のテストが実行され、結果が [Audits] パネルに表示されます。

Google I/O 2017 の灯台

Lighthouse の DevTools への統合について詳しくは、以下の 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. [Bottom-Up] タブで、商品別にグループ化する

「ここに続行」の新しいジェスチャー

スクリプトの 25 行目で一時停止していて、50 行目にジャンプするとします。これまでは、50 行目にブレークポイントを設定するか、行を右クリックして [Continue to here] を選択できました。今回、このワークフローをより迅速に処理できるジェスチャーが導入されました。

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

続ける

図 5. 続ける

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

async にステップする

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

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

I/O での DevTools の講演で取り上げられた、以下のデモをご覧ください。

変更回数

コンソールでより有益なオブジェクトプレビューが可能に

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

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

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

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

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

コンソールのコンテキスト選択メニューがより有益なものになりました

コンソールのコンテキスト選択メニューで、利用可能なコンテキストに関する詳細情報を確認できるようになりました。

タイトルには、各項目の説明が表示されます。
タイトルの下のサブタイトルには、その商品の出所が表示されます。
iframe のコンテキストにカーソルを合わせると、ビューポートでハイライト表示されます。

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

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

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

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

図 9. 従来の [カバレッジ] タブでページを読み込んで操作する

図 10. 新しい [カバレッジ] タブでページを読み込んで操作する

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

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

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

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

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

非同期はデフォルトでオン

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

Google I/O '17 での DevTools

伝説の人物である Paul Irish の講演で、過去 1 年間に DevTools チームが取り組んだことや、近い将来取り組んでいる大きなテーマについて詳しく見てみましょう。

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

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

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

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

crbug.com からご提案やフィードバックをお送りください。
DevTools の問題を報告するには、DevTools でその他のオプション アイコン > [ヘルプ] > [DevTools の問題を報告する] を選択します。
@ChromeDevTools にツイートします。
「DevTools の新機能」の YouTube 動画または DevTools のヒントの YouTube 動画でコメントを残してください。