Chrome 77のDevToolsの新機能をざっくり確認してみた

こちらにChrome 77のdev toolの新機能について紹介があったため、私が勉強のために試してみたと言う投稿になります。

- [What's New In DevTools (Chrome 77) | Web](https://developers.google.com/web/updates/2019/07/devtools)

2019/07/28現在のchromeのバージョンは75.0.3770.142なので、
[Chrome Canary](https://www.google.com/chrome/canary/)バージョン78.0.3866.0を使用して確認しています。



# 要素のスタイルをコピー [Copy element's styles](https://developers.google.com/web/updates/2019/07/devtools#copystyles)

ElementsパネルのDOMを右クリックしてcssをクリップボードにコピーできるようになった！

![nN6JlZU7oo.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142910/d7cbec09-328f-8498-6919-c7e89c7af8b0.gif)

# レイアウトシフトを可視化 (**※こちらはうまく動かせませんでした**) [Visualize layout shifts](https://developers.google.com/web/updates/2019/07/devtools#layoutshifts)

参考ページにレイアウトシフトの説明があったので一部引用です。

> It usually happens when images and ads finish loading. The page hasn't reserved any space for the images and ads, so the browser has to shift all the other content down to make room for them. 
> ↓　google翻訳 ↓
> 通常、画像や広告の読み込みが完了したときに発生します。 ページは画像や広告のためのスペースを予約していないので、ブラウザはそれらのためのスペースを空けるために他のすべてのコンテンツを下にシフトしなければなりません。

画像などの読み込み後に画面ががたついてしまったりする問題のことをレイアウトシフトと言うようです。

<details><summary>devtoolの新機能ではレイアウトのずれを検出することができるようなのですが、私の環境ではうまく動きませんでした。</summary><div>

手順通りにやってみたのですが、画面が真っ黒になってしまい、うまくいきません。

1. devtoolを開く
2. <kbd>Shift + command + P</kbd> でCommand Menuを開く
3. `Rendering` と入力
4. `Show Rendering` を選択する
5. Renderingパネルの「Layout Shift Regions」にチェックをつける

画面が黒くなってしまう

![gYpMKtOkiU.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142910/744f46b8-6542-f9d1-bb79-e6d4017c762d.gif)

また、コマンドからChrome Canaryを起動してみるとエラーが出ていました、

```
$ /Applications/Google\ Chrome\ Canary.app/Contents/MacOS/Google\ Chrome\ Canary
```

![m1LfsWhpyN.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142910/affb77e7-36bb-e743-db80-6fdbd9ea6522.gif)


```:エラーログ
$ /Applications/Google\ Chrome\ Canary.app/Contents/MacOS/Google\ Chrome\ Canary
tracing_service_impl.cc: Configured tracing, #sources:3, duration:0 ms, #buffers:1, total buffer size:25600 KB, total sessions:1
[3700:775:0726/005556.605442:ERROR:gles2_cmd_decoder.cc(6509)] [.DisplayCompositor]GL ERROR :GL_INVALID_OPERATION : glBindTexture: texture bound to more than 1 target.
[3700:775:0726/005556.608870:ERROR:gles2_cmd_decoder.cc(10736)] [.DisplayCompositor]RENDER WARNING: there is no texture bound to the unit 0
[3700:775:0726/005556.623967:ERROR:gles2_cmd_decoder.cc(10736)] [.DisplayCompositor]RENDER WARNING: there is no texture bound to the unit 0
[3700:775:0726/005558.518672:ERROR:gles2_cmd_decoder.cc(10736)] [.DisplayCompositor]RENDER WARNING: there is no texture bound to the unit 0
[3700:775:0726/005558.530997:ERROR:gles2_cmd_decoder.cc(6509)] [.DisplayCompositor]GL ERROR :GL_INVALID_OPERATION : glBindTexture: texture bound to more than 1 target.
[3700:775:0726/005558.555357:ERROR:gles2_cmd_decoder.cc(6509)] [.DisplayCompositor]GL ERROR :GL_INVALID_OPERATION : glBindTexture: texture bound to more than 1 target.
[3700:775:0726/005558.571220:ERROR:gles2_cmd_decoder.cc(6509)] [.DisplayCompositor]GL ERROR :GL_INVALID_OPERATION : glBindTexture: texture bound to more than 1 target.
[3700:775:0726/005558.823379:ERROR:gles2_cmd_decoder.cc(6509)] [.DisplayCompositor]GL ERROR :GL_INVALID_OPERATION : glBindTexture: texture bound to more than 1 target.
[3700:775:0726/005558.823437:ERROR:gles2_cmd_decoder.cc(10736)] [.DisplayCompositor]RENDER WARNING: there is no texture bound to the unit 0
[3700:775:0726/005559.314042:ERROR:gles2_cmd_decoder.cc(10736)] [.DisplayCompositor]RENDER WARNING: there is no texture bound to the unit 0
[3700:775:0726/005559.321744:ERROR:gles2_cmd_decoder.cc(6509)] [.DisplayCompositor]GL ERROR :GL_INVALID_OPERATION : glBindTexture: texture bound to more than 1 target.
[3700:775:0726/005601.189083:ERROR:gles2_cmd_decoder.cc(6509)] [.DisplayCompositor]GL ERROR :GL_INVALID_OPERATION : glBindTexture: texture bound to more than 1 target.
[3700:775:0726/005601.204262:ERROR:gles2_cmd_decoder.cc(6509)] [.DisplayCompositor]GL ERROR :GL_INVALID_OPERATION : glBindTexture: texture bound to more than 1 target.

...
```

</div></details>


うまく動かす方法を見つけたら追記します :bow:

# AuditsパネルにLighthouse 5.1 [Lighthouse 5.1 in the Audits panel](https://developers.google.com/web/updates/2019/07/devtools#audits)

※「実際にはChrome76に同梱されていた」と注意書きあり

> - Provides a valid apple-touch-icon. Checks that a PWA can be added to an iOS homescreen.
- Keep request counts and file sizes low. Reports the total number of network requests and file sizes for various categories, such as documents, scripts, stylesheets, images, and so on.
- Maximum Potential First Input Delay. Measures the maximum potential time between a user's first page interaction and the browser's response to that interaction. Note that this metric replaces the Estimated Input Latency metric. Maximum Potential First Input Delay does not factor into your Performance category score.

参考ページによると↑のように色々な機能が追加されるようなのですが、私がAuditsパネル、Lighthouse関して知識がなく、(^ ^;)
有効な`apple-touch-icon`をチェックしてくれるようなった機能 だけみてみました:bow:

---

このように`apple-touch-icon`が有効かどうかの項目が増えたので、

<img width="907" alt="Screen Shot 2019-07-28 at 4.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142910/3af11ce5-6cc3-9e01-bd10-4877ac2a343c.png">

192pxの正方形のpngをhtmlで読み込んでみると

```html
<link rel="apple-touch-icon" sizes="192x192" href="icon.png">
```

有効と判定してくれました！

<img width="638" alt="Screen Shot 2019-07-28 at 4.38.01.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142910/7ebe677a-456b-3964-4a0b-d90d44cfa169.png">

# OSテーマと同期 [OS theme syncing](https://developers.google.com/web/updates/2019/07/devtools#theming)

OSをダークテーマにすると、設定から変更しなくてもdevtoolが自動でダークテーマになる

<-左 Chrome (バージョン 75) ： Chrome Canary (バージョン 77) 右->

<img width="1029" alt="Screen Shot 2019-07-28 at 4.43.46.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142910/3051a61d-3a2b-59ad-b75c-63db5a70703e.png">

# 条件付きブレークポイントにショートカットキーが割り当てられた [Keyboard shortcut for opening the Breakpoint Editor](https://developers.google.com/web/updates/2019/07/devtools#breakpointeditor)

ソースパネルのエディタにフォーカスがあるときに<kbd>Control + Alt + B</kbd>(Windows)または<kbd>Command + Option + B</kbd>（Mac）を押すと、Conditional Breakpointsを設定できるエディタを開ける(今まではショートカットはなく、ソースパネルのエディタの行番号を右クリックのメニューから設定できる)

Conditional Breakpointsとは
Conditional Breakpoints(条件付きブレークポイント)を使用すると、定義された式がtrueと評価されたときにコードブロック内でブレークできます。 

参考：https://blittle.github.io/chrome-dev-tools/sources/conditional-breakpoints.html

![SAHGqsaD9R.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142910/30a8fbab-4592-ddc4-64e0-2de11cba2738.gif)

# Networkパネルでprefechしたリソースがわかるように [Prefetch cache in Network panel](https://developers.google.com/web/updates/2019/07/devtools#prefetch)

prefetchで取得したリソースについては、Networkパネルで`(prefetch cache)`と表示してくれるようになった

```html
<link rel="prefetch" href="image.png">
```

<img width="1113" alt="Screen Shot 2019-07-28 at 6.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142910/7d1d80a2-e9d5-da5a-7f53-7fb054db0b60.png">

Prefetchとは
こちらの記事がprefetchを含むResource Hintsについて、とてもわかりやすくて私は毎回参考にしています。m(_ _)m

参考：[Resource Hintsでリソースを事前取得しよう！ - Qiita](https://qiita.com/ryo_hisano/items/e525616e5026b015aafe)

# オブジェクトプレビューにクラスのプライベートプロパティ表示 [Private properties when viewing objects](https://developers.google.com/web/updates/2019/07/devtools#privateclassfields)

コンソールのオブジェクトプレビューにクラスのプライベートプロパティが表示されるようになりました

```js
const human = new class {
    #name = "Jhon";
    age = 20;
}
console.log(human)
```

<img width="612" alt="Screen Shot 2019-07-28 at 6.20.53.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142910/8e8ab94e-3b0d-d730-2487-9c9f715ab7c7.png">

# Applicationパネルで通知とpushメッセージを確認できるように [Notifications and push messages in the Application panel](https://developers.google.com/web/updates/2019/07/devtools#backgroundservices)

Applicationパネルで通知とpushメッセージを確認できるようになる

プッシュメッセージは、サーバーがサービスワーカーに情報を送信したときに発生
通知は、サービス担当者またはページのスクリプトがユーザーに情報を表示したときに発生

試してみるとこんな感じで表示されるようでした。

![RN76yU3Sv2.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142910/37679f76-e0fb-c7d9-071a-7b292d3d5ae4.gif)

---

最後まで見ていただいてありがとうございましたm(_ _)m