Как найти, что Javascript работает на определенных событиях?

Я выберу Chrome для этого примера, но я открыт для решения из любого браузера.

Случае Использовать : У меня есть кнопка обновления на моем сайте, который используется для обновления количества товара в корзине. Я хотел бы позволить пользователю ввести 0 и нажать update, чтобы удалить элемент. Проблема в том, что в какой-то функции js есть прослушиватель, который отрицает возможность ввести 0 и нажать update (после нажатия update остается старое количество).

мой вопрос, какой инструмент разработчика я могу использовать, чтобы найти, какая функция js работает во время этого события? Я не думаю, что инспектор Chrome делает это, и я не очень хорошо знаком с Firebug, но я не мог найти там функциональность.

Я чувствую, что я должен быть в состоянии проверить JS увольнения так же, как я делаю CSS stylings. Кто-нибудь знает инструмент, который я могу использовать?

4 ответов


мне пришлось отлаживать некоторые особенно неприятные невидимые проблемы Javascript на моей работе. Знание полной глубины инструментов разработчика, таких как Chrome, определенно полезно. Несомненно, требуется некоторое творчество, чтобы найти места, которые могут быть причиной проблемы, но несколько советов:

отслеживание слушателей события

в представлении элементов Chrome попробуйте проверить элемент (щелкните правой кнопкой мыши, проверить); затем в правой части представления разработчика прокрутите вниз до прослушивателей событий. Здесь вы можете просмотреть, какие файлы кода подключили событие. Часто это просто укажет вам на среднюю структуру из действительно хитрого кода, который вы ищете, но иногда это укажет вам в правильном направлении.

захват модификации DOM

многие из нежелательных эффектов, которые я вижу, из-за чего-то изменения некоторого значения или атрибута на странице, которую я не хочу. В любое время это произойдет, вы можете щелкнуть правой кнопкой мыши на элементе (под видом элементов) и сказать - Перерыв..."и конкретный сценарий, который вы ищете. Когда Chrome затем попадает в точку останова, вы можете посмотреть вниз в трассировке стека, пока не найдете что-то узнаваемое, что не следует вызывать.

редактировать после достижения десяти голосов!

захват модификации объекта JS

если изменение, которое вас интересует, является внутренним кодом, а не в пользовательском интерфейсе, все становится сложнее. Под этим сценарием подразумевается, что вы знаете где-то в коде, что-то невероятно раздражает, как происходит следующее.

company.data.myObject.parameter = undefined;

в этой ситуации, ты знаешь myObject все тот же объект, но он изменяется, возможно, непреднамеренно. Для этого я часто вставляю следующий бит кода, иногда только через консоль разработчика в какой-то момент, прежде чем произойдет указанное изменение.

Object.defineProperty(company.data.myObject, 'parameter', {
  set: (val) => {
    debugger;
  }
});

Это включает в себя функцию стрелки - вы используете это только для отладки и Chrome поддерживает его, так что можно также сохранить нажатия клавиш. Что? это приведет к замораживанию вашего отладчика, как только некоторая строка кода попытается изменить myObject 's"parameter" имущество. Вам не обязательно иметь глобальную ссылку на переменную, если вы можете запустить эту строку кода из предыдущего останова, которая будет иметь данный объект в местные жители.


в противном случае, если все, с чего я начинаю, это HTML-код, и я хочу связать его с кодом Javascript, я часто буду просто искать идентифицирующие функции, такие как элементы" id", и искать все файлы JS в моем каталоге разработки для него. Обычно, я могу добраться до него довольно быстро.


  1. откройте страницу в Firefox с включенным Firebug.
  2. перейдите на вкладку консоль в firebug и нажмите профилирование
  3. введите 0 в поле и нажмите кнопку.
  4. остановка профилирования.
  5. вы сможете увидеть все функции javascript, которые были выполнены из-за ваших действий. Вы можете просмотреть их один за другим, чтобы выяснить, какой метод вызвал вред.

идем к вам код. Если вы используете jquery, будет функция, которая будет вызываться с классом или идентификатором этой кнопки обновления particulat. Или, если вы используете javascript, будет функция, называемая внутри

Это два способа найти функцию, которую она называется нет программного обеспечения, которое я знаю


скачать Firebug на Mozilla Firefox откройте его, нажмите на кнопку Net и обновите свой веб-сайт. Чем вы можете увидеть, какие файлы загружаются на странице.

если вы хотите проверить на ошибки и что не так с объяснением, чем нажать на console и обновите страницу еще раз. Вы увидите ошибки, и на какой линии он идет не так.

Примечание: в console, вы можете сказать hold или stop, так что js загрузка файла прекращается. И вы можете редактировать сценарий нажав на кнопку script в Firebug. Отладка проста, как говорится на их официальной странице https://getfirebug.com/javascript