BT

新しい あなたは、アーリーアダプター?それともイノベーター?そんな皆様に、InfoQの新機能をご案内しています。詳細はこちら

Google Chrome DevToolsのアップデート

| 作者: David Iffland フォローする 3 人のフォロワー , 翻訳者 sasai フォローする 0 人のフォロワー 投稿日 2017年5月29日. 推定読書時間: 2 分 |

原文(投稿日: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

このスレッドのメッセージについてEmailでリプライする
コミュニティコメント

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

このスレッドのメッセージについてEmailでリプライする

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

このスレッドのメッセージについてEmailでリプライする

ディスカッション

InfoQにログインし新機能を利用する


パスワードを忘れた方はこちらへ

Follow

お気に入りのトピックや著者をフォローする

業界やサイト内で一番重要な見出しを閲覧する

Like

より多いシグナル、より少ないノイズ

お気に入りのトピックと著者を選択して自分のフィードを作る

Notifications

最新情報をすぐ手に入れるようにしよう

通知設定をして、お気に入りコンテンツを見逃さないようにしよう!

BT