Web コンソールヘルパーのMDNを読んで勉強してみた

[Web コンソールヘルパー - 開発ツール | MDN](https://developer.mozilla.org/ja/docs/Tools/Web_Console/Helpers)

ただこちらのリンクを読んで試してみただけの投稿になります。リンク先に書いてある以上のことはやっていないので、リンクを見た方が早いです、よろしくお願いします。
最新のchromeかfirefoxで試しています。

---

# `$(selector, element)`

`document.querySelector()` と同等

<img width="1005" alt="Screen Shot 2020-03-15 at 21.10.24.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142910/aa059293-945f-e82d-c37e-b3535d70f565.png">

# `$$(selector, element)`

document.querySelectorAll() と似ていますが、NodeList ではなく配列を返す

<img width="1005" alt="Screen Shot 2020-03-15 at 21.11.52.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142910/1e0d61b4-b746-9a73-0db1-f763067dc2f8.png">

# `$0` 

現在調査されている要素

![6ZhiQxCouN.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142910/00914f63-f8ee-ee9a-76dc-c064b326f445.gif)

# `$_`

コンソールのコマンドラインで最後に実行した式の結果

![n9Ow7Gl7nF.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142910/829bdbd4-c7d8-2950-20fe-968b588f809d.gif)

# `$x(xpath, elemen, resultType)`

XPathで指定できる

<img width="1005" alt="Screen Shot 2020-03-15 at 21.25.14.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142910/eeeb29e7-f749-eef4-8fe5-647c4d54e33b.png">

# `keys()`

オブジェクトのキーの一覧を返す

<img width="263" alt="Screen Shot 2020-03-15 at 21.27.06.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142910/df8d5eea-d4b0-804f-24b7-3023dc99e5a8.png">

# `values()`

そのオブジェクトの値の一覧を返し

<img width="277" alt="Screen Shot 2020-03-15 at 21.32.38.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142910/0ac0836f-8e1f-23bb-81a5-570e497077c1.png">

# `clear()`

![MamTjPCfVL.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142910/23acc219-8c7f-917a-4c48-6b01a4f29da5.gif)

# `inspect()`

オブジェクトを与えると、そのオブジェクトのオブジェクトインスペクターを開く

![9qU4JvZsLY.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142910/95c42537-efb0-beaa-58c2-a586aa4fe331.gif)

# `pprint()`

指定された値を、読みやすい形式に整形する

firefoxでは動くのは確認できました

<img width="281" alt="e8e81fc70a0f4e52.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142910/7028996a-0ab7-a74b-5beb-b3521abcefa5.png">

# `:help`

ヘルプを表示する

fifefoxで確認しました

![9lyAsHzdxJ.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142910/e5b0f6ed-a9d2-c1d9-6548-4c32ae89e4eb.gif)

# `cd()`

ページ内の別の iframe にカレントが切り替わる

![SGNbSEdvUR.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142910/5f5e9ed3-4699-34cf-fc8c-ec0adbbf70c1.gif)

# `copy()`

> Firefox 38 の新機能。 引数で指定したものをクリップボードにコピーします。引数が文字列である場合は、そのままコピーします。また引数が DOM ノードである場合は、ノードの outerHTML をコピーします。他の値である場合は引数に対して JSON.stringify を呼び出して、その結果をコピーします。

<img width="710" alt="Screen Shot 2020-03-15 at 22.18.58.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142910/b199ccc2-c99d-a110-c830-9bb1e0a499d1.png">

# `clearHistory()`

実行履歴を削除

devtoolsで`↑`ボタンを押せば履歴見れるが、それが削除されていたのを確認しました

# `:screenshot`

スクリーンショット作成

<img width="880" alt="Screen Shot 2020-03-15 at 22.32.40.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142910/800f4ef5-4bc9-c167-6da5-f47c1ab18ae2.png">

↓取れたスクショ

![Screen Shot 2020-03-15 at 22.32.12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142910/0c613f4a-29ec-934a-d387-a51bdd5a66de.png)

---

以上です。見ていただいてありがとうございました。m(_ _)m