Что показывает панель элементов в браузере

Обновлено: 20.11.2024

Вкладка "Элементы" на панели "Правка" позволяет одновременно выбирать элементы на всех панелях и редактировать их содержимое, стиль и атрибуты, а также предоставляет быструю информацию об их размерах, шрифте и цветах.

Проверить элемент

Проверка элементов в Polypane максимально упрощена, и существует несколько способов проверки элементов:

  • Нажмите клавишу Alt/Option и наведите указатель мыши на элемент, который хотите проверить.
  • Нажмите кнопку проверки элемента на панели элементов.
  • Нажмите кнопку проверки элемента в адресной строке.
  • Нажмите cmd/ctrl + Shift + C.
  • Нажмите элемент правой кнопкой мыши и выберите в контекстном меню пункт "проверить элемент".

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

Когда вы щелкаете элемент, он будет выбран, и информация будет отображаться на панели. Нажатие esc отменяет проверку.

Чтобы узнать больше об инспекции элементов, прочитайте о просмотре Polypane.

Дерево Домов

В верхней части навигатора находится древовидное представление исходного документа ("Дерево DOM"). Наведите указатель мыши на них, чтобы отобразить всплывающую подсказку на всех панелях, и нажмите на них, чтобы просмотреть их на панели «Элементы». Выбранный элемент автоматически станет видимым в дереве (и будет доступен как $0 на панели консоли).

Дважды щелкните атрибут, чтобы скопировать его значение.

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

Навигатор

Информация об элементе

Навигатор покажет вам выбранный элемент с любым идентификатором или классом. Наведите указатель мыши на элемент, чтобы выделить его на всех панелях. Щелкните класс или идентификатор, чтобы скопировать его в формате CSS. С помощью значков справа от имени элемента вы можете перезагружать стили элемента, переключать его видимость и проверять элемент в инструментах разработки Chromium соответственно.

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

Навигатор показывает цвет переднего плана и фона (если задан) элемента. Вы можете нажать на них, чтобы скопировать их. Далее отображается примененный шрифт, а также отображаемый размер шрифта и высота строки.

После информации о шрифте вы увидите красный крестик, одиночную зеленую галочку или двойную зеленую галочку. Это указывает, читается ли ваш текст в соответствии со стандартами WCAG на уровне AA (одна проверка) или AAA (две проверки). Он вычисляет фактический контраст, принимая во внимание непрозрачность элемента и фоны предков.

С правой стороны навигатор отображает размеры визуального элемента и соотношение сторон.

Редактор контента

Если элемент имеет только текстовое содержимое, вы можете изменить его здесь, и оно будет автоматически применено ко всем панелям. Если элемент имеет смесь текстового содержимого и дочерних элементов, вы сможете выбрать текст как «текстовый узел» в навигаторе.

Редактор содержимого автоматически изменит размер в соответствии с содержимым (до определенной высоты), а при наведении на него в правом нижнем углу появится кнопка копирования, которая позволит вам скопировать содержимое за один раз.

Различия стилей между панелями

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

Коробчатая модель

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

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

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

Редактор элементов

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

Стиль

Вкладка стиля проанализирует ваш CSS и перечислит все селекторы, которые влияют на ваш элемент либо напрямую, либо через унаследованные значения. Он также покажет стиль для псевдоэлементов (таких как ::before и ::first-line) и псевдоклассов (таких как :hover и :any-link), а также объявлений @keyframe и @font-face, на которые ссылается текущий элемент.

Если набор правил состоит из нескольких селекторов (с использованием , ), то будет выделен тот, который нацелен на ваш элемент. С правой стороны вы увидите таблицу стилей, из которой исходит селектор, а также ее специфику. Нажмите на спецификацию, чтобы открыть страницу объяснения для этого селектора на панели браузера.

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

Вы можете редактировать значения, нажимая на них и редактируя их значения, а затем применяя их, нажимая Enter. Если вы редактируете какое-либо числовое значение, вы можете использовать клавиши вверх и вниз, чтобы изменить значение. Удерживание Shift изменит значение на 10, удерживание cmd (на Mac) или Ctrl (Windows и Linux) изменит значение на 100, а удерживание Alt изменит значение на 0,1.

