DevTools の新機能（Chrome 60）

Kayce Basques

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

で確認できます。

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

新機能

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

[Audits] パネルに Lighthouse を利用できるようになりました。Lighthouse では、Google Cloud の ウェブページの品質を測定するテストです。

上部のスコアには、プログレッシブ ウェブアプリ、パフォーマンス、 ユーザー補助機能とおすすめの方法は、それらの項目ごとの総合スコアです。 できます。レポートの残りは、スコアを決定した各テストの内訳です。 失敗したテストを修正してウェブページの品質を向上させます。

Lighthouse レポート

図 1. Lighthouse レポート

ページを監査するには:

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

Google I/O '17 での灯台

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

Lighthouse に投稿する

Lighthouse はオープンソース プロジェクトです。この機能の仕組みや Google Chat で Google I/O 2017 での Lighthouse の講演をご覧ください。

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

サードパーティのバッジ

サードパーティのバッジを使用すると、 コンソールへのロギング、JavaScript の実行などのタスクが含まれます。

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

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

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

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

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

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

[Call Tree] タブと [Bottom-Up] タブの [Group by product] オプションを使ってパフォーマンスをグループ化する アクティビティを発生させた第三者エンティティによるアクティビティの記録詳しくは、 ランタイム パフォーマンスの分析をご覧ください。

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

図 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 にカーソルを合わせると、 ビューポート

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

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

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

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

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

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

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

[ネットワーク] パネルと [パフォーマンス] パネルのネットワーク スロットリング メニューが次のように簡素化されました。 [オフライン]、[低速 3G]（インドなどで一般的） Fast 3G: 米国などの地域で一般的です。

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

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

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

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

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

Google I/O '17 での DevTools

DevTools チームの活動内容について詳しくは、神話に登場する Paul Irish のトークをご覧ください。 過去 1 年間に取り組んできた主なテーマと 近い将来に取り組んでいる課題です

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

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

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

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

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

DevTools の新機能

「DevTools の新機能」シリーズで紹介されているすべてのリスト。