Chrome 97のDevToolsに新機能、Webブラウザ上の操作を記録、再実行、編集、保存。Puppeteerスクリプトへのエクスポートも

2021年11月5日

Googleは、来年1月に登場予定のChrome 97で、DevToolsにWebブラウザ上での操作内容を記録し、再実行や編集、保存などを可能にする新機能を搭載することを明らかにしました

Googleが提供しているWebブラウザのChromeにはDevToolsと呼ばれる開発者のための機能が搭載されており、Webブラウザ上に表示されているWebページのHTMLやJavaScriptの詳細な内容や、表示や実行に関わる性能の測定などが可能になっています。

来年、2022年1月4日頃にリリース予定のChrome 97では、このDevToolsにWebブラウザ上で行われた操作を記録し、その内容を保存、編集、再実行などが可能になります。

Chrome DevToolsのドキュメント「Record, replay and measure user flows」で明らかになりました。

DevToolsのRecord機能を起動することで、Webブラウザ上の一連の操作に名前を付けて記録できるようになります。

一連の動作は上記のツイート内の動画を見ていただければ分かると思います。ここでは主な機能を静止画像で紹介していきましょう。

下記は名前を付けて操作を記録しているところ。画面の左側が操作されているWebページの画面で、右側がDevToolsのRecord機能で記録しているところです。

fig

記録した操作を再実行できます。このとき、遅い3G回線(Slow 3G)や高速な3G回線(Fast 3G)をシミュレートした再実行も可能です。遅い回線で操作したときの結果が分かります。

fig

操作に対するWebページの性能分析も可能です。

fig

記録は編集することも可能。Recorderは自動的に2つのセレクタごとに1ステップとし、操作のステップごとに内容が示されます。

fig

保存ももちろん可能。Puppeteerスクリプト形式へのエクスポートも可能です。

Webブラウザの操作を記録し、再現することは、ある程度の規模以上のWebアプリケーションのテストやデバッグにとって欠かせないものでした。

それを実現するにはSeleniumやPuppeteerといったツールが必要でしたが、DevToolsにその機能が統合されることによって、より便利かつ容易にWebアプリケーションのデバッグが可能になっていくようです。

このエントリーをはてなブックマークに追加
follow us in feedly




カテゴリ

Blogger in Chief

photo of jniino

Junichi Niino(jniino)
IT系の雑誌編集者、オンラインメディア発行人を経て独立。2009年にPublickeyを開始しました。
詳しいプロフィール

Publickeyの新着情報をチェックしませんか?
Twitterで : @Publickey
Facebookで : Publickeyのページ
RSSリーダーで : Feed


最新記事10本