Для свойств с цветом мы покажем предварительный просмотр цвета. Нажмите на нее, чтобы открыть селектор цвета, который позволит вам редактировать цвет в реальном времени на всех панелях.

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

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

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

Скопируйте весь набор правил CSS (селектор и все объявления), наведя указатель мыши перед селектором. Появится значок копирования. Щелкните ее, чтобы скопировать готовый к использованию набор правил CSS. Вы также можете скопировать отдельные строки, щелкнув тот же значок перед строкой.

Рассчитано

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

Редактируйте значения, щелкнув их так же, как на вкладке стилей, и нажмите "Копировать стили", чтобы скопировать все объявления CSS, или скопируйте одно объявление, нажав кнопку копирования перед строкой.

Атрибуты

На вкладке атрибутов будут перечислены все атрибуты элемента, такие как класс и значения, и вы сможете редактировать их на всех панелях. Значения будут автоматически переноситься на несколько строк, если они станут слишком длинными (например, если вы используете атомарный CSS). Здесь вы также можете добавить новые атрибуты. Оставьте значение пустым для логических значений. Вы можете удалить атрибуты, щелкнув значок корзины.

Когда вы добавляете новый атрибут, Polypane предложит атрибуты, подходящие для редактируемого вами элемента. Например, img получит предложение для атрибута src, а h1 — нет.

Классы
Polypane автоматически предлагает классы по мере ввода в редакторе значений классов. Эти классы скомпилированы из вашего CSS и HTML. Используйте клавиши со стрелками, чтобы выбрать тот, который вы хотите добавить, и нажмите клавишу ввода, чтобы добавить его, или используйте мышь и щелкните их.

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

Вкладка A11y (Специальные возможности) показывает доступное имя и роль, если они доступны, доступен ли элемент с помощью клавиатуры, контраст для этого элемента и любые атрибуты специальных возможностей (например, aria-labeledby, установленные для элемента). Значения будут автоматически переноситься на несколько строк, если они станут слишком длинными. Вы также можете добавить новые элементы или удалить их здесь.

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

Каждый веб-браузер предлагает инструменты разработчика для проверки кода веб-сайта. Тем не менее, это иностранное лицо для среднего пользователя Интернета. В конце концов, кто хочет смотреть на кодировку веб-сайта, верно?

Оказывается, есть много вещей, которые можно узнать, изучив код веб-сайта. Читайте дальше, чтобы узнать, что может предложить функция проверки элемента и как ее использовать.

Как использовать Inspect Element в конкретном браузере

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

Использование Inspect Element в Google Chrome

  1. Откройте веб-сайт, который вы хотите проверить.

Использование Inspect Element в Microsoft Edge

  1. Откройте веб-сайт.

Любой из этих трех методов даст одинаковый результат.

Если вы сделали это правильно, в нижней части браузера откроется новая панель. Это инструменты разработчика, включающие вкладку «Элементы». Это инструмент, который вам нужен для проверки элемента.

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

    Нажмите на три вертикальные точки в верхнем углу панели инструментов разработчика.

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

Использование элемента проверки (зависит от ОС)

Несмотря на то, что многие необходимые шаги можно было бы охватить, просто показав вам, как использовать Inspect Element в браузере, мы все равно покажем вам, как это сделать в большинстве ОС.

Как использовать Inspect Element на Chromebook

Браузер по умолчанию на Chromebook — Google, поэтому следуйте инструкциям браузера Chrome, чтобы получить доступ к Inspect Element. Вот небольшой курс повышения квалификации для вас:

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

Как использовать Inspect Element на устройстве Android

Запуск Inspect Element на устройстве Android немного отличается. Узнайте, как получить доступ к панели «Проверить элемент» на Android:

При выборе определенного устройства Android вы заметите, что загружается мобильная версия веб-сайта. Теперь вы можете использовать функцию проверки элемента на своем устройстве Android, не выходя из рабочего стола.

Этот метод подходит как для браузеров Chrome, так и для Firefox, поскольку в их инструментах разработчика есть функция имитации устройства.

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

Как использовать Inspect Element в Windows

Инструмент Inspect Element не обязательно зависит от ОС, но зависит от браузера. Это означает, что инструменты разработчика — это функция используемого вами браузера, а не обязательно Windows. Однако вы можете перейти на панель «Проверить элемент» независимо от того, какой браузер вы предпочитаете.

