ChromeとFirefoxでJavaScript関数の実行結果をクリップボードにコピーする方法

はじめに

ChromeやFirefoxなどのブラウザには、開発者ツール（DevTools）のコンソール上で使える便利なユーティリティ関数が多数用意されています。その中でも特に有用なのが、任意の値やオブジェクトをクリップボードへ直接コピーできる copy() 関数です。

本記事では、copy() を中心に、コンソールで利用できる clear() および profile() 関数の使い方について詳しく解説します。これらの関数はChrome・Firefoxいずれの開発者ツールでも動作するため、日々のデバッグ作業を効率化できます。

copy()：オブジェクトをクリップボードにコピーする

copy() は、指定したオブジェクトや文字列をクリップボードにコピーするための関数です。内部的には次のように実装されています。

InjectedScriptHost.copyText(object);

この関数を使えば、長いJSONデータやDOM要素、変数の中身などを、わざわざ手動で選択・コピーすることなく、一瞬でクリップボードに格納できます。

使用例：

const userData = { name: "Taro", age: 30 };
copy(userData); // オブジェクトの中身がクリップボードにコピーされる

コピーした内容は、そのままテキストエディタやドキュメントに貼り付けることができます。APIレスポンスの調査やログの共有などに非常に便利です。

clear()：コンソールのメッセージを一括消去する

clear() は、コンソールに表示されたメッセージをすべてクリアする関数です。内部実装は以下の通りです。

InjectedScriptHost.clearConsoleMessages();

デバッグ中にコンソールが大量のログで埋まってしまった場合、clear() を実行すれば画面をすっきりリセットできます。なお、ショートカットとして Ctrl + L（Macでは Cmd + K）でも同様の操作が可能です。

profile()：パフォーマンス計測を開始する

profile() は、JavaScriptコードのパフォーマンスプロファイリングを開始するための関数です。内部実装は以下のようになっています。

console.profile.apply(console, arguments)

この関数を実行するとCPUプロファイルの記録が始まり、console.profileEnd() を呼び出すことで記録が停止します。処理のボトルネックを特定したい場合に役立ちます。

使用例：

console.profile("処理計測");
// 計測したい処理をここに記述
heavyFunction();
console.profileEnd();

まとめ

Chrome・Firefoxのコンソールで使える copy()、clear()、profile() は、いずれも開発効率を大きく向上させる強力なユーティリティ関数です。特に copy() はオブジェクトの内容を素早く共有・保存できるため、デバッグやデータ確認の際にぜひ活用してみてください。