Як я можу перевірити зникаючий елемент у браузері?

Як я можу перевірити елемент, який зникає, коли миша відсувається?

Я не знаю, це ID, клас чи щось інше, але хочу перевірити його.

Я спробував рішення:

Запустіть селектор jQuery всередині консолі, $('*:contains("some text")')але не пощастило головним чином тому, що елемент не приховано, але, ймовірно, видалено з дерева DOM.

Ручний огляд дерева DOM на предмет змін не дає мені нічого, оскільки, здається, це занадто швидко, щоб помітити, що змінилося.

УСПІХ:

Я маю успіх з точки зору перерв на події Конкретно - в моєму випадку замазаний. Просто перейдіть Sources-> Event Listener Breakpoints-> Mouse-> mousedownу Chrome. Після цього я натиснув елемент, який хотів оглянути, і всередині Scope Variablesя побачив кілька корисних вказівок.

(Ця відповідь стосується лише Інструментів для розробників Chrome. Дивіться оновлення нижче.)

Знайдіть елемент, який містить елемент, що зникає. Клацніть правою кнопкою миші на елементі та застосуйте "Перерва на ...> Зміни підкреслень". Це викине паузу налагодження до зникнення елемента, що дозволить вам взаємодіяти з елементом у призупиненому стані.

Оновлення 22 жовтня 2019 року: з випуском версії 70, схоже, FireFox нарешті підтримує цей вид налагодження 2 3 :

Альтернативний метод у Chrome:

• Відкриті програми devTools (F12).
• Виберіть вкладку "Джерела".
• Поки потрібний елемент відображається, натисніть F8 (або Ctrl + /). Це порушить виконання сценарію та "заморозить" DOM ​​саме так, як він відображається.
• З цього моменту використовуйте Ctrl + Shift + C для вибору елемента.

1. Відкрити консоль
2. Введіть setTimeout(()=>{debugger;},5000);
3. Натисніть Enter

Тепер у вас є 5 секунд, щоб ваш елемент з'явився. Як тільки він з’явився, зачекайте, поки налагоджувач не потрапить. Поки ви не поновлюєтесь, ви можете грати зі своїм елементом, і він не зникне.

Корисна порада, щоб не повторювати ці кроки вище кожного разу:

додайте це як закладку:

1. Закладка будь-якої сторінки
2. Відредагуйте цю нову закладку
3. Замініть URL / місце на: javascript:(function(){setTimeout(()=>{debugger;},5000);})();

Наступного разу, коли ви бажаєте використовувати це, просто натисніть / торкніться цієї закладки.

Я використовую хром на Mac, я дотримувався вищезазначених кроків, але спробую пояснити трохи більше:

1. Клацніть правою кнопкою миші та перейдіть до огляду елемента.
2. Перейдіть на вкладку "Джерела".
3. Потім наведіть курсор на елемент.
4. Потім за допомогою клавіатури F8 або Command(Window) \ . Це призупинить екран у статичному стані, і елемент не зникне, якщо навести курсор.

У Firebug для цього є різні рішення:

1. Ви можете використовувати Break On Mutate всередині панелі HTML. (за допомогою цього ви також зможете дізнатися, який це елемент)
2. Ви можете клацнути правою кнопкою миші елемент і вибрати Оглянути елемент за допомогою Firebug

Також ви можете скористатися проблемою 551 , яка запитує спосіб тимчасового блокування конкретних подій.

Редагувати:

Щоб дізнатися, який це елемент, ви також можете включити параметри панелі HTML Виділити зміни , розгорнути зміни та прокрутити зміни до перегляду, щоб зробити елемент видимим на панелі HTML.

Себастьян

У моєму випадку я використовував рекурсивну опцію Expand на Google Chrome:

Етапи:

1. Перевірте спадне поле
2. Знайдіть динамічний DOM (фіолетовий колір)
3. Клацніть правою клавішею миші на цьому динамічному DOM
4. Виберіть " Розгорнути" рекурсивно :
5. Ми можемо бачити, що всі елементи є

Ось демонстрація:

Наведіть курсор миші на елемент і натисніть клавішу F8 (це в Chrome), щоб призупинити виконання сценарію. Стан, що наближається, залишиться видимим для вас.

Він перенесе вас на вкладку джерел. Поверніться на вкладку «Елементи». Цей тимчасовий код не зіпсує.

ви можете переглянути елементи, які з’являються та зникають у інспектора під елементами. Якщо ви переходите до елемента, коли він видно, ви повинні мати можливість бачити його зникнення або бачити його зміну css при зміні статусу.

Це можливо за допомогою firebug у firefox або вбудованого інспектора з хрому.

У мене була така ж проблема, але я використовую Firefox, вона зникає, як тільки я відкриваю елемент перевірки, знайшов рішення: відкрийте 4 тире (налаштування), перейдіть до веб-розробника> Налагоджувач і негайно натисніть F8, що є ярликом для паузи, що зупиняє сценарій перед тим, як почати і виявити, що ви відкрили інструменти для розробників