Если вы используете ОС Windows, скорее всего, вы также будете использовать браузер Microsoft Edge. Узнайте, как получить доступ к Inspect Element в MS Edge:

  1. Откройте веб-сайт, который вы хотите проверить.

Вы также можете использовать функциональную клавишу F12 для более быстрого доступа к Inspect Element. Кроме того, можно щелкнуть правой кнопкой мыши веб-страницу и выбрать пункт «Проверить».

Как использовать Inspect Element на Mac

Если вы используете Mac, скорее всего, вы предпочитаете Safari. Открытие Inspect Elements в Safari немного отличается от открытия в Chrome и Firefox. Но это так же просто с помощью следующих шагов:

    Откройте браузер Safari.

Выполнение этих шагов активирует функцию проверки элемента в вашем браузере. Если вы сначала не включите Inspect Element, вы не увидите этот параметр при открытии веб-сайта.

После завершения этого шага просто щелкните правой кнопкой мыши любую открытую веб-страницу и выберите "Проверить". Вы также можете использовать команду быстрых клавиш: CMD + Option + I (проверить).

Как использовать Inspect Element на iPhone

Вы хотите использовать функцию проверки элементов, чтобы увидеть, как мобильная версия веб-страницы выглядит на iPhone? Вы можете сделать это и многое другое, выполнив всего несколько простых шагов. Но перед просмотром элемента вам нужно включить Web Inspector для вашего устройства iOS:

Кроме того, убедитесь, что на вашем Mac включено меню «Разработка», выполнив действия, описанные в разделе выше.

После включения мобильного устройства iOS и Mac вы увидите меню «Разработка» на верхней панели вашего Mac. Нажмите на нее, чтобы увидеть подключенный iPhone и веб-страницу, активную на устройстве. Выбор веб-страницы также открывает окно Web Inspector для той же страницы на экране Mac.

Имейте в виду, что эти указания работают только для Safari на Mac, а не для Safari на Windows.

Как использовать проверку элемента, когда он заблокирован

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

Способ 1 – отключить Javascript

Способ 2 – долгий доступ к инструментам разработчика

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

    Перейдите в настройки в браузере.

Способ 3 — Использование функциональной клавиши

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

Возможно, вам придется попробовать все эти методы, прежде чем вы найдете тот, который вам подходит. В крайнем случае, вы также можете попробовать просмотреть исходный код, введя view-source: [введите полный URL-адрес].

Как использовать Inspect Element на школьном Chromebook

Если ваш Chromebook был выпущен учебным заведением, для использования функции Inspect Element нужно выполнить несколько простых шагов:

    Щелкните правой кнопкой мыши или коснитесь веб-страницы двумя пальцами и выберите «Проверить».

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

Как использовать Inspect Element для поиска ответов

Вы можете использовать Inspect Element, чтобы найти ответы на множество вопросов, таких как:

  • Предварительный просмотр дизайна сайта на мобильных устройствах.
  • Узнайте, какие ключевые слова используют конкуренты.
  • Тесты скорости.
  • Изменение текста на веб-странице.
  • Найдите краткие примеры, чтобы показать разработчикам, что вам нужно.

Когда вы запустите панель Inspect Element, вы увидите весь код веб-сайта. Это включает в себя весь код JavaScript, CSS и HTML, встроенный в него. Это похоже на просмотр исходного кода веб-страницы, за исключением того, что вы можете вносить изменения в код. Кроме того, вы можете видеть любые изменения, внесенные в режиме реального времени.

Этот инструмент позволяет маркетологам, дизайнерам и разработчикам просматривать любые изменения дизайна до их окончательной обработки. Однако внесение изменений в код с помощью Inspect Element не длится вечно. Когда вы перезагрузите страницу, она вернется в состояние по умолчанию.

Дополнительные часто задаваемые вопросы

Если вы не являетесь экспертом в Inspect Element после прочтения выше, здесь есть дополнительные ответы.

Как мне использовать команду "Проверить элемент" для поиска ответов?

Единственный способ найти ответы с помощью функции "Проверить элемент" — это мгновенное обнаружение веб-сайтом после отправки. В этом случае ответы присутствуют в кодировке.

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

Является ли Inspect Element незаконным?

