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

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

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

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

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

ОТВЕТЫ

Ответ 1

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

Отслеживание прослушивателей событий

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

Ловушка модификации DOM

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

EDIT после достижения десяти голосов!

Ловушка модификации объекта JS

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

company.data.myObject.parameter = undefined;

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

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

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

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

Ответ 2

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

Ответ 3

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

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

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

Ответ 4

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

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