開発者ツールで使える便利なcopy関数

LINEで送る
Pocket

こんにちは。開発者ツールネタです。

ChromeでもFirefoxでもSafariでも使える便利な関数が色々あります。
その中の1つcopy関数について紹介したいと思います。

copy関数とは?

クリップボードに渡した文字列をコピーする関数です。
開発者ツールを起動し、コンソールタブを開く。

と実行した後にペーストしてみてください。xxxがコピーされてると思います。

一点注意なのが、 このcopy関数は開発者ツール以外では使用できない特殊な関数 です。
なので.jsファイルとかにcopyと記述しても「そんな関数無いよ」と言われてしまいます。

便利な使い方

jsでごにょった値をコピーして使う、と言ってしまえばそれまでなんですが、
具体的にどんなケースに使えるんだろうという具体例を考えてみます。

他のブラウザではわかりませんが、少なくともChromeではES6のメソッド群が色々使えるので、それらを使ったワンライナーを書いてみたいと思います。

Cookie周りの操作

[HTTPOnly]属性のついてないCookieであれば、jsから操作できます。

こんなjsを実行すると、_gaという名前のCookieを他のタブへ貼り付けるようのjsとしてコピーできます。

ページのタイトルとURLをコピーする

記事書くときに、他サイトから引用したり参考リンクとして貼ったり、という作業を効率化できます。

ページ中のクラス名の一覧を取得する

ちょっと長いですが、こんな感じでページ中に存在するclass属性の値を全て取得できます。

まとめ

使い方次第で色々な作業を楽にできるので、ぜひ使ってみてください。

LINEで送る
Pocket