Нет, инструмент проверки элемента не является незаконным; он предназначен для веб-разработчиков. Просмотр исходного кода веб-сайта не является незаконным; это становится проблемой только в том случае, если вы используете собранную информацию в гнусных целях, таких как попытки использования эксплойтов и т. д.

Можно ли отключить проверку элемента в браузере?

Короткий ответ — нет.

Вы не можете отключить Inspect Element в браузере. Но вы можете установить параметры, которые запрещают пользователям выполнять определенные действия, такие как щелчок правой кнопкой мыши на веб-странице. В Интернете есть множество руководств по установке правильных сценариев для отключения определенных событий. Однако вы не можете полностью отключить функцию проверки элемента.

Познакомьтесь с внутренним содержанием веб-страницы

Проверка элемента веб-страницы с помощью функции «Проверить элемент», вероятно, является инструментом разработчика, о котором вы никогда не подозревали, даже если вы сами не являетесь разработчиком. Он имеет множество дизайнерских и маркетинговых приложений, которые могут сделать ваш сайт более плавным. И, возможно, даст вам преимущество перед конкурентом.

Для чего вы используете Inspect Element? Расскажите нам об этом в разделе комментариев ниже.

Как мы знаем, веб-приложения встраивают JavaScript, CSS и другие зависимости в код HTML, который отображается в веб-браузере, чтобы показать окончательный вид и ощущение от приложения. Поскольку код HTML не компилируется, а отображается непосредственно в браузере, разработчикам становится сложно внести необходимые изменения в файлы кода, а затем предварительно просмотреть изменения в браузере. Это повышает потребность в возможностях веб-браузеров, которые могут позволить пользователям вносить изменения в JavaScript, CSS и HTML непосредственно в браузере.Даже тестировщики, находящие и проверяющие элемент в браузере, стали ключевым термином в автоматизированном тестировании. Веб-инспектор или инспектор браузера помогает определить локаторы для доступных элементов на веб-странице, которые мы хотим автоматизировать. Другими словами, это помогает нам проверять элементы.

