javascript - Chrome開発者ツールでデータ属性値をライブで表示するにはどうすればよいですか？

Question

開発者ツールでDOMを探索するときに、値を確認したいと思います。また、可能であれば、JavaScriptの要素にバインドされているものを確認してください。これはプラグインを使用して可能ですか、それともどのようにすればよいですか？

Answer 1

データ属性は要素で確認できます: http://cl.ly/0w3V2H311E21241J2j45

jQuerys を使用している場合.data()、要素のデータ属性は変更されないため、呼び出し.data()て表示する必要があります。DOM エクスプローラーで表示できるプラグインは知りません。

要素をクリックすると、右側にイベント リスナーが表示されます。CSS ルールの一番下までスクロールすると、「イベント リスナー」というセクションが表示されます: http://cl.ly/2f3c3z312c3D2w43321s

Answer 2

Chrome 開発者ツールのみの使用に制限されている場合は申し訳ありません。

ただし、Firefox を使用できる他のユーザーにとっては、Firebug の優れた拡張機能であるFireQueryがあることを知っておくと役立つ場合があります。