Chrome 60 DevTools の新機能/変更点

# 新機能
## Lighthouse による新しい Audits パネル
[Lighthouse](https://developers.google.com/web/tools/lighthouse/) はサイトの品質を向上させる事を目的とした、Google によるオープンソースの監査ツールです。

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

- [Progressive Web App](https://developers.google.com/web/fundamentals/getting-started/codelabs/your-first-pwapp/?hl=ja)
- Performance
- Accessibility
- Best Practices

各カテゴリの詳細内容も確認できます。
![audit.png](https://qiita-image-store.s3.amazonaws.com/0/36122/ff186004-a215-b121-8e0d-4c2661401ae3.png)

Chrome 59 で同じページを計測した結果です。
![chrome59_audit.png](https://qiita-image-store.s3.amazonaws.com/0/36122/d3e05bdb-3d47-d734-778d-7f915e120cb2.png)

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

バッジにマウスカーソルをあてるとツールチップで名前が表示されます。
![thirdparty_badge1.png](https://qiita-image-store.s3.amazonaws.com/0/36122/1b0dd104-e907-0efd-d4fa-68f59f46c023.png)

デフォルトでは非表示なので、表示するにはコマンドメニュー（Command+Shift+P (Mac)、Ctrl+Shift+P (Windows, Linux)）から `Show thrid party badges` を実行して有効化する必要があります。
![sho_third_party_badges.png](https://qiita-image-store.s3.amazonaws.com/0/36122/86ed316a-9128-c0bb-6ae7-fdfa51190d4a.png)


## 新しい "Continue to Here" ジェスチャー
JavaScript デバッガのブレークポイントで処理をブレークした後、その先の行で**ブレークポイントを置かず処理を再開、ブレーク**する事が出来るようになりました。

次の例では、262行目で止まった後、Command (Mac) または Control (Windows, Linux) キーを押して268行目にジャンプしています。
![debugger.gif](https://qiita-image-store.s3.amazonaws.com/0/36122/cac99dd2-b023-b085-16fc-2e6340e27a16.gif)

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

# 変更点

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

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

![obj_child.png](https://qiita-image-store.s3.amazonaws.com/0/36122/01638caa-158d-537c-3119-2c410b84f4cb.png)

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

![obj_child2.png](https://qiita-image-store.s3.amazonaws.com/0/36122/98b7220e-7eb7-ac23-6fc5-70924ce3e720.png)

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

各項目のドメインがサブタイトルに表示され、iframe の項目にマウスカーソルをあてるとページ側で該当する要素がハイライト表示されます。
![chrome60_context_menu2.png](https://qiita-image-store.s3.amazonaws.com/0/36122/d55b2040-daa7-e42e-ade0-926c69e90de4.png)

Chrome 59 の画面。
![chrome59_context_menu2.png](https://qiita-image-store.s3.amazonaws.com/0/36122/50e992fb-f4ad-f05b-fda9-978120ed089e.png)


## Coverage タブの更新がリアルタイムに
Chrome 59 で追加された **Coverage** タブの内容がリアルタイムで表示されるようになりました。
![chrome60_coverage.gif](https://qiita-image-store.s3.amazonaws.com/0/36122/8146f5af-945d-8394-df12-5df0e0e1b0cc.gif)

Chrome 59 ではキャプチャを終了してから表示されています。
![chrome59_coverage.gif](https://qiita-image-store.s3.amazonaws.com/0/36122/fcad31f3-b8cf-03cf-5809-741dd451e27d.gif)


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

- [What's New In DevTools \(Chrome 59\)  \|  Web  \|  Google Developers](https://developers.google.com/web/updates/2017/04/devtools-release-notes#coverage)
- [Chromeバージョン59のデベロッパーツールにCSS、JSのカバレッジタブが追加されるらしい \- Qiita](http://qiita.com/ota-meshi/items/d731380401bd40ada48b)

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

次は Chrome 59 でのスロットルメニュー。
![chrome60_network.png](https://qiita-image-store.s3.amazonaws.com/0/36122/53ecba11-67b1-7cdf-e717-87bee964b73e.png)

Chrome 60 でのスロットルメニュー。各メニューの遅延、ダウンロード、アップロードの値は誤解を招きやすいため、表示されなくなりました。
![chrome60_network_throttling.png](https://qiita-image-store.s3.amazonaws.com/0/36122/99e2cf49-aa89-dde7-759b-e0ad4a026d08.png)

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

## 非同期コールスタックの標準化
非同期関数呼び出しの実行が把握しやすくなる[非同期コールスタック機能](https://developers.google.com/web/tools/chrome-devtools/javascript/step-code?hl=ja#_4)が標準化されました。


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

![async_setting.png](https://qiita-image-store.s3.amazonaws.com/0/36122/8e36c2f1-5935-165e-b7fa-1c5cab03a8be.png)

# Chrome 60 の新機能/変更点を試すには
執筆時点での Chrome の最新リリースは 59 です。Chrome 60 の新機能を試す方法として、例えば [Chrome Canary](https://www.google.co.jp/chrome/browser/canary.html) をインストールするのがお手軽です。

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

# 参考

- [What's New In DevTools \(Chrome 60\)  \|  Web  \|  Google Developers](https://developers.google.com/web/updates/2017/05/devtools-release-notes)