Не волнуйтесь. Это не дополнительное программное обеспечение, которое вам необходимо установить, оно встроено в браузеры. Веб-инспектор аналогичен браузерам Google Chrome, Internet Explorer и Firefox с небольшими изменениями в названиях и функциях. С помощью инструментов веб-разработчика мы можем проверять элементы в этих браузерах. В этой статье мы сосредоточимся на следующих моментах, чтобы понять, как использовать веб-инспектор в различных современных браузерах:

  • Что такое веб-инспектор?
  • Как проверять элементы в веб-браузере?
    • Как проверять элементы в Google Chrome?
    • Аналогично, как проверять элементы в Firefox?
    • Как проверять элементы в Microsoft Edge?
    • Кроме того, как проверять элементы в Internet Explorer?
    • Как управлять атрибутами HTML с помощью Web Inspector?
    • Кроме того, как управлять атрибутами CSS с помощью Web Inspector?
    • Как управлять атрибутами JavaScript с помощью Web Inspector?

    Что такое веб-инспектор?

    Как упоминалось ранее, веб-инспектор или инспектор браузера помогают идентифицировать/находить содержимое веб-страницы в браузере. С веб-инспектором рядом с нами мы можем исследовать и манипулировать кодом браузера, чтобы увидеть внезапные изменения на экране. В народе это также называется "проверкой элемента". Инспектор показывает CSS, HTML и JavaScript веб-страницы, чтобы разработчик или тестировщик мог проанализировать веб-страницу и использовать функции инструментов разработчика браузера для запуска несколько проверок.

    Хорошим примером является проверка цвета текста на веб-странице. Если я попытаюсь изменить цветовой код в своем текстовом редакторе, сохранить файл, обновить веб-страницу снова и снова, это становится утомительным. Для этого я могу изменить цветовой код в браузере через веб-инспектор в этой конкретной строке и посмотреть вживую на веб-странице. Эти изменения, сделанные в веб-инспекторе, являются временными и исчезнут, как только я закрою вкладку. Это делает отладку очень простой и оперативной, когда пользователь может напрямую обновлять атрибуты внутри только браузер. Следовательно, вы можете сходить с ума и экспериментировать с чем угодно!!

    Как проверить элементы в веб-браузере?

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

    Примечание. Для демонстрации мы используем браузер Google Chrome.

    Демонстрацию можно увидеть ниже в браузере Google Chrome, как показано ниже:

    Для текущего руководства вполне нормально знать элементы, которые мы хотели бы проверить. Нажмите на значок показан ниже после открытия панели проверить элемент.

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

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

    Как проверять элементы в Google Chrome?

    Следуйте этим простым шагам, чтобы проверить элементы веб-страницы в Google Chrome.

    Запустите веб-браузер Google Chrome и откройте панель проверки, нажав F12 или описанными выше способами (правая- нажмите -> проверить).

    1. На приведенном ниже снимке экрана после открытия инспектора браузера щелкните текстовое поле Текущий адрес. С правой стороны (под панелью проверки) локаторы связанных элементов подсвечиваются автоматически.

    Примечание. Обратите внимание, что мы находимся на вкладке "Элементы". Если какая-либо другая вкладка открыта по умолчанию, сначала перейдите на "Элементы".

    1. Еще один способ проверить веб-элемент — щелкнуть правой кнопкой мыши веб-элемент и выбрать параметр проверить :

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

    Вы увидите заполнитель, тип, идентификатор и класс в качестве атрибутов текстового поля Полное имя в приведенном выше коде. Если вы хотите прочитать подробное руководство по проверке элементов Google Chrome, посетите страницу Проверка элементов в Google Chrome. Текстовые поля и веб-страницы также предназначены только для демонстрации. ; вы можете поиграть с любыми атрибутами или веб-элементами.

    Как проверять элементы в Firefox?

    Проверка элементов в браузере Firefox аналогична проверке элементов в браузере Chrome. Выполните указанные ниже действия, чтобы проверить веб-элементы в браузере. Браузер Firefox:

    2.Еще один способ проверить элемент — щелкнуть правой кнопкой мыши веб-элемент. После этого выберите параметр Проверить элемент (Q) (То же, что и в браузере Chrome):

    Примечание. В браузере Firefox "Инспектор" — это вкладка, на которой находятся все элементы HTML, в отличие от браузера Chrome, где вкладка называется "Элементы". Поэтому перейдите на вкладку «Инспектор». Если он перешел на любую другую вкладку при открытии инструментов веб-разработчика в браузере Firefox.

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

    Как проверять элементы в Microsoft Edge?

    Проверка элементов в Microsoft Edge такая же, как и в Google Chrome. Причина в том, что Microsoft Edge перемещен в движок рендеринга chromium, на котором построен Google Chrome. Таким образом, они оба имеют схожую базовую структуру в своем UI. Мы можем выполнить описанные ниже шаги, чтобы проверить элементы в Microsoft Edge:

    1. Предположим, мы хотим проверить элементы на демонстрационном веб-сайте ToolsQA, чтобы открыть веб-сайт в браузере Microsoft Edge.

    1. Нажав кнопку Проверить, вы откроете элемент, который вы хотели проверить.

    Код приложения и теги будут доступны на вкладке "Элементы", как указано выше.

    Мы можем выполнить те же шаги, чтобы найти, он будет выделен на панели элементов кода и проверить элементы. Кроме того, мы проинформировали браузер Chrome.

    Как проверять элементы в Internet Explorer?

    Как и в случае с браузерами Chrome и Firefox, нажмите F12 и вручную проверьте элемент, активировав веб-инспектор или вправо щелкните элемент и выберите Проверить элемент (выделено ниже), чтобы открыть инструменты разработчика. Этот процесс аналогичен Chrome. и Firefox на изображении:

    Примечание. "Обзор DOM" – это вкладка, на которой вы найдете все элементы HTML, в отличие от браузера Chrome. Поэтому, если вы перешли на любую другую вкладку при открытии инструмента веб-разработчика на браузер Internet Explorer.

    До сих пор мы узнали, как можно проверять веб-элементы в различных современных браузерах. Мы можем обратиться к подробным статьям, соответствующим каждому из браузеров, чтобы более подробно разобраться в поиске элементов в конкретном браузере. Теперь, как мы уже обсуждали, мы можем использовать инструменты разработчика браузера также для целей отладки. Поэтому давайте посмотрим, как мы манипулируем различными свойствами элементов и проверяем их в самом браузере:

    Как управлять веб-элементами с помощью веб-инспектора?

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

    Как управлять атрибутами HTML с помощью Web Inspector?

    Давайте рассмотрим пример, когда я пытаюсь изменить текст веб-элемента с помощью панели проверки в браузере Google Chrome:< /p>

    1. Перейдите по URL-адресу "https://demoqa.com/checkbox" и щелкните правой кнопкой мыши -> проверьте слово "Desktop" как показано ниже:

    1. Обновите текст с "Рабочий стол" на "Проверить рабочий стол", просто дважды щелкнув "Рабочий стол" в Панель «Элементы». Как показано ниже, при обновлении текста на панели Элементы текст также обновляется на веб-странице:

    Итак, обновите любой атрибут тегов HTML на панели Elements. Следовательно, просмотрите его результаты в реальном времени в браузере.

    Как управлять атрибутами CSS с помощью Web Inspector?

    Рассмотрите сценарий, в котором на той же странице, https://demoqa.com/checkbox", мы хотим обновить цвет фона веб-элемента; давайте посмотрим, как мы можем добиться того же:

    1. Перейдите по URL-адресу "https://demoqa.com/checkbox", щелкните правой кнопкой мыши и проверьте белое поле сразу под именами папок, как показано ниже:

    1. Это приведет нас к коду, представляющему этот белый блок div, как показано ниже:

    1. Дважды щелкните эту строку кода и добавьте атрибут стиля, как показано в следующей строке:
    1. Нажмите Enter, и цвет белого блока div изменится на голубой.

    Как указано выше, все атрибуты CSS будут отображаться на вкладке "Стили". Они появятся ниже или справа от вкладки Элементы. Мы можем либо встроить атрибуты CSS в сам тег HTML, либо добавить/обновить значения раздела Styles напрямую.

    1. Если я обновлю значение атрибута "background-color" на "caderblue" непосредственно на вкладке Стили, это отразится соответствующие изменения в браузере, как показано ниже:

    Как мы видим, как только мы начинаем писать свойство CSS или соответствующие ему значения, браузер сам показывает все возможные значения. Кроме того, это также помогает в отладке/изменении соответствующего значения. Как и в приведенном выше случае, когда мы наводили курсор на значение "caderblue", в браузере отображался тот же цвет. Таким образом, мы можем манипулировать любыми свойствами CSS прямо в браузере.

    Как управлять атрибутами JavaScript с помощью Web Inspector?

    Файлы JavaScript вашего приложения будут находиться на вкладке "Источники" панели Проверка, как показано ниже:

    При нажатии на вкладку "Источники" вы увидите все файлы исходного кода, перечисленные на левой панели. Он отмечен маркером 1 на изображении выше.

    На этой левой панели вы можете выбрать соответствующий файл JavaScript, который вы хотите обновить или изменить. Как и в нашем приложении, был только один файл JavaScript с именем bundle.js (обозначен маркером 2 на изображении выше).

    Как только вы выберете файл JavaScript, панель выполнения справа будет активирована. Он отмечен маркером 3 на изображении выше.

    После этого вы можете внести необходимые изменения в JavaScript и просмотреть соответствующие изменения непосредственно в браузере.

    Примечание. Все эти изменения HTML, CSS, JavaScript будут временными и будут потеряны, как только вы закроете вкладку браузера. Таким образом, это был всего лишь временный интерфейс для быстрой отладки и просмотра любых запланированных изменений.

    Google Chrome является лидером на рынке всех современных браузеров, доступных в наши дни. Без сомнения, это один из любимых браузеров для веб-разработчиков, а также один из лучших вариантов для всех инженеров QA, работающих над автоматизацией UI. Кроме того, Chrome со временем рос и совершенствовался и предоставляет различные функции, помогающие разработчикам и тестировщикам проверять приложение внутри самого браузера. Все эти полезные инструменты и параметры объединены в разделе «Инструменты разработчика» браузера Chrome, который предоставляет различные возможности для редактирования/отладки HTML/CSS и JavaScript. . Кроме того, он также предоставляет возможности "проверить элемент", что является полезным инструментом для тестировщиков.

    Проверка

    WebElements находится в центре Selenium Automation. Ранее для этой цели у нас были инструменты Firebug&Fire-path. Сегодня у нас есть несколько надстроек и подключаемых модулей, которые можно использовать с браузерами для проверки элемента в DOM (объектная модель документа). Но использование Инструментов разработчика для проверки элемента и изменения DOM намного эффективнее и удобнее, чем использование подключаемых модулей или надстроек. В конце концов, они встраиваются не просто так.

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

    • Что такое панель Chrome DevTools?
      • Как получить доступ к панели Chrome DevTools?
      • Как закрепить/открепить панель DevTools?
      • Зачем проверять элемент?
      • Как проверить элемент в Chrome Dev Tools?
      • Найти элемент по строке
      • Найти элемент с помощью селектора CSS
      • И найти элемент по XPath.

      Что такое панель Chrome DevTools?

      Инструменты разработчика Chrome предоставляют функцию под названием "Панель DevTools" или "Панель элементов", с помощью которой мы можем проверять элементы и изменять их из внешнего интерфейса для цель отладки. Мы также можем изменить внешний вид и даже содержимое веб-страницы, поскольку мы можем редактировать файлы «CSS» и «HTML» во время выполнения и выполнять быструю отладку приложения.

      Итак, как нам получить доступ к панели элементов в инструментах разработчика Google Chrome? Давайте рассмотрим различные способы достижения того же:

      ***Как получить доступ к панели Chrome DevTools? ***

      Выполните указанные ниже действия, чтобы получить доступ к панели DevTools в браузере Chrome:

      Сначала нажмите кнопку "Настройка и управление Google Chrome" (3 точки в вертикальной линии) в правом верхнем углу экрана браузера.

      Во-вторых, после этого нажмите Дополнительные инструменты->Инструменты разработчика.

      1. В-третьих, как показано на изображении выше, мы нажимаем Инструменты разработчика, чтобы открыть окно элемента в разделе инструменты разработчика Chrome. Впоследствии на изображении ниже показано, как выглядит поле элемента:

      Этот раздел в основном состоит из трех частей, где

      • Панель DOM. Панель DOM (отмечена цифрой 1) – это верхняя часть поля под элементами. Это инструмент, с помощью которого мы можем изменить макет HTML-страницы. Здесь мы имеем полный контроль над HTML и можем свободно изменять файлы.
      • Панель консоли. Панель консоли (обозначена цифрой 2) находится в нижней части поля элемента и отображает сообщения журнала, которые заносятся разработчиками в скрипт. Здесь также показаны новые возможности инструментов разработчика Chrome.
      • Панель CSS. Панель CSS (отмечена цифрой 3) изменяет свойства CSS — шрифты, размеры и цвета веб-страницы.

      Помимо нажатия на "Дополнительные инструменты-> Инструменты разработчика", мы также можем открыть поле элемента, используя следующие параметры:

      • Нажатие клавиши F12.
      • Используя сочетание клавиш «Ctrl + Shift + i» или «Ctrl + Shift + c» в операционной системе Windows. Одна и та же команда работает в Chrome OS и Linux.

      В Mac OS мы можем использовать команду "Cmd + Opt + C", чтобы открыть инструменты разработчика Chrome.

      • Щелкните правой кнопкой мыши веб-страницу в браузере Chrome и выберите "Проверить".

      Мы можем использовать любой из приведенных выше вариантов, чтобы открыть поле элемента в инструментах разработчика Chrome

      Как закрепить/открепить панель DevTools?

      Мы также можем закрепить окно Инструменты разработчика Chrome слева/справа или внизу окна или даже открепить его в отдельном окне.

      Параметры закрепления представлены на панели «Элементы», как показано ниже:

      Когда мы щелкаем по трем точкам в правом верхнем углу окна, мы получаем параметр "Закрепить" вместе с другими параметрами. Этот параметр имеет следующие подпараметры (обозначенные маленькими изображениями рядом с параметром), с помощью которых мы можем закрепить окно в соответствии с нашими требованиями.

      1. Открепить в отдельном окне
      2. Закрепить слева
      3. Закрепить внизу
      4. И пристыковать вправо

      Таким образом, щелкнув любую из этих опций, мы можем закрепить/открепить панель DevTools в любом месте на экране, как нам удобно и нужно.

      Как мы уже говорили, одной из основных функций панели DevTools Chrome является предоставление возможностей для проверки веб-элемента и поиска различных типов локаторы, с помощью которых мы можем найти элементы в тестовых случаях Selenium. Затем давайте посмотрим, как мы можем проверять различные веб-элементы с помощью панели DevTools и определять различные локаторы веб-элементов.

      Проверка элемента с помощью Chrome DevTools

      Прежде чем мы приступим к проверке элемента с помощью DevTools в Chrome, мы сначала попытаемся ответить на вопрос: "Что нужно проверять элемент?"

      Зачем проверять элемент?

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

      Роль Сценарий использования
      Разработчики Если разработчикам нужны временные изменения веб-страницы, лучшим решением будет элемент проверки.
      < em>Создатели цифрового контента Когда авторам цифрового контента нужен снимок экрана веб-страницы, содержащей конфиденциальную информацию, он может использовать элемент проверки для удаления конфиденциального контента.
      Веб-дизайнеры Эта функция нужна веб-дизайнерам для проверки различных изменений дизайна и макета, которые они вносят в веб-странице.
      Цифровые маркетологи Цифровые маркетологи могут использовать элементы проверки в своих интересах на своих веб-страницу конкурента, позволяя пользователям видеть скрытые ключевые слова на веб-сайте. Элемент проверки также может показать нам, загружается ли страница слишком медленно или слишком быстро
      Агент поддержки Агент поддержки, объясняющий разработчикам исправления на веб-сайте, может попросить нас показать некоторые быстрые исправления, которые могут произойти с помощью элемента проверки

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

      Как проверять/выделять элементы в DOM?

      Проверка элементов непосредственно с веб-страницы:

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

      1. Во-вторых, DOM (поле элемента) выделяет выбранный элемент.

      На приведенном выше изображении мы выбрали элемент "БЛОГИ " на веб-странице, затем щелкнули правой кнопкой мыши и выбрали параметр Проверить. Следовательно, на панели DOM мы видим, что соответствующий элемент выделен (обозначен красным прямоугольником).

      Проверка элементов с помощью панели DOM DevTools:

      Следующий подход к проверке элемента — использование панели DOM. Откройте панель DOM в Chrome DevTools и выполните указанные ниже действия, чтобы проверить веб-элемент:

      • Сначала нажмите кнопку "Выбрать элемент" в верхнем левом углу панели DOM (обозначена маркером 1 на следующем снимке экрана). После этого вы можете нажать на элемент, который хотите проверить; элемент будет выделен.

      На приведенном выше рисунке указатель 1 показывает кнопку "выбрать элемент". Когда мы нажимаем эту кнопку, а затем выбираем любой элемент, который хотим проверить, этот элемент выделяется на веб-странице. Например, на изображении выше мы выбрали класс меню, и этот элемент выделен (БЛОГИ на панели навигации).

      Как найти элементы с помощью Chrome DevTools?

      Панель DOM в Chrome DevTools предоставляет специальный инструмент под названием найти ", позволяющий находить веб-элементы в зависимости от заданных критериев. Таким образом, при просмотре панели DOM мы можем искать различные узлы/элементы с помощью этого инструмента «найти».

      Так как же искать узел/элемент на панели DOM? Открыв Инструменты разработчика Chrome, нажмите "Ctrl + f " и откройте панель поиска (как выделено ниже) для вас в панель DOM, на которой можно ввести критерии поиска.

      Инструмент найти указывает на красный квадрат на изображении выше. Мы видим, что критериями, которые мы можем указать в инструменте поиска, являются строка, селектор CSS или XPath. Следовательно, мы можем искать элементы или узлы в инструменте поиска:

      • указав строку
      • указав селектор CSS, например HTML-тег
      • И, указав XPath как идентификатор.

      Найти элемент по строке

      На панели DOM мы можем указать любую строку для поиска элемента, как показано ниже.

      На изображении выше мы указали "selenium" в виде строки. Он выделяет все записи со значением "selenium". Мы можем видеть справа от инструмента поиска, который показывает нам общее количество записей и какая запись (число) выделена в данный момент (на изображении выше общее количество найденных записей равно 75). Это также дает нам кнопку для прокрутки записей.

      Найти элемент с помощью селектора CSS

      Мы также можем указать селектор CSS в инструменте поиска, и он предоставит нам все записи, связанные с указанным селектором. Так как же нам найти селектор CSS для определенного тега?

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

      Читайте также: