Перевірка випадаючих меню в новому Chrome

Я працюю на версії Chrome 41.0.2272.101 м (найновіша), і це оновлення зіпсовано. Вони кажуть, що коли у вас відкрито інспектор, будь-яка зміна DOM буде блимати фіолетовим кольором на зміненому елементі (як у Firefox), але зараз я не можу перевірити будь-який об'єкт, що наведений (також як у FF, саме тому мені не подобається використовувати його при розробці інтерфейсу).

Я говорю про події, що ініціюються js, наприклад, про superfish. Раніше я міг наводити меню і накривати меню інспектором, і меню залишалося відкритим, і я міг зайти в інспектор, побачити, які псевдоелементи створюються, змінити відступи та подібні безпосередньо, і побачити зміни. Тепер, коли я навожу меню і натискаю правою кнопкою миші, щоб перевірити його, меню закривається, і я не можу його перевірити!

Я спробував перетягнути інспектора, але нічого не допомогло. Ця нова "функція" дратує. Чи є спосіб перевірити події, викликані js, не ставлячи точки зупинки на елементах (що працює, але це певний біль у дупі)?

Наведіть курсор на елемент за допомогою миші та натисніть F8 (це буде працювати лише в Chrome), щоб призупинити виконання сценарію. Стан наведення буде залишатися видимим для вас. Якщо ви перебуваєте на Mac, можливо, вам доведеться відкрити системні налаштування та встановити прапорець "Використовувати всі F1, F2 тощо" (Або просто використовувати fn + F8).

Іноді це працює, лише якщо ви перебуваєте на вкладці Джерела інспектора.

Залежно від типу елемента меню, я зіткнувся з цією проблемою із випадаючими меню введення. Причина, через яку він зникає, коли я його перевіряю, полягає в тому, що blurподія завжди запускається на елементі, коли я клацну в будь-якому місці поза елементом.

Одним із способів перевірити елемент є запобігання спрацьовуванню події розмиття - це видалення прослуховувача подій розмиття:

• Перевірте елемент введення в Chrome
• Перейдіть на вкладку Слухачі подій і видаліть подію розмиття

Після видалення події розмиття ви можете відкрити меню та перевірити його, не зникаючи

У Chrome натисніть F12, щоб відкрити консоль розробника, потім натисніть Налаштування (значок шестірні) або натисніть F1:

потім знайдіть і встановіть прапорець "Емулювати сфокусовану сторінку".

На Mac ви можете натиснути cmd+, \щоб призупинити сценарій після відкриття спадного меню. Потім можна використовувати shift+ cmd+ cдля перевірки елементів.

Тепер, коли я навожу меню і натискаю правою кнопкою миші, щоб перевірити його, меню закривається, і я не можу його перевірити!

Я зіткнувся з тією ж проблемою, і те, що я використав, - це параметр Розширити рекурсивно на інструментах chrome dev:

Етапи:

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

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

Ви можете встановити інтервал, який щосекунди виписує вміст даного елемента на консолі JS. Опустіть це в консоль і відкрийте спадне меню.

setInterval(() => 
    console.log(document.querySelector('.Select-menu-outer').outerHTML),
1000)

У Firefox

В Інспекторі клацніть правою кнопкою миші на вузлі, що містить спадне меню, виберіть:

Перерва на ...> Модифікація піддерева

Це призупинить виконання, коли випадаючий момент буде ... ну ... опуститься.

Я думаю, ви можете використовувати редактор CSS у Chrome, щоб застосувати стан, наприклад, стан "наведення".

В Інструментах розробника ви вибираєте елемент. На правій руці у вас є квадрат зі стрілкою над ним. Клацніть на це, і ви зможете вибрати штат. Наприклад, виберіть курсор, і ви побачите як своє вікно, так і оновлення CSS, ніби елемент зараз наведений.

Жоден із вищезазначених засобів не працював для мене. Оскільки наше спадне меню (на основі React) закриватиметься при будь-якому натисканні клавіші (праворуч або ліворуч). Отже, ми з’ясували нижченаведене обхідне рішення:

• У інструментах розробника Chrome Open
• спочатку натисніть на розкривне меню в згорнутому стані і нехай воно розширюється за допомогою опцій
• потім у розділі елемента клацніть правою кнопкою миші на вузлі div (переконайтесь, що не натискаєте ліву клавішу перед клацанням правою кнопкою миші), що містить деталі випадаючих елементів
• Потім виберіть опцію " Розгорнути рекурсивно "
• Потім були показані необхідні деталі

Зміна HTML в Elements вікні

• Наведіть курсор на меню, яке потрібно залишити відкритим у Перевірити режимі .
• Спостерігайте за змінами HTML на елементі в Елементі між відкритим / закритим станом меню. Здебільшого це зміна стилю.
• Коли ви з’ясуєте, що робить меню відкритим та закритим (у цьому прикладі додано та видалено між станами меню клас з назвою "dropdownOpen"), двічі клацніть на HTML на вкладці Елемент та внесіть необхідні зміни. У цьому прикладі ми додаємо до <li>елемента клас "dropdownOpen" .

Використання jQuery в консолі вікна

Якщо вам потрібно повторити цю поведінку, ви можете скористатися jQuery. Ви вибираєте елемент за допомогою jQuery і вносите необхідні зміни в консоль . У цьому прикладі ми вибираємо елемент за його ідентифікатором і додаємо до нього клас "dropdownOpen" таким чином:

jQuery("#menu-item-11012").addClass("dropdownOpen");