Как определить, какой фрагмент JavaScript изменяет данный тег HTML?
Я часто хочу изменить некоторые относительно незначительные детали того, как DOES меняет DOM, но я никогда не могу понять, какая функция в каком скрипте изменяет данный тег. Как это сделать?
Например, на этой странице я хочу, чтобы JS добавлял «выбранные» Класс для различных тегов, чтобы добавить его в теги li. Тем не менее, я понятия не имею, как выяснить, где это происходит.
Пояснение: Как бы я ни хотел получить ответ на мою текущую, конкретную головоломку, я бы предпочел, чтобы меня научили, как это понять.
ПОЯСНЕНИЕ: есть ли способ указать на определенный объект в DOM и выяснить, какие скрипты (ы) обращаются / изменяют этот объект? Другими словами, «смотреть» этот объект для доступа / модификации JS.
2 ответа
Вам нужны точки останова DOM в инструментах разработчика WebKit.
Они предназначены для отслеживания событий мутации DOM — таких как изменение атрибута элемента (в вашем случае), удаление элемента или добавление подэлемента. Вы можете обратиться к учебнику в Документация DevTools.
В основных случаях вы можете использовать grep для поиска строк, таких как «selected» в вашем коде.
Мне неизвестны какие-либо средства отладки, которые сообщат вам, когда скрипт воздействует на элемент DOM.
(Если кто-нибудь знает что-нибудь, дорогой лорд, пожалуйста, расскажите мне о них — я фрилансер, поэтому я провожу большую часть своего рабочего дня, пытаясь выяснить старый, запутанный DOM-манипулирующий JavaScript, который написал кто-то другой.)
В основном вам нужно искать каждый бит JavaScript-файла, включенного в страницу, и выявлять строки, которые могут выполнять действие, которое вы видите.
В случае добавления имени класса к элементу очевидным является поиск самого имени класса, хотя это не гарантируется. Например.
Если jQuery используется, я определенно буду искать addClass .
Если вы считаете, что нашли правильную строку, то, если у вас есть доступ к коду JavaScript, вы можете изменить его и посмотреть, вступят ли ваши изменения в силу.
(И поскольку исходный вид по-прежнему является частью Интернета, вы можете получить доступ к коду, сохранив его на своем компьютере.)
Как узнать, какой JavaScript изменяет стиль элемента?
У меня есть элемент, стили которого применяются через JavaScript. Я не уверен, где именно; есть ли способ проверить Firebug, чтобы показать, откуда на самом деле происходит «element.style»?
5 ответы
Если вы уверены, что он установлен на встроенном style а не как следствие правила таблицы стилей, вы можете обнаруживать изменения с помощью нестандартной программы Mozilla смотреть() Метод:
Вы можете поставить debugger; в функции-наблюдателе и найдите стек вызовов в Firebug, чтобы узнать, где было инициировано изменение.
ответ дан 04 авг.
Кто-нибудь может рассказать нам, что мы делаем / куда мы помещаем приведенный выше код? — user1794295
@ user1794295 в jQuery $ (document) .ready (function () ); или что-то подобное — Коти Эмбри
Удалено с FF 58. — Outis
Вы также можете щелкнуть правой кнопкой мыши элемент на панели HTML до того, как стиль будет установлен, и выбрать разрыв при изменении атрибута. Панель скриптов должна быть включена.
ответ дан 04 авг.
Я не вижу опцию «Прерывание при изменении атрибута». — Cawecoy
Если у вас установлен firefox, вы можете установить флажок «Прерывание при изменении атрибута» на вкладке HTML. Просто щелкните правой кнопкой мыши целевой элемент, и появится всплывающее меню. После этого измените размер окна, и оно прервется в строке скрипта, где изменен атрибут.
ответ дан 23 мая ’17, 12:05
Я не вижу опцию «Прерывание при изменении атрибута». — Cawecoy
Это меню совершенно другое в текущем FireFox, и в нем нет никаких действий «Перерыв». — Бармар
Я думаю, что это инструмент по умолчанию для работы, хотя он имеет ограниченные возможности отладки: https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver
Также убедитесь, что Блокировщик рекламы не несет ответственности.
ответ дан 15 апр.
Да, приостановить блокировку рекламы, если стиль меняется на «нет». Моя проблема заключалась в том, что img не отображался, а имя файла / URL содержало «рекламу». — Джон Ренсби
Вы можете открыть представление сценария и выполнить поиск по запросу «.style» в поле поиска.
Как отследить, какой Javascript манипулирует с данным элементом HTML?
Я пытаюсь понять, как работает шаблон. Если я открою его в браузере, я увижу несколько элементов. Но если бы я исследовал код HTML — контейнеры с элементами, появившимися в браузере, просто пустые. Это просто: это означает, что эти контейнеры управляются некоторым кодом JS. Однако я попытался найти идентификатор контейнера во всех файлах JS, упомянутых в основном документе HTML, и не удалось.
Я думаю, что мне нужен какой-то инструмент, который позволит мне отслеживать JS, который изменяет данный элемент (поместите точку прерывания или создайте журнал изменений HTML. ).
Как узнать что изменило HTML элемент?
При клике на одну из кнопок на сайте исчезает другая кнопка. ( display:none ) Так не должно быть, и не могу найти код где это делается!
В консоли Google Chrome и Mozzila Firefox не нашел.
Проект большой. В поиске по файлам искал. ничего. магия.
В Google Chrome это делается очень просто:
Открываете Developer Tools(F12), инструментом выбора(CTRL+SHIFT+C) находите нужный элемент, и в контекстом меню этого элемента в дереве элементов выбираете функцию «Break On», c необходимым условием — при изменении подэлементов, изменении атрибутов или удалении элемента.
При соответствующем изменении, отладчик JavaScript остановится на строчке кода, которая это изменение вызвала.