Google Chrome 66のDevToolsアップデート

先週7日にChrome 65がリリース（Stable Channel Update for Desktop）され、デベロッパーツール上ではCSSなどのDevToolsで行った変更をリロード時でも維持する「ローカルオーバーライド」や、追加されたアクセシビリティペインによるアクセシビリティプロパティの検証、SEOとパフォーマンスの監査など、より様々な用途での開発/検証/監査がブラウザ単体で行えるようになりました。

今回はWhat's New In DevTools (Chrome 66)からChrome 66のデベロッパーツールの更新を抜粋します。

PreviewとResponseタブでのPretty print、HTMLコンテンツのプレビュー

Networkタブ内のPreviewタブにて圧縮されたコードが展開した状態で閲覧できるようになりました。Sourcesタブでも同じように展開コードを閲覧することができましたが、Networkタブ上にあることでボトルネックになっているファイルの簡易的な調査などに使用できます。また、対象ファイルがHTMLリソースであった場合、HTMLの基本レンダリングがプレビュー上に表示されるようになりました。

デバイスモードでのズームの自動調整

Device Modeでモバイル端末のシミュレーションを行う際、デバイスの向きを変更すると表示領域に合わせた拡縮機能の有効/無効を「Auto-adjust zoom」から変更することができるようになりました。Chrome 65までは有効時と同じ挙動で全体像を確認するのには便利でしたが、無効に切り替えることにより状況に応じて常に拡縮100%の状態を維持できるようになります。

HTML内のスタイルによるローカルオーバーライド

Chrome 65で初出のローカルオーバーライドがhead要素内のstyle属性にも対応しました。ローカルオーバーライドを使用すればちょっとしたスタイルの修正だけでなく、その場で簡易的なモックをくみ上げる時なども有用なので上手く使っていきたいですね。