DevTools の新機能（Chrome 60）

Kayce Basques

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

以下のリリースノートの動画版をご覧ください。詳しくは、以下をご覧ください。

新機能

Lighthouse を活用した新しい [監査] パネル

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

上部の [プログレッシブ ウェブアプリ]、[パフォーマンス]、[ユーザー補助]、[ベスト プラクティス] のスコアは、各カテゴリの合計スコアです。レポートの残りの部分は、スコアを決定した各テストの詳細です。失敗したテストを修正して、ウェブページの品質を改善します。

Lighthouse レポート

図 1. Lighthouse レポート

ページを監査するには:

  1. [監査] タブをクリックします。
  2. [監査を実行] をクリックします。
  3. [監査を実行] をクリックします。Lighthouse は、モバイル デバイスをエミュレートするように DevTools を設定し、ページに対して一連のテストを実行して、結果を [Audits] パネルに表示します。

Lighthouse（Google I/O '17）

Lighthouse と DevTools の統合について詳しくは、Google I/O 2017 のデベロッパー ツールに関するセッションをご覧ください。

Lighthouse に貢献する

Lighthouse はオープンソース プロジェクトです。仕組みと貢献方法について詳しくは、Google I/O '17 の Lighthouse に関する講演をご覧ください。

Lighthouse 監査のアイデアをお持ちですか？投稿はこちらから

サードパーティ製バッジ

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

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

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

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

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

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

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

[呼び出しツリー] タブと [ボトムアップ] タブの [プロダクト別にグループ化] オプションを使用して、パフォーマンス レコーディング アクティビティを、アクティビティの原因となったサードパーティ エンティティ別にグループ化します。DevTools でパフォーマンスを分析する方法については、ランタイム パフォーマンスの分析を始めるをご覧ください。

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

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

[ここから続行] の新しいジェスチャー

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

コードをステップ実行するときは、Command キー（Mac）または Control キー（Windows、Linux）を押しながらクリックして、そのコード行に進みます。ジャンプ可能なリンク先は DevTools で青色でハイライト表示されます。

ここに移動

図 5. ここに移動

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

非同期にステップインする

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

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

例については、I/O での DevTools の講演でのデモをご覧ください。

変更

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

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

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

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

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

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

コンソールのコンテキスト選択メニューの詳細化

Search Console のコンテキスト選択メニューに、利用可能なコンテキストの詳細が表示されるようになりました。

  • タイトルには、各アイテムの説明が表示されます。
  • タイトルの下のサブタイトルには、アイテムの元のドメインが示されます。
  • iframe コンテキストにカーソルを合わせると、ビューポートでハイライト表示されます。

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

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

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

Chrome 59 でコードカバレッジを記録すると、[カバレッジ] タブに「記録中...」とのみ表示され、使用されているコードを確認できませんでした。[カバレッジ] タブに、使用されているコードがリアルタイムで表示されます。

以前の [カバレッジ] タブを使用してページを読み込み、操作する

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

新しい [カバレッジ] タブを使用してページを読み込み、操作する

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

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

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

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

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

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

非同期スタックがデフォルトでオン

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

Google I/O '17 の DevTools

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

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

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

Chrome DevTools チームに問い合わせる

次のオプションを使用して、DevTools の新機能、アップデート、その他のトピックについて話し合います。

DevTools の新機能

DevTools の新機能シリーズで取り上げられたすべての内容のリスト。