Как просмотреть HTML и CSS всплывающей подсказки в Chrome

Быстрый ответ

Чтобы мгновенно исследовать элемент при наведении в браузере Chrome, используйте сочетание клавиш Ctrl+Shift+C (или Cmd+Shift+C на Mac), а затем наведите курсор на требуемый элемент. Если же вам нужно проанализировать состояние :hover, откройте Инструменты разработчика, выберите элемент на панели "Элементы", щёлкните на нём правой кнопкой мыши, выберите в контекстном меню :hov и отметьте :hover. Такой подход позволит вам зафиксировать элемент в состоянии "наведённого" курсора и детально изучить, а при необходимости и изменить его CSS-стили.

Продвинутое исследование динамических элементов

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

1. Наведение на динамический элемент: Установите курсор на желаемый элемент.
2. Открытие Инструментов разработчика: Используйте клавишу F12 (для ПК) или комбинацию Cmd+Opt+I (для Mac) для того, чтобы открыть Инструменты разработчика в Chrome.
3. Остановка выполнения скрипта: – Держите курсор наведенным на элементе и нажмите F8, чтобы приостановить работу соответствующего скрипта. – Или перейдите на вкладку "Источники" и самостоятельно установите "breakpoint", либо активируйте команду debugger; в Консоли.
4. Анализ "замороженного" элемента: После того как выполнение веб-страницы остановлено, перейдите во вкладку "Элементы" и более подробно изучите элемент.

На шаг впереди

Работа со сложными всплывающими подсказками

• Bootstrap tooltips: Если вы используете подсказки Bootstrap, для их отображения выполните в консоли команду $('[data-toggle="tooltip"]').tooltip('show').
• Переменная $0 в консоли: В консоли Chrome $0 ссылается на последний исследованный элемент. Это может быть полезно для отображения всплывающей подсказки для этого элемента, используя $($0).tooltip('show').
• Максимальное исользование консоли: Если вам нужно погрузиться в процесс исследования более глубоко, рекомендуется открыть Консоль в отдельном окне. Эту опцию можно активировать в настройках "Инструментов разработчика".

Подробнее об этом расскажет наш спикер на видео

Управление динамическими элементами

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

• Точки останова в JavaScript: Вставьте в ваш скрипт временный вызов setTimeout(() => {debugger}, 5000), наведите курсор на элемент и дождитесь активации отладчика.
• Быстрый переход к консоли: Для быстрого переключения между элементами и консолью без использования мыши, используйте сочетание клавиш `Ctrl+``.

Морзянка в CSS

После того как вы установили паузу в нужном состоянии:

• Проанализируйте стили CSS напрямую во вкладке "Источники". Здесь можно лучше понять стили, которые используются через JavaScript.
• Как вариант, обратитесь к вкладке "Элементы" для анализа структуры и стилей всплывающей подсказки.
• Если всплывающая подсказка продолжает исчезать, примените к элементу вручную состояние :hover на панели "Стили".

Визуализация

Временами поимка "бабочки" (целевого элемента) на "поле" (веб-странице) может казаться бесперспективной задачей:

Поле 🌸🌿🌺: Поймать бабочку? Желаем удачи! (👆🦋??)

Но благодаря "волшебной камере" (инструменту инспекции) Chrome Developer Tools, эту задачу можно облегчить:

Камера 📸: Сделано! Бабочка "заморожена", все ее детали на виду.

Наведение и остановка взаимодействия позволят вам изучать элемент в запрошенном состоянии:

До: 🌸🌿🦋🌺 – Бабочка мельком проходит и исчезает.
После: 🌸🌿📸🌺 – Бабочка поймана и готова к изучению.

Мы бы хотели иметь возможность делать такое и в реальной жизни! 📸👌

Исключительное изучение: Профессиональные советы

Улучшаем остановку исполнения скрипта

Если вас беспокоит некорректная работа паузы, помните:

• Практика ведет к совершенству: Совершенствуйте свои навыки остановки взаимодействия с элементами — с каждой новой попыткой всё получается лучше.
• Звуковые сигналы: Если исследуемая всплывающая подсказка производит звуковой сигнал, вы можете синхронизировать паузу с этим аудиосигналом.

Инструментарий для устранения трудностей

Столкнулись с проблемами в процессе инспектирования? Не стоит беспокоиться:

• Переопределения: Проверьте, не скрывают ли вызванные вами переопределения CSS исследуемый элемент. Это можно сделать на панели "Стили".
• Проблемы с z-index: Если всплывающий элемент скрыт за другими, попробуйте повысить его положение, используя свойство z-index.
• Расширения браузера: Все расширения, которые могут влиять на работу Инструментов разработчика, рекомендуется временно отключить.

Документация: Подарок для вашего будущего

• Снимки: Используйте функцию создания снимков экрана для элемента в "Инструментах разработки", чтобы запоминать его состояние и возвращаться к нему в будущем.
• Фрагменты кода: Сохраняйте фрагменты вашего JavaScript-кода на вкладке "Источники". Это поможет вам ускорить рутинную работу.

Полезные материалы

1. Как превратить заголовок в URL-слаг в jQuery? – Stack Overflow — Дискуссия на Stack Overflow о зафиксированном состоянии :hover с помощью Инструментов разработки Chrome.
2. Отладка JavaScript | Инструменты разработчика | Google Developers — Официальная документация Инструментов разработки Chrome по отладке JavaScript-кода.
3. Инструменты разработки Chrome для CSS – Улучшение кодирования и отладки вашего CSS – YouTube — Видеоруководство по анализу CSS с использованием Инструментов разработки Chrome на YouTube.
4. Что такое инструменты разработчика браузера? – Учебные материалы по веб-разработке | MDN — Обзор инструментов разработчика в браузере на сайте MDN Web Docs.
5. Полное руководство по CSS псевдоклассам и псевдоэлементам – Smashing Magazine — Расширенное руководство по CSS псевдоклассам и псевдоэлементам, полезное при работе со состояниями :hover.