Google I/O 2017で、Paul Irish氏が "DevTools State of the Union 2017" という発表を行い、開発者がコードを合理化して、最新のJavaScript要求に対処するのに役立つ数多くの新機能を紹介した。
2017年、Web開発者はパフォーマンスを向上させる新たな方法を求めている。今や、ユーザーが実際に体験するページパフォーマンスを最適化することが、改善の最大の機会だとみなされている。Irish氏は次のように述べた。
ブラウザにおける最速のコードは、一度も実行されないコードです。さらに高速なのは、ダウンロードすらされないコードです。ページで実際に何が使われているのか、もっと把握できるようになったら、どうなるでしょうか。
そのために、DevToolsは新しいカバレッジプロファイラーを提供する。これは実際にブラウザが使っているJavaScriptとCSSコードの割合を表示してくれる。
一行クリックすると、当該ファイルにジャンプして、実際に使われている部分をインライン表示する。
特に興味深いのはCSSだ。ブラウザは常に何が適用されているかを知っており、ページのCSSのどの部分が実際に使われているのか、ユニークな知見を与えてくれる。
また、新しいものにフルページ・スクリーンショットがある。これまでも開発者がページのスクリーンショットを撮ることはできたが、画面上に見えているものしかキャプチャーされなかった。今回の新機能では、現在のビューポートだけでなく、ページ全体をキャプチャーできる。
AuditsパネルはLighthouseツール統合バージョンに置き換えられる。このツールは、ページのPerformance、Best Practices、Accessibility、Progressive Web App標準の監査を実行する。これまでは拡張機能もしくはnodeコマンドラインツールとして利用できたツールだ。Lighthouseは、様々なデバイスサイズやネットワークスピードでページをテストする。また、カラーコントラストやARIAベストプラクティスなど、アクセシビリティガイドラインへの適合性もチェックする。
そして、実行可能な提案を含んだ読みやすいレポートを出力してくれる。
他にも、インラインオブジェクトプレビューや非同期コードのデバッグに関する大幅な改善など、数多くの機能が含まれている。
Irish氏のセッションはYouTubeで閲覧できる。新機能はChrome 59で利用可能になる予定で、今のところChrome Canaryで使うことができる。
Rate this Article
- Editor Review
- Chief Editor Action