Отслеживание событий с помощью отладчика Chrome javascript - PullRequest
32 голосов
/ 14 августа 2011

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

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

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

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

Ответы [ 3 ]

39 голосов
/ 14 августа 2011

да, есть!

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

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

Статья на Awesomeновые функции разработчика в Chrome: http://elijahmanor.com/7-chrome-tips-developers-designers-may-not-know/

7 голосов
/ 22 января 2012

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

0 голосов
/ 14 декабря 2013

Щелкните правой кнопкой мыши по элементу в инструментах Chrome Dev и выберите «Разбить», после чего вы увидите несколько вариантов выбора, например, модификации поддерева.Или вы также можете перейти на Chrome //: трассировка

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...