Pertanyaan Lacak acara menggunakan Chrome javascript debugger


Saya tidak memiliki kasus penggunaan khusus di sini, tetapi kadang-kadang saya telah membantu seseorang di SO atau melihat efek javascript keren di situs web dan ingin tahu tentang kode yang mendorongnya. Namun, kejadian yang mendorong kode mungkin tidak langsung terlihat jelas. Jika saya tidak dapat menemukan pengendali event maka akan sangat sulit untuk menemukan js yang bertanggung jawab atas efek yang saya minati. Apakah ada cara cepat dalam debugger untuk mengidentifikasi peristiwa yang melekat pada elemen dan untuk menjatuhkan titik istirahat di saat kebakaran?

Jadi misalnya suatu peristiwa mungkin ada pada struktur seperti itu

<div>
  <ul>
     <li><span><img /></span></li>
  </ul>
</div>

Sekarang saya tidak tahu apakah acara terikat ke img, span, li, ul atau div itu sendiri. Chrome memiliki area Acara Pendengar, tetapi saya merasa sepertinya tidak selalu berisi acara. Apa pun yang Anda lakukan yang memungkinkan Anda menemukan acara dengan cepat dan menjatuhkan titik jeda ke dalamnya?


32
2017-08-14 02:56


asal


Jawaban:


ya ada!

temukan elemen yang sedang dimuat ulang dan klik kanan, pilih periksa dari menu konteks, kemudian klik kanan html dari elemen (di panel firebugish bawah), di menu konteks ada opsi untuk:

  • istirahat pada modifikasi subtree
  • istirahat pada modifikasi atribut
  • istirahat pada penghapusan node

Artikel tentang fitur dev baru yang keren di chrome: http://elijahmanor.com/7-chrome-tips-developers-designers-may-not-know/


39
2017-08-14 03:02



Jika Anda memiliki akses ke .js, tambahkan saja "debugger;" pada jalurnya sendiri. Kapanpun Chrome (atau FF) menabrak itu, itu akan memicu debugger dan membiarkan Anda berjalan. Es berguna jika Anda memiliki beberapa ide umum yang kode akan memicu peristiwa tersebut. Lihat http://beerpla.net/2009/12/17/how-to-make-firebugs-javascript-debugger-break-inside-dynamic-javascript-using-the-debugger-keyword-ie-chrome-too/ untuk lebih.


7
2018-01-22 06:23



Klik kanan pada elemen di alat dev chrome, dan klik 'break on', maka Anda akan melihat beberapa pilihan seperti modifikasi sub tree. Atau Anda juga bisa pergi ke chrome //: tracing


0
2017-12-14 04:24