Google Chrome でページ上の任意の要素(オブジェクト)の詳細を表示する方法

▼ クリックすると、GIF アニメーション画像が画面中央に大きく表示されます

( 最初の停止は 4秒で、途中の文字説明は4秒停止します。最後6秒停止して元へ戻ります )

現行のブラウザでは、皆 console.log と console.dir が実行できますが、Google Chrome でオブジェクトを表示したい場合3通りの方法があります。

1) $("セレクタ")
2) console.log( オブジェクト )
3) dir( オブジェクト )

1) は、コマンドライン API のメソッドで、jQuery が読み込まれていなくても同じ記述でオブジェクトを参照できます。
1) と 2) は同じ結果の場合もあれば違う場合もあるので目的に応じて利用するといいと思います。
3) は、console.dir の別名で、オブシェクトの情報を階層構造で全て表示します。

これらを使い、ページ上のインスペクトされた任意の要素を表示する手順です。

1) 要素を選択( 虫眼鏡アイコンでインスペクトモードに入って選択 )
2) Elements タブで対象としたいオブジェクトを確定させる
3) 右クリックして Copy CSS path でセレクタ文字列を取得
4) $("セレクタ文字列") で参照します