chrome devtools 小ネタいくつか

jQueryが入っていなくても$$で同じことができる

$$('.foo'), $$('#bar'), $$('tagName')で同等のことができる
（$が2個であることに注意）

ただし、

• $('selector')はdocument.querySelector()
• $$('selector')はdocument.querySelectorAll()
  を呼ぶことと、それぞれ似た様子。しかも$$('selector')だと配列を返す

イベント発生を監視してログ出力

• monitorEvents($('selector'))で全てのイベントを監視
• monitorEvents($('selector'),'eventName')で指定のイベントを監視
• monitorEvents($('selector'),['eventName1','eventName3',….])で複数のイベントを指定
• unmonitorEvents($('selector'))で監視解除

オブジェクトの配列の場合はconsole.logよりconsole.tableの方がよさげ

const myArray=[
  {a:1,b:2,c:3},
  {a:1,b:2,c:3,d:4},
  {k:11,f:22},
  {a:1,b:2,c:3}
]

console.table(myArray)とすると

こんな感じになるので、わかりやすくなる。

Sourcesタブで表示しているJSコードのうち、任意のコードをConsoleで実行することができる

1. SourcesタブでJavaScriptコードを表示する

2. 実行したい箇所のコードを選択する

3. 右クリックしてメニューを表示し、Evaluate in consoleを選択する
   

4. Consoleでコードが実行される