BT

最新技術を追い求めるデベロッパのための情報コミュニティ

寄稿

Topics

地域を選ぶ

InfoQ ホームページ ニュース Google Chrome DevToolsのアップデート

Google Chrome DevToolsのアップデート

ブックマーク

原文(投稿日:2017/05/24)へのリンク

Google I/O 2017で、Paul Irish氏が "DevTools State of the Union 2017" という発表を行い、開発者がコードを合理化して、最新のJavaScript要求に対処するのに役立つ数多くの新機能を紹介した。

2017年、Web開発者はパフォーマンスを向上させる新たな方法を求めている。今や、ユーザーが実際に体験するページパフォーマンスを最適化することが、改善の最大の機会だとみなされている。Irish氏は次のように述べた。

ブラウザにおける最速のコードは、一度も実行されないコードです。さらに高速なのは、ダウンロードすらされないコードです。ページで実際に何が使われているのか、もっと把握できるようになったら、どうなるでしょうか。

そのために、DevToolsは新しいカバレッジプロファイラーを提供する。これは実際にブラウザが使っているJavaScriptとCSSコードの割合を表示してくれる。

Screenshot of the DevTools coverage profiler showing what percentage of the code file is actually used.

一行クリックすると、当該ファイルにジャンプして、実際に使われている部分をインライン表示する。

Screenshot of the DevTools coverage profiler showing inline tips on what portions of the actual code are in use or not.

特に興味深いのはCSSだ。ブラウザは常に何が適用されているかを知っており、ページのCSSのどの部分が実際に使われているのか、ユニークな知見を与えてくれる。

また、新しいものにフルページ・スクリーンショットがある。これまでも開発者がページのスクリーンショットを撮ることはできたが、画面上に見えているものしかキャプチャーされなかった。今回の新機能では、現在のビューポートだけでなく、ページ全体をキャプチャーできる。

AuditsパネルはLighthouseツール統合バージョンに置き換えられる。このツールは、ページのPerformance、Best Practices、Accessibility、Progressive Web App標準の監査を実行する。これまでは拡張機能もしくはnodeコマンドラインツールとして利用できたツールだ。Lighthouseは、様々なデバイスサイズやネットワークスピードでページをテストする。また、カラーコントラストやARIAベストプラクティスなど、アクセシビリティガイドラインへの適合性もチェックする。

そして、実行可能な提案を含んだ読みやすいレポートを出力してくれる。

Sample report from the Lighthouse audit tool

他にも、インラインオブジェクトプレビューや非同期コードのデバッグに関する大幅な改善など、数多くの機能が含まれている。

Irish氏のセッションはYouTubeで閲覧できる。新機能はChrome 59で利用可能になる予定で、今のところChrome Canaryで使うことができる。

 
 

Rate this Article

Adoption Stage
Style
 
 

この記事に星をつける

おすすめ度
スタイル

こんにちは

コメントするには InfoQアカウントの登録 または が必要です。InfoQ に登録するとさまざまなことができます。

アカウント登録をしてInfoQをお楽しみください。

HTML: a,b,br,blockquote,i,li,pre,u,ul,p

コミュニティコメント

HTML: a,b,br,blockquote,i,li,pre,u,ul,p

HTML: a,b,br,blockquote,i,li,pre,u,ul,p

BT