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でコードが実行される