Chromeのブラウザ操作を記録する「Recorder」機能の使い方

こんにちは！社員Kです。

本日は、Chromeのバージョン97から新しく追加された開発者ツール「Recorder」機能のご紹介です。

Chromeの開発者ツール「Recorder」とは？

Chromeの Recorder 機能では、ブラウザでの一定の操作を記録して、再実行することができます。
例えば、入力フォームへの入力内容と送信ボタンのクリック操作を記録して、再実行することできるようになります。

どんな時に使う？

Chromeの開発者ツールになりますので、WEB開発に携わる人向けの機能になりますが、
例えば、開発中のWEBシステムの動作検証の際に、何回も同じ内容を入力する手間を省きたい場合など、主な用途になると思います。

記録した操作は、Puppeteer形式のファイルにエクスポートして、再利用することができます。
Puppeteer は、ブラウザ操作を自動化するための Node.jsライブラリです。
※この辺の紹介については、また後日の記事で。

「Recorder」の使い方

1. まずはChromeで開発者ツールを起動

Chromeのメニューから「その他のツール」→「デベロッパーツール」をクリック。

ショートカットキーで起動する場合、
Windowsの場合は「F12」または「Ctrl + Shift + i」を押すことでも起動できます。
Mac OSの場合は「command + option + i」になります。

2. Recorderタブを探す

画像のようにタブから「Recorder」タブを探します。

「Start new recording」をクリックします。

3. 名前を入力して記録開始

記録する操作の名前を入力して、「Start new recording」ボタンを押す。

4. ブラウザ操作が完了したら終了ボタンを押す

記録したいブラウザ操作を実際に行い、操作完了したら「End recording」ボタンを押す。

5. Replayボタンで再実行

「Replay」を押すと同じ操作が繰り返されます。

上記の手順で簡単に好きなブラウザ操作を記録することができます。

例えば、開発中の入力フォームなど項目が多く何度も入力するのは手間がかかる場合や、プログラムの修正後の再検証を行いたい場合などに利用することができると思います。

ユニバースでは、ホームページ制作を始め、WordPressの機能カスタマイズなども承っています。

ぜひ、お気軽にお問い合わせください。

WEB制作・デザイン制作のお問い合わせ