Проверка раскрывающихся меню в новом Chrome

Я использую Chrome версии 41.0.2272.101 m (новейший), и это обновление испортилось. Они заявляют, что когда у вас открыт инспектор, любое изменение DOM будет мигать фиолетовым цветом на измененном элементе (как в Firefox), но теперь я не могу проверить какой-либо зависший объект (также как в FF, поэтому мне не нравится использовать его при разработке интерфейса).

Я говорю о событиях, запускаемых js, например о superfish. Раньше я мог навести курсор на меню и закрыть меню инспектором, и меню оставалось открытым, и я мог войти в инспектор, посмотреть, какие псевдоэлементы созданы, напрямую изменить отступы и т. Д. И увидеть изменения. Теперь, когда я нахожу меню и щелкаю правой кнопкой мыши, чтобы просмотреть его, меню закрывается, и я не могу его проверить!

Я попробовал перетащить инспектора, но ничего не помогло. Эта новая «функция» чертовски раздражает. Есть ли способ проверить события, запускаемые js, без установки точек останова на элементы (что работает, но это своего рода боль в заднице)?

Наведите указатель мыши на элемент и нажмите F8 (это работает только в Chrome), чтобы приостановить выполнение скрипта. Состояние наведения останется видимым для вас. Если вы используете Mac, вам, возможно, придется открыть системные настройки и снять флажок «Использовать все F1, F2 и т. Д.» (Или просто используйте fn + F8).

Иногда это работает, только если вы находитесь на вкладке «Источники» инспектора.

В зависимости от типа элемента меню я столкнулся с этой проблемой с раскрывающимися меню ввода. Причина, по которой он исчезает, когда я его проверяю, заключается в том, что blurсобытие всегда запускается для элемента, когда я щелкаю в любом месте за пределами элемента.

Один из способов, которым я смог проверить элемент, - это предотвратить запуск события размытия, удалив прослушиватель события размытия:

• Осмотрите элемент ввода в Chrome
• Перейдите на вкладку Event Listeners и удалите событие размытия.

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

В Chrome нажмите F12, чтобы открыть консоль разработчика, затем нажмите Настройки (значок шестеренки) или нажмите F1:

затем найдите и установите флажок «Эмулировать целевую страницу».

На Mac вы можете нажать cmd+, \чтобы приостановить скрипт после открытия раскрывающегося списка. Затем вы можете использовать shift+ cmd+ cдля проверки элементов.

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

Я столкнулся с той же проблемой, и то, что я использовал, было опцией Expand recursively в инструментах chrome dev:

Шаги следующие:

1. Проверьте раскрывающееся поле
2. Найдите динамический DOM (фиолетовое выделение)
3. Щелкните правой кнопкой мыши этот динамический DOM
4. Выберите Развернуть рекурсивно :
5. Мы видим, что все элементы есть

Вот демо:

Вы можете установить интервал, через который содержимое заданного элемента записывается в консоль JS каждую секунду. Перетащите это в консоль и откройте раскрывающийся список.

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

В Firefox

В Inspector щелкните правой кнопкой мыши узел, содержащий раскрывающийся список, выберите:

Разрыв на ...> Модификация поддерева

Это приостановит выполнение в тот момент, когда раскрывающийся список ... ну ... выпадет.

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

В инструментах разработчика вы выбираете элемент. В правой руке у вас есть квадрат со стрелкой над ним. Щелкните по нему, и вы можете выбрать состояние. Например, выберите при наведении курсора, и вы увидите как свое окно, так и обновление CSS, как если бы элемент зависал прямо сейчас.

Ни одно из перечисленных выше средств не помогло мне. Поскольку наше раскрывающееся меню (на основе React) закроется при любом щелчке (вправо или влево). Итак, мы нашли обходной путь ниже:

• В инструментах разработчика Chrome Open
• сначала щелкните раскрывающийся список в свернутом состоянии и дайте ему развернуться с параметрами
• затем в разделе элемента щелкните правой кнопкой мыши узел div (убедитесь, что вы не щелкаете левой кнопкой мыши перед щелчком правой кнопкой мыши), который содержит сведения о раскрывающихся элементах
• Затем выберите опцию « Расширять рекурсивно ».
• Затем были показаны необходимые детали

Изменение HTML в Elements окне

• Наведите указатель мыши на меню, которое вы хотите оставить открытым в режиме проверки .
• Наблюдайте за изменениями HTML в элементе в окне « Элемент» между открытыми / закрытыми состояниями меню. В большинстве случаев это изменение стиля.
• Когда вы узнаете, что заставляет меню открываться и закрываться (в этом примере класс с именем dropdownOpen добавлен и удален между состояниями меню), дважды щелкните HTML- код на вкладке « Элемент » и внесите необходимые изменения. В этом примере мы добавляем к <li>элементу класс dropdownOpen .

Использование JQuery в консоли окна

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

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