DevTools の新機能（Chrome 60）

Kayce Basques
Kayce Basques
X GitHub

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

以下の動画でリリースノートの概要をご覧になるか、このまま読み進めて詳細をご確認ください。

新機能

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

[監査] パネルで Lighthouse の使用を開始しました。Lighthouse は、ウェブページの品質を測定するための包括的なテストセットを提供します。

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

Lighthouse レポート

図 1. Lighthouse レポート

ページを監査するには:

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

Google I/O 2017 での Lighthouse

Lighthouse のデベロッパー ツールへの統合について詳しくは、以下の Google I/O 2017 のデベロッパー ツールに関する講演をご覧ください。

Lighthouse に貢献する

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

Lighthouse 監査に関するアイデアをお持ちですか？こちらに投稿してください。

サードパーティ バッジ

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

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

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

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

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

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

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

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

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

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

「ここまで続ける」の新しいジェスチャー

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

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

ここに移動

図 5. ここに送る

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

非同期ステップイン

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

「ここまで継続」の新しいジェスチャーは、非同期コードでも機能します。Command（Mac）または Control（Windows、Linux）を押すと、DevTools はジャンプ可能な非同期の宛先を緑色でハイライト表示します。

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

変更点

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

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

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

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

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

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

コンソールでコンテキスト選択メニューの情報を拡充

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Google I/O 2017 での DevTools

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

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

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

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

DevTools の新機能、更新、その他の関連事項について話し合うには、次のオプションを使用します。

DevTools の新機能

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