それマグで!

知識はカップより、マグでゆっくり頂きます。 takuya_1stのブログ

習慣に早くから配慮した者は、 おそらく人生の実りも大きい。

ChromeのDeveloper tools(開発ツール)のコンソール(コマンドライン)で出てくる記号と関数

chrome の dev tools に出てくる関数

$ と $$ の違い

$ = document.querySelector
$$ = document.querySelectorAll

$x は Xpath

$x('//a')

xpath は組み立てと呼び出しが面倒なので、とても嬉しい。

その他の関数をマトメておくと

クエリ系

  • $
  • $$
  • $x

直前のものを再利用

  • $_

選択された要素

  • $0
  • $1
  • $2
  • $3
  • $4

デバッグ

  • debug
  • monitor/unmonitor
  • table
  • copy
  • profile/profileEnd

要素やオブジェクトの検証

  • inspect

イベントハンドラの監視と調査

  • getEventListeners
  • monitorEvents/unmonitorEvents

参考資料

https://developers.google.com/web/tools/chrome-devtools/console/command-line-reference?hl=ja#04