console.logで出力したデータをコピーしてテキストエディタで確認する

こんにちはMIYACHIN (@_38CH) です。

AngularとかVueとかのJavaScriptフレームワークでサーバーサイドからデータを取得してきた時に、ちゃんとデータが入っているかとか、オブジェクトのデータ構造を確認するために、console.logでブラウザのDeveloper Toolsに吐き出すことがよくあります。

しかし、そのオブジェクト配列の長さが50個とかある場合、いちいちconsoleをポチポチしながら、中身を見ていくのは辛すぎます。できれば、command + Fとかで検索したいです。

この記事では、console.logで吐き出した内容をテキストエディタにコピペできるように、クリップボードにコピーする方法をご紹介します。

まずはいつものように吐き出して見る

テキトーなJavaScriptを書きます。

var data = [
    {
        user_id: 123,
        name: "Jon",
    },
    {
        user_id: 456,
        name: "Mike",
    },
    {
        user_id: 789,
        name: "Bob",
    }
];
console.log(data);

console.logにこんな感じで出てきますね。

オブジェクト3つなので、目視でもチェックできますが、何十個とかなるとやっぱり辛いです。

temp変数に格納してあげる

吐き出されたログの上で右クリックすると、“Store as global variable” という項目があるので、クリックしましょう。

そうすると、下にtemp1という変数が新たに作成されて、その中にデータの中身が代入されています。

copy() でクリップボードにコピー

あとは、copy関数を使うとクリップボードにデータを追加することができます。

これで、コピーが完了しました。

テキストエディタ上で、command + Vとかをしてあげると、console上のデータがペーストできると思います。