5
1

More than 3 years have passed since last update.

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

Posted at

Web コンソールヘルパー - 開発ツール | MDN

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


$(selector, element)

document.querySelector() と同等

Screen Shot 2020-03-15 at 21.10.24.png

$$(selector, element)

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

Screen Shot 2020-03-15 at 21.11.52.png

$0

現在調査されている要素

6ZhiQxCouN.gif

$_

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

n9Ow7Gl7nF.gif

$x(xpath, elemen, resultType)

XPathで指定できる

Screen Shot 2020-03-15 at 21.25.14.png

keys()

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

Screen Shot 2020-03-15 at 21.27.06.png

values()

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

Screen Shot 2020-03-15 at 21.32.38.png

clear()

MamTjPCfVL.gif

inspect()

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

9qU4JvZsLY.gif

pprint()

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

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

e8e81fc70a0f4e52.png

:help

ヘルプを表示する

fifefoxで確認しました

9lyAsHzdxJ.gif

cd()

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

SGNbSEdvUR.gif

copy()

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

Screen Shot 2020-03-15 at 22.18.58.png

clearHistory()

実行履歴を削除

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

:screenshot

スクリーンショット作成

Screen Shot 2020-03-15 at 22.32.40.png

↓取れたスクショ

Screen Shot 2020-03-15 at 22.32.12.png


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

5
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
5
1