Подтвердить что ты не робот

Отслеживать события с помощью отладчика JavaScript javascript

У меня здесь нет конкретного случая использования, но иногда я либо помогал кому-то в SO, либо видел замечательный эффект javascript на веб-сайте, и ему было любопытно, какой код его управляет. Однако событие, которое управляет кодом, может быть не сразу очевидным. Если я не могу найти обработчик событий, то может быть очень сложно найти js, ответственных за интересующие меня эффекты. Есть ли быстрый способ в отладчике идентифицировать события, связанные с элементом, и оставить точку останова когда он срабатывает?

Так, например, событие может существовать в структуре примерно так

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

Теперь я не знаю, связано ли событие с img, span, li, ul или div. У Chrome есть область прослушивателей событий, но я чувствую, что он не всегда содержит события. Все, что вы, ребята, делаете, что позволяет быстро найти событие и сбросить в него точку останова?

4b9b3361

Ответ 1

да есть!

найдите элемент, который перезагружается и щелкните правой кнопкой мыши, выберите проверку из контекстного меню, затем щелкните правой кнопкой мыши элемент html элемента (в нижней панели firebugish), в контекстном меню есть варианты:

  • перерыв на модификациях поддеревьев
  • изменить атрибуты атрибутов
  • перерыв node удаление

Статья об удивительных новых функциях dev в хроме: http://elijahmanor.com/7-chrome-tips-developers-designers-may-not-know/

Ответ 2

Если у вас есть доступ к .js, просто добавьте "отладчик"; по собственной линии. Всякий раз, когда Chrome (или FF) попадает в него, он запускает отладчик и позволяет вам пройти. Esp полезен, если у вас есть общее представление о том, какой код вызовет событие. Подробнее см. http://beerpla.net/2009/12/17/how-to-make-firebugs-javascript-debugger-break-inside-dynamic-javascript-using-the-debugger-keyword-ie-chrome-too/.

Ответ 3

Щелкните правой кнопкой мыши элемент в инструментах chrome dev и нажмите "break on", после чего вы увидите несколько вариантов выбора, таких как модификации поддерева. Или вы также можете перейти к chrome//: tracing