Как узнать какой js выполняется в элементе

Как через гугл хром определить, какой скрипт за что отвечает?

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

В Chrome Dev Tools:

Elements → Right Click на элементе → Break On. → Attributes Modifications.

Дальше вызвать поворот, и посмотреть какой скрипт полезет менять аттрибуты элемента.

Вам выведутся все события, привязанные к данному элементу, и останется искать нужную функцию, скрипт и разматывать клубок логики.

Дизайн сайта / логотип © 2023 Stack Exchange Inc; пользовательские материалы лицензированы в соответствии с CC BY-SA . rev 2023.3.13.43306

Нажимая «Принять все файлы cookie» вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.

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

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

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

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

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

4 ответы

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

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

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

Перехват модификации DOM

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

РЕДАКТИРОВАТЬ после достижения десяти голосов!

Перехват изменения объекта JS

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

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

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

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

Как узнать, какой js-файл или функция применяет встроенный CSS в мой элемент

У меня есть встроенный CSS в моем элементе, который я не хочу. На моем сайте много js, и я не знаю, откуда этот css. Любая помощь будет отличной.

3 ответа

На вашем месте я бы использовал removeAtrr (), чтобы удалить все встроенные стили для этого элемента:

После этого я снова установлю любой стиль через внешний CSS-файл или JavaScript, если это необходимо.

Или, если вы хотите переопределить встроенные стили, вы также можете попробовать использовать атрибут !important в css.

Я думаю, что самый надежный способ сделать это — использовать инструменты разработчика браузера для запуска js по одной строке за раз. Это покажет вам точную точку выполнения кода, где добавлен стиль. Вот ссылка, демонстрирующая, как использовать точки останова: https: // developers. google.com/chrome-developer-tools/docs/javascript-debugging#breakpoints

В противном случае, если вы уверены, что код будет функцией jQuery, выполните поиск .css( . Если возможно, что изменение сделано без jQuery, найдите .style. . Некоторые другие возможности: fadeIn , fadeOut и animate . Как только вы найдете какой-либо из них, вы можете отслеживать, к какому элементу они применяются, чтобы определить, имеют ли они отношение к элементу, который вы хотите изменить.

Как узнать какой js выполняется в элементе

Профиль
Группа: Завсегдатай
Сообщений: 1423
Регистрация: 19.9.2004

Репутация: нет
Всего: 20

Здравствуйте!
Вопрос не о JS программировании, но смежный.

Есть страничка на которой ловится event (любой onClick/onMouseOver, не важно) и куча файлов с javascript`ом.
Есть ли утелита, чтобы узнать — какой JS код выполняется при срабатывании события? Что-то вроде Javascript Tracer?

В Firefox`e есть ErrorConsole, но он показывает только ошибки которые произошли в ходе выполнения. (

Это сообщение отредактировал(а) Рыжий — 23.8.2009, 23:41

Профиль
Группа: Awaiting Authorisation
Сообщений: 7192
Регистрация: 4.11.2006
Где: Минск City

Репутация: нет
Всего: 191

Профиль
Группа: Участник
Сообщений: 809
Регистрация: 29.4.2005
Где: Иркутск

Репутация: 6
Всего: 16

Профиль
Группа: Завсегдатай
Сообщений: 1423
Регистрация: 19.9.2004

Репутация: нет
Всего: 20

Спасибо, про Firebug я знаю, проблема именно в том, как отловить какой JS выполняется, а в FireBug я этого не нашел (

Приведу пример:
Вот страничка http://demo.rockettheme.com/?template=hyperion вверху справа есть кнопка "Member Login" при клике она "спускается" хотя явного указания onClick="" — нет, как узнать какой JS выполняется?

*Раньше я решал эту проблему постепенным удалением JS файлов через FireBug и после какого файла она перестает работать — бинго. Но, надеюсь, есть способы получше.

Профиль
Группа: Участник
Сообщений: 133
Регистрация: 6.9.2007

Репутация: 1
Всего: 1

В Firebug можно наблюдать за вызовом нужной функции. почитай просто документацию к firebug/

к примеру в твоем случае. нужно перейти во вкладку "Scripts" и нажать на паузу, а затем нажать на кнопку "Member login" на сайте,

и тебе будет указано в каком файле та функция, scopeChain и пару других параметров

Профиль
Группа: Завсегдатай
Сообщений: 1423
Регистрация: 19.9.2004

Репутация: нет
Всего: 20

А разве это не дает отладку всего js?

Из подходящего нашел в FireBug`е — вкладка Console — Profile. Делаем нужные действия и смотрим результат.

Хотя результат иногда может быть пугающим — пробовал на сайте Яндекс погоды проследить как работает виджет "Погода на удачу", а именно его ручка. В итоге по нажатию — 5215 запросов. ищи свищи какой из них крутит ручку =(

Профиль
Группа: Участник
Сообщений: 133
Регистрация: 6.9.2007