リモート デバッグは正しい方向に向かう一歩であり、現在も実際のモバイル端末でサイトが問題なく動作することを確認する主なツールであり続けています。しかし、時間とともに、リモート デバッグはやや煩雑に感じるようになりました。サイトや機能の構築の初期段階にある場合、一般的に必要になるのはおおまかなモバイル機能だけです。そこで、次のようなモバイル シミュレーション機能を作ることにしました。
パフォーマンスの時代
モバイルの時代が幕を開け、Gmail などの大型アプリがウェブ機能の限界を突破していきました。その一方で、
Gmail 規模のバグには、Gmail 規模のツールが必要となりました。そこで、Chrome がページを表示するために必要な処理について、すべての内訳を順を追って厳密に表示するようにしました。これは、私たちが行ったツール エコシステムに対する最初の大きな貢献の 1 つとなりました。
2018 年時点の Performance パネル
こういったツールは正しい方向に向かう一歩でしたが、最適化できる場所を見つけるためには、ブラウザの動作について細かい部分まで把握し、たくさんのデータを分析する必要がありました。そこで先日、この機能をベースにして開発を行い、
パフォーマンスについての詳しい分析を提供できるようにしました。新しい
Lighthouse エンジンは、Audits パネルで活用され、さらに CI システムと統合できる Node モジュールとしても利用できるようになっています。
Audits パネルに表示されるパフォーマンス提案
Node.js の時代
2014 年頃まで、私たちは DevTools が主に Chrome ですばらしい体験を構築するためのツールだと考えていました。しかし、Node の台頭によって、ウェブ エコシステムにおける私たちの役割の再考が求められることになりました。
Node が登場して最初の数年間、Node デベロッパーは、Firebug が登場する前のウェブ デベロッパーや、Timeline パネルが登場する前の Gmail デベロッパーのような状況にありました。つまり、Node アプリの規模が Node ツールの規模を上回っていたのです。Node が Chrome の JavaScript エンジンである V8 で動作していることを考えれば、DevTools がこの溝を埋める候補となることは自然なことです。Node のデバッグをサポートし、ブレークポイント、コードのステップ実行、ブラックボックス化、トランスパイルされたコードのソースマップなどの通常の DevTools 機能を利用できる DevTools は、2016 年に登場しました。
Node Connection Manager
DevTools プロトコル エコシステム
Chrome DevTools Protocol（CDP）という名前を聞くと、DevTools のみが使う API であるように思うかもしれません。しかし実際はそれよりも汎用的で、プログラムから Chrome にアクセスできる API になっています。ここ数年間で、このプロトコル エコシステムに加わるサードパーティ製のライブラリやアプリケーションがいくつか登場しています。
うれしいことに、これらのパッケージを使って Chrome と高度なインタラクションを行うたくさんのプロジェクトが登場しています。ツールの開発や自動化のビジネスに携わっている方は、ぜひこのプロトコルを確認し、皆さんの領域で新たなチャンスを開くことができないかを調べてみてください。たとえば、
VS Code チームや
WebStorm チームは、それぞれの IDE で JavaScript デバッグを実現するために、この機能を使っています。
