Проверка выпадающих меню в новом Chrome

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

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

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

Ответ 1

Наведите указатель мыши на элемент с помощью мыши и нажмите F8 (это будет работать только в Chrome), чтобы приостановить выполнение script. Состояние зависания останется видимым для вас. Если вы находитесь на Mac, вам может потребоваться открыть системный прес и установить флажок "Использовать все F1, F2 и т.д.".

Ответ 2

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

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

Осмотрите элемент ввода на хром
Перейдите на вкладку "Прослушиватели событий" и удалите событие размытия

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

Ответ 3

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

Ответ 4

В Chrome, если вы нажмете F12, чтобы открыть консоль разработчика, а затем нажмите на настройки Настройки инструментов разработчика

наконец, отметьте "эмулировать целевую страницу" Установите флажок "Эмулировать целевую страницу"

Ответ 5

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

Я столкнулся с той же проблемой, и я использовал опцию Expand recursively для Chrome Dev Tools:

Шаги:

Осмотрите выпадающее поле
Найдите динамический DOM (фиолетовая подсветка)
Щелкните правой кнопкой мыши на этом динамическом DOM
Выберите Расширить рекурсивно:
Мы можем видеть все элементы там

Вот демо:

Ответ 6

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

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

Ответ 7

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

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

Ответ 8

Изменение HTML в окне элементов

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

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

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

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