Chrome DeveloperToolのconsoleの使い方
Developer Toolのconsoleを上手く使いこなせていなかったのでmemoです。
console.log()しか使ったことない人とかいませんか？
consoleパネルで使える Command Line API を覚えるとデバックが捗るので よく使うものをまとめてみました。
コマンドライン API とは？
Developer ToolのConsole 内で使える便利関数のことです。
$_
$_には最後に評価した式の結果が保存されています。
$0 〜 $4
$0から$4にはElementsパネルで選択した要素が5つ保存される
$() と $$()
$(selector)は、指定された CSS セレクターを含む最初の DOM 要素への参照を返します。この関数は、document.querySelector() 関数のエイリアスです。
$$(selector) は、指定された CSS セレクターに一致す
dir(object)
dir(object) は、指定されたオブジェクトのすべてのプロパティをオブジェクト スタイルのリストで表示します。このメソッドは、コンソール API の console.dir() メソッドのエイリアスです。
inspect()
inspect(object/function) は、指定された要素またはオブジェクトを適切なパネルで開いて選択します。
getEventListeners()
getEventListeners(object) は、指定されたオブジェクトに登録されているイベント リスナーを返します。戻り値は、各登録済みタイプ（"click"、"keydown" など）の配列が含まれているオブジェクトです。各配列のメンバーは、各タイプに登録されているリスナーを記述するオブジェクトです。
monitorEvents() & unmonitorEvents()
monitorEvents()は要素とイベントを指定することで、その要素に対するイベントの発生をモニタリングすることができます。
ChromeのDeveloper Toolを使ったデバック方法についてもう少しいろいろ書きたいな...
参考
