Как проверять веб-элементы с помощью вашего браузера

by

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

Эта статья использует щелкните правой кнопкой мыши для ссылки на действие устройства мыши на ПК с Windows, а также на действие Control + щелчок на Mac.

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

В Google Chrome есть два способа проверить веб-страницу с помощью встроенных в браузер Chrome DevTools:

  • Щелкните правой кнопкой мыши элемент на странице или в пустой области, затем выберите Инспектировать.
  • К Хром меню, затем выберите Другие инструменты > Инструменты разработчика.

Используйте Chrome DevTools, чтобы скопировать или отредактировать разметку языка гипертекстовой разметки (HTML), а также скрыть или удалить элементы до перезагрузки страницы.

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

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

В Mozilla Firefox есть два способа открыть инструмент проверки под названием Inspector:

  • Щелкните правой кнопкой мыши элемент на веб-странице, затем выберите Осмотреть элемент.
  • В строке меню Firefox выберите Инструменты > Web Developer > Инспектор,

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

Щелкните элемент правой кнопкой мыши, чтобы найти поддерживаемые элементы управления. Используйте элементы управления для редактирования страницы как разметки HTML, копирования или вставки внутренней или внешней разметки HTML, отображения свойств объектной модели документа (DOM), создания снимка экрана или удаления узла, применения новых атрибутов, см. Каскадные таблицы стилей (CSS) , и более.

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

Есть несколько способов изучить веб-элементы в Safari:

  • Щелкните правой кнопкой мыши любой элемент или место на веб-странице, затем выберите Осмотреть элемент.
  • К развивать меню, затем выберите Показать веб-инспектор.

Если вы не видите меню «Разработка», перейдите в сафари меню и выберите пункт Настройки. С РАСШИРЕННЫЙ Вкладка, выберите Показать меню «Разработка» в строке меню флажок.

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

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

Аналогичный инструмент проверки элементов, доступ к которому осуществляется при включении инструментов разработчика, доступен в Internet Explorer. Чтобы включить Инструменты разработчика, нажмите F12. Или перейдите в Инструменты меню и выберите пункт Инструменты разработчика.

Чтобы открыть меню Инструменты, нажмите Alt + X.

Чтобы проверить элементы на веб-странице, щелкните страницу правой кнопкой мыши и выберите Осмотреть элемент. В инструменте выбора элемента Internet Explorer выберите любой элемент страницы, чтобы увидеть разметку HTML или CSS. Вы также можете отключить или включить выделение элементов во время просмотра в DOM Explorer.

Как и другие инструменты инспектора элементов, используйте Internet Explorer для вырезания, копирования и вставки элементов, а также для редактирования разметки HTML, добавления атрибутов, копирования элементов с прикрепленными стилями и многого другого.

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

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

  • Перейдите в адресную строку и введите о: флаги. В диалоговом окне выберите Показать исходный код и проверить элемент в контекстном меню флажок.
  • Press F12, А затем выберите DOM Explorer.

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