chromeデベロッパーツールのconsoleでオブジェクトをコピーする

consoleに出力したオブジェクトをコピペしたいということがあったので、方法をメモしておきます。

やりたかったこと

今回やりたかったことは、YouTubeの自分のプレイリストのページからタイトルと動画IDのリストをオブジェクト形式で取得することです。
取得自体はデベロッパーツールのconsoleで下記コードを実行することで取得できました。

const $item = document.querySelectorAll('ytd-playlist-video-renderer');
const ytList = [];
for (var i = 0; i < $item.length; i++) {
  ytList.push({
    'title': $item[i].querySelector('#video-title').getAttribute('title'),
    'id': $item[i].querySelector('#video-title').getAttribute('href').replace('/watch?v=', '').split('&list')[0]
  });
}
console.log(ytList);

ただ、取得した内容を展開すると以下のようになり、コピペしてそのまま使用することができません。

対応方法

consoleに出力した内容を右クリックすると、「Store object as global variable」という項目が表示されるので、選択します。

temp1という変数で保存されるので、以下をconsoleで実行してクリップボードにコピーします。

copy(temp1)

基本的にはこの方法でコピペできるのですが、YouTubeの場合は以下のようにエラーが表示されます。

Uncaught TypeError: copy is not a function

調べてみると、YouTubeのページ内に#copyが付いた要素があるのが原因のようです。
consoleで下記を実行して、#copyを削除後に再度コピーを試してみると上手く取得できました。

document.querySelector('#copy').remove();

今回はconsoleで実行した内容を取得しましたが、APIで取得した内容をコピペしたい場合などでも使えそうです。