Help us understand the problem. What is going on with this article?

Chrome 60 DevTools の新機能/変更点

More than 3 years have passed since last update.

新機能

Lighthouse による新しい Audits パネル

Lighthouse はサイトの品質を向上させる事を目的とした、Google によるオープンソースの監査ツールです。

Chrome で実行するにはエクステンションとして別途インストールする必要がありましたが、標準で Audits パネルに組み込まれました。ページに対して次のカテゴリを計測し、スコアを算出します。カテゴリは実施時に変更可能です。

各カテゴリの詳細内容も確認できます。
audit.png

Chrome 59 で同じページを計測した結果です。
chrome59_audit.png

サードパーティバッジ

NetworkConsole パネルにサードパーティバッジが表示されるようになりました。

バッジにマウスカーソルをあてるとツールチップで名前が表示されます。
thirdparty_badge1.png

デフォルトでは非表示なので、表示するにはコマンドメニュー(Command+Shift+P (Mac)、Ctrl+Shift+P (Windows, Linux))から Show thrid party badges を実行して有効化する必要があります。
sho_third_party_badges.png

新しい "Continue to Here" ジェスチャー

JavaScript デバッガのブレークポイントで処理をブレークした後、その先の行でブレークポイントを置かず処理を再開、ブレークする事が出来るようになりました。

次の例では、262行目で止まった後、Command (Mac) または Control (Windows, Linux) キーを押して268行目にジャンプしています。
debugger.gif

ジャンプ可能な箇所は青くハイライト表示されます。

変更点

より有益なオブジェクトプレビュー

Console パネルのオブジェクトプレビューがより親切な表示になりました。

次は Chrome 59 の Console パネルでオブジェクトを表示した結果です。child の値が Object と表示されていますが、どんな Object なのか不明です。

obj_child.png

Chrome 60 で同様のオブジェクトを表示した結果です。child の値として {1: 100} と表示されるため、より分かりやすくなります。

obj_child2.png

より有益なコンテキストメニュー

Console パネルのコンテキストメニューがより親切になりました。

各項目のドメインがサブタイトルに表示され、iframe の項目にマウスカーソルをあてるとページ側で該当する要素がハイライト表示されます。
chrome60_context_menu2.png

Chrome 59 の画面。
chrome59_context_menu2.png

Coverage タブの更新がリアルタイムに

Chrome 59 で追加された Coverage タブの内容がリアルタイムで表示されるようになりました。
chrome60_coverage.gif

Chrome 59 ではキャプチャを終了してから表示されています。
chrome59_coverage.gif

Coverage 機能については次のエントリが参考になります。

ネットワークスロットルの簡略化

NetworkPerformance パネルのネットワークスロットルメニューが Offline, Slow 3G, Fast 3G の3つに簡略化されました。

次は Chrome 59 でのスロットルメニュー。
chrome60_network.png

Chrome 60 でのスロットルメニュー。各メニューの遅延、ダウンロード、アップロードの値は誤解を招きやすいため、表示されなくなりました。
chrome60_network_throttling.png

標準で表示されるメニューは簡素化されていますが、細かいスロットルの調節をしたい場合は、Custom の「Add...」メニューから好みの設定で追加することができます。

非同期コールスタックの標準化

非同期関数呼び出しの実行が把握しやすくなる非同期コールスタック機能が標準化されました。

以前はこの機能を使うとパフォーマンスに影響があったのですが、デフォルトでオンにしても十分問題ない速度になったようです。もしこの機能をオフにしたい場合は、設定画面またはコマンドメニューから設定することが出来ます。

async_setting.png

Chrome 60 の新機能/変更点を試すには

執筆時点での Chrome の最新リリースは 59 です。Chrome 60 の新機能を試す方法として、例えば Chrome Canary をインストールするのがお手軽です。

最新は Version 61.0.3139.4 (Official Build) canary (64-bit) です。60 ではないのでご注意下さい。

参考

kyoshidajp
ねる、くう、はしる
https://kyoshida.jp
jmty
日本最大のクラシファイドサイト「ジモティー」を開発・運営するスタートアップ
http://jmty.jp/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away