Посмотрите, какой файл JavaScript применяет стиль к элементу

Question

Я пытаюсь найти, какой JavaScript применяет «display: inline» к элементу изображения. Как вы можете видеть на прилагаемом рисунке, «дисплей: нет» не становится переопределены, но я понятия не имею, где «дисплей: встроенный» исходит от:

Источник представляет собой PHP-файл со многими. js-файлы. Я попытался использовать точки останова в своих инструментах разработчика Chrome, но потерял их при перезагрузке страницы. Любые идеи, как я могу определить JS-код, применяющий «display: inline»?

Answer 1

Это работает для меня в Chrome:

1. Открыть страницу
2. Щелкните правой кнопкой мыши элемент и выберите соответствующий элемент
3. В представлении DOM, щелкните правой кнопкой мыши элемент в DOM дереве
4. В нижней части меню (для меня) выберите Break On> изменения атрибутов
   (позже, если вы хотите удалить это, оно переименовано в контрольные точки DOM)
5. Если модификация уже произошло, нажмите обновить

Когда я делаю это, точка останова останавливает код, заходящего .style.display = "inline" на элементе (даже на обновления страницы) линии.

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

Если DOM останова не выжить страницу обновления для какой-то причине, но элемент определяется разметкой, то:

1. Изменение разметки страницы, так что сразу после закрывающего тега элемента, у вас есть <script>debugger;</script>, как это:

   <div>This is the element</div> 
   <script>debugger;</script> 
   <div>The next element...</div> 
   

   (Обычно мы не сорят script tĀ gs по всему нашему HTML, но это сеанс отладки.)

2. Открытые инструменты Dev

3. Откройте страницу; он остановится на debugger выше высказывании

4. Перейдите в режиме просмотра DOM и найти элемент там (это будет в непосредственной близости от дна)

5. правой кнопки мыши и выберите Break On> атрибуты модификации

6. Хит Возобновить стрелку, чтобы позволить вещам продолжать

Это должно позволить вам установить DOM точку останова в тим e, чтобы поймать все, что его модифицирует.

И наконец: если элемент добавлен кодом скрипта, вам нужно будет найти код, добавляющий его (blech), и установить точку останова сразу после ее добавления, чтобы вы могли выбрать шаг №4 во втором списке выше ,