Webページを表示するまでには様々な処理が行われています。DOM構築、HTMLのレンダリング、JavaScriptなど様々な処理が行われた結果、一つの画面を表示します。さらにWebアプリケーションであれば、その画面のまま要素が変化します。 そうした中でパフォーマンスを測定する機能がGoogle Chromeにありますが、その結果をみんなで共有できるのがDevTools Timeline Viewerです。

DevTools Timeline Viewerの使い方

開発者ツールのパフォーマンスタブで測定します。その結果ファイルをDropboxやGoogle Driveに置きます。

DevTools Timeline Viewerでファイル指定することで、そのパフォーマンス測定結果をみんなで閲覧できます。

パフォーマンスの問題が何らかの環境に依存していた場合、別な人が自分の環境で実行しても再現できない可能性があります。DevTools Timeline Viewerを使うことで他の人たちと共有したり、パフォーマンス測定結果を保存して蓄積しておく意味が出そうです。

DevTools Timeline ViewerはHTML5/JavaScript製のオープンソース・ソフトウェア（Apache Licnese 2.0）です。

DevTools Timeline Viewer ChromeDevTools/timeline-viewer: View DevTools Timeline trace files from Google Drive wicked easily