Анализ страниц с помощью средства проверки

  • Статья

Используйте средство "Проверка ", чтобы просмотреть сведения об элементе на отрисованной веб-странице.

  • Когда средство проверки активно, наведите указатель мыши на элементы веб-страницы, а Средства разработки добавляют сведения о наложении информации и выделение сетки на веб-странице.

  • При щелчке элемента на веб-странице дерево DOM в инструменте Элементы автоматически обновляется, чтобы отобразить элемент DOM, соответствующий выбранному элементу на отрисовываемой веб-странице, и его стиль CSS на вкладке Стили .

Активация средства проверки

Чтобы опробовать средство проверки , выполните следующие действия:

  1. Откройте страницу Проверка демонстрации в новом окне или вкладке.

  2. Щелкните правой кнопкой мыши в любом месте демонстрационной веб-страницы и выберите Проверить, чтобы открыть средства разработки.

  3. В левом верхнем углу devTools нажмите кнопку Проверить инструмент (значок средства проверки). Или, если в средствах разработки будет фокус, нажмите клавиши CTRL+SHIFT+C (Windows, Linux) или COMMAND+SHIFT+C (macOS).

    Кнопка

    Значок кнопки становится синим (значок проверки), что указывает на то, что средство проверки активно.

  4. На отображаемой веб-странице наведите указатель мыши на элементы и watch наложение информации и выделение сетки.

  5. Щелкните элемент на отображаемой веб-странице.

    Дерево DOM в инструменте Элементы автоматически обновляется, чтобы отобразить элемент DOM, соответствующий щелчку элемента на отображаемой веб-странице, и его стиль CSS на вкладке Стили . При щелчке на веб-странице также отключается режим проверки на веб-странице.

Получение сведений об элементах из наложения Проверки

Когда средство "Проверка " активно, при наведении указателя мыши на любой элемент на отрисованной веб-странице отображается наложение Проверка . Наложение "Проверка" отображает общие сведения об этом элементе и сведения о специальных возможностях.

Наложение средства

При наведении указателя мыши на элемент страницы, отображаемой на отображаемой странице, дерево DOM автоматически расширяется, чтобы выделить элемент, на который наведен указатель мыши.

Наложение "Проверка " отображает следующие сведения об элементе:

  • Имя элемента.
  • Размеры элемента в пикселях.
  • Цвет элемента в виде шестнадцатеричного значения и образца цвета.
  • Параметры шрифта элемента.
  • Поле и заполнение элемента в пикселях.

Отображаемые сведения зависят от типа элемента и стилей, применяемых к нему. Если элемент расположен с помощью сетки CSS или css flexbox, рядом с именем элемента в наложении Проверки появится другой значок:

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

В разделе "Специальные возможности " наложения "Проверка " отображаются сведения о:

  • Контрастность текста и цвета.
  • Имя и роль элемента, сообщаемого вспомогательным технологиям.
  • Указывает, является ли элемент фокусируемым с клавиатуры.

Например, на странице Проверка демонстрации для кнопки Bad Contrast наложение Проверить имеет значок предупреждения рядом со значением контрастности 1,77. Наложение Проверки также показывает, что кнопка не может фокусироваться с помощью клавиатуры. Невозможно перейти к кнопке с помощью клавиатуры, так как кнопка реализуется как <div> элемент с классом button, а не как <button> элемент.

Элементы, не имеющие достаточной контрастности, имеют значок предупреждения

Проверка элементов, не доступных

Элементы со свойством pointer-events: none CSS недоступны для средства проверки . На странице Проверка демонстрации наведите указатель мыши на Overlay Button , и вы увидите, что родительский элемент (div.wrapper) отображается вместо Overlay Button.

Элемент, имеющий свойство CSS

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

Нажатие клавиши SHIFT при выборе элементов на странице позволяет выбрать элементы со свойством стиля CSS 'pointer-events: none'

Выбор элемента и прекращение режима проверки

Щелкнув элемент на отображаемой странице, выполните следующие действия:

  • Средство проверки отключено.
  • Выделен соответствующий узел DOM.
  • В средстве Стили отображается CSS, примененный к элементу .

При щелчке элемента на отображаемой странице в инструменте Стили отображаются стили, применяемые к элементу.

Сохранение подсказки средства проверки и наложение цвета сетки

При использовании средства "Проверка " и перемещении по отображаемой веб-странице можно сохранить текущее наложение проверки . Нажимайте и удерживайте нажатой клавишу CTRL+ALT (Windows, Linux) или CTRL+OPTION (macOS) во время перемещения по отображаемой веб-странице. Существующие подсказки и наложение цвета сетки для средства "Проверка " остаются на экране при наведении указателя мыши на различные части отображаемой веб-страницы.

Временное скрытие подсказки "Проверить элемент"

Чтобы скрыть наложение средства "Проверка " при наведении указателя мыши на отображаемую веб-страницу, нажмите и удерживайте нажатой клавишу CTRL.

См. также