メモ：What's New In DevTools (Chrome 76)

日本語メモ：What's New In DevTools (Chrome 76) 手元のChromeが76になっていたので、改めて76のアップデート内容を見てみる。

元情報

https://youtu.be/GLUB2yzk0ZQ https://developers.google.com/web/updates/2019/05/devtools

メモ

Autocomplete with CSS values

CSS記入時に、プロパティじゃなくていきなり値を入力しはじめた場合でも、オートコンプリート機能が働きプロパティと値をサジェストしてくれる。

A new UI for network settings

Networkパネルのオプション設定部分のレイアウトが変わり、Network Settingsのボタンで表示非表示を切り替えられるようになった。

WebSocket messages in HAR exports

WebSocketのメッセージもHARファイルとしてエクスポートされるようになった。

HAR import and export buttons

HARのインポートとエクスポートのボタンがよりわかりやすくなった。

Real-time total memory usage

Memoryパネルでリアルタイムなメモリ使用量が表示されるようになった。 直近2秒間のデータを計算して秒単位の使用量が表示される。

Service worker registration port numbers

Service Workersペインのオリジン表示部分でlocalhostのポート番号も表示されるようになった。

Inspect Background Fetch and Background Sync events

ApplicationパネルのBackgroundServicesペインでBackground FetchとBackground Syncイベントのロギングができるようになった。

Puppeteer for Firefox

DevToolsじゃないけど、PuppeteerでFirefoxも動かせる。

（Bonus tip）Accessibility Insights for Web

Accessibility Insights for Webはフォーカス順序を可視化できたりして便利らしい。 chrome.google.com