Firefoxにブラウザ上の動作を記録・再生可能な「リプレイ機能」が搭載される予定

Mozillaは、Firefox上での動作を記録し、再生して以前の状態に巻き戻すことができるリプレイ機能をFirefoxに搭載予定であることを明かし、Firefoxの開発版の一部には既に実装したことを発表しました。

Replay
https://firefox-replay.com/

WebReplay - Mozilla | MDN
https://developer.mozilla.org/en-US/docs/Mozilla/Projects/WebReplay

このリプレイ機能は「WebReplay」と呼ばれるプロジェクトで開発されているもので、ブラウザ上に表示されたグラフィックの更新だけではなく、JavaScript動作やDOMの構造など記録中に発生したほとんどの動作が保存可能とのこと。

デバッグを高速かつ直感的に行うために、デバッグ画面にタイムラインが設置され、コードの実行を一目で確認可能。また、タイムライン上でマウスカーソルを動かすとDOMのプレビューが表示されるとのこと。リプレイ機能のタイムラインは例外やイベント、ネットワーク要求などさまざまなポイントをリアルタイムで表示するため、「リプレイを一時停止して検査する」という作業が簡単にできるとMozillaは述べています。

また、リプレイ機能はチームによる開発現場での利用が想定されているため、リプレイ機能による記録は保存したり、読み込んだりすることが可能。再現性が難しいバグは他の人による確認も困難で、デバッグ作業が遅々として進まないということがありますが、リプレイ機能で動作を記録し、その記録を他人と共有することで、効率も大きく上がることが期待されます。

Firefoxのリプレイ機能は、記事作成時点では開発版であるFirefox NightlyのmacOS版のみに実装されており、安定するまではリプレイ機能はデフォルトで無効になっているため、設定から有効にする必要があるとのこと。実装作業はほぼすべてmacOS上で行われたため、Windows版に実装するには移植作業が必要ですが、「干渉するシステムライブラリAPIの特定」「巻き戻し機能のメモリ管理」「macOSと異なるグラフィック処理とプロセス間通信の処理」が難航していると、Mozillaは述べました。