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

Обновлено: 05.07.2024

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

В этой статье рассказывается о том, как можно обнаруживать изменения в элементах модели DOM во время выполнения, в первую очередь для отладки. Это первая статья из серии статей, посвященных полезным инструментам Chrome Dev.

Панель «Элементы», как вы знаете, — это место, где вы можете увидеть элементы, которые в настоящее время доступны в DOM (модальный объект документа).

Chrome позволяет прослушивать три определенных события, которые происходят с элементом в дереве DOM.

Добавить/обновить значение атрибута
Изменение дочерних элементов (поддерево)
Удаление узла (дочерние элементы)

Как добавить слушателей?

Откройте Инструменты разработчика и выберите вкладку Элементы. В списке узлов DOM выберите узел, на который нужно добавить прослушиватель.

После выбора узла слева от узла появится меню из трех точек. При нажатии на точки откроется контекстное меню с множеством параметров.

Теперь, чтобы добавить слушателя, выберите параметр "Перерыв", а затем тип события. После выбора Chrome будет прослушивать изменения в этом конкретном элементе и останавливать выполнение JS на строке кода, которая изменяет выбранный узел.

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

Предварительный просмотр (разрыв при изменении поддерева):

Если вы хотите попробовать это сами, перейдите к репозиторию ниже. Он имеет файл, который показан в видео. Клонируйте репозиторий и экспериментируйте :)

apvarun/learndevtools

Улучшайте отладку с помощью DevTools

Подборка пошаговых инструкций по использованию инструментов разработчика в браузере. Подробнее здесь

Начало работы

Содействие

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

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

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

В этой статье показано, как получить доступ к Inspect Element в Google Chrome. Вы узнаете о его различных применениях, в том числе о том, как изменить или скрыть элемент страницы и проверить классы CSS.

Знакомство с панелью Elements в Chrome

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

Существует несколько способов открыть Инструменты разработчика в Google Chrome. Первый способ — через Меню. Нажмите на три вертикальные точки в правом верхнем углу браузера. Затем наведите курсор на «Дополнительные инструменты» и нажмите «Инструменты разработчика».

Чтобы проверить элемент в Chrome, щелкните элемент страницы правой кнопкой мыши и выберите «Проверить» или используйте сочетание клавиш Ctrl+Shift+C для Windows и Command+Shift+C для Mac, чтобы открыть меню «Инструменты разработчика». Затем вы можете использовать Ctrl+F для поиска другого элемента.

Панель инструментов разработчика состоит из трех основных частей:

Панель «Элементы/DOM» — содержит дерево объектной модели документа (DOM) страницы и предоставляет вам полный доступ к исходному коду HTML. Обычно он находится в верхней части инструментов разработчика.
Панель CSS – позволяет изменять правила стиля веб-страницы путем изменения, добавления или удаления свойств CSS. Эта панель находится в средней части, прямо под стилями.
Консоль: показывает, что нового в инструментах разработчика. Он также используется для запуска JavaScript. Он отображается в нижней части инструментов разработчика.

Инструменты разработчика Chrome также включают другие функции, такие как источник, сеть, приложение, безопасность и другие.В этой статье показано, как изменить атрибуты страницы с помощью панелей «Элементы» и «CSS».

Что можно делать с помощью инструментов разработчика Chrome?

Функция Inspect Element предлагает веб-разработчикам множество преимуществ. Вот что можно делать с панелями Elements и CSS:

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

Зачем вам нужно проверять веб-элементы?

Если вы веб-разработчик, вы можете использовать Inspect Element, чтобы изменить дизайн сайта и увидеть изменения в реальном времени, прежде чем внедрять их на постоянной основе. Это экономит время и делает общение с клиентами более эффективным.

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

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

Как получить доступ к инструменту проверки элементов в Chrome?

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

На нашей странице поддержки можно найти руководства по проверке элементов в других браузерах, таких как Mozilla Firefox, Opera и Internet Explorer.

Вот как использовать Inspect Element в Google Chrome:

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

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

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

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

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

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

Профессиональный совет

Чтобы проверить определенный элемент, щелкните его правой кнопкой мыши и выберите параметр "Проверить". Окно веб-инспектора откроется и автоматически выделит исходный код выбранного элемента.

Изменить элемент

Чтобы изменить элемент страницы, необходимо изменить исходный код CSS или HTML страницы. Таким образом, вы можете редактировать текст страницы и его элементы стиля, такие как толщина, размер и цвет шрифта.

Панель DOM позволяет легко изменять текст. После открытия окна «Элементы» используйте функцию проверки — значок курсора в левом верхнем углу панели — чтобы выделить элемент, исходный код которого вы хотите изменить. Затем щелкните правой кнопкой мыши код, выделенный в дереве DOM, и выберите «Редактировать как HTML».

Окно редактора расширится, и вы сможете изменить текст. Отмените выбор элемента, чтобы просмотреть изменения.

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

Изменение стиля элементов аналогично, но вам нужно будет использовать панель CSS.

Используйте инструмент "Проверка", чтобы выделить элемент. Затем щелкните свойство element.style в верхней части панели CSS и добавьте нужные объявления стиля в фигурные скобки.

В следующем примере мы добавили цвет фона к текстовому блоку:

Если вы хотите добавить еще одно объявление стиля, снова выберите свойство element.style. Веб-инспектор добавит вам еще одну пустую строку для заполнения.

Здесь мы добавили второе свойство, отображающее текст курсивом:

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

Чтобы использовать другие типы форматирования, ознакомьтесь со значениями и свойствами CSS.

Скрыть или удалить элемент

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

Для этого сначала откройте Инструменты разработчика и щелкните элемент, который хотите скрыть, с помощью инструмента проверки. Затем щелкните правой кнопкой мыши код, выделенный в дереве DOM, и выберите «Скрыть элемент».

На панели CSS появится новое свойство видимости. Снимите флажок, чтобы отменить изменение.

Если вместо этого вы хотите удалить элемент HTML, щелкните правой кнопкой мыши выделенный код и выберите Удалить элемент. Обновление страницы восстановит удаленный код.

Профессиональный совет

Все изменения, сделанные с помощью инструмента «Проверить элемент», можно отменить, нажав Ctrl+Z в Windows и Linux или Command+Z в macOS.

Проверка классов CSS

Проверка элементов веб-страницы также является отличным способом проверки кода элементов сайта, которые вам нравятся. Вы можете скопировать код для оформления элементов сайта с помощью классов CSS.

Для этого откройте инструменты разработчика и активируйте инструмент проверки. Затем наведите курсор на интересующий вас элемент. Его основная информация, такая как цвет, шрифт и поля, появится в поле, а его исходный код будет выделен на панели DOM.

Вы можете найти определенный стиль CSS, нажав Ctrl+Shift+F в Windows и Linux или Command+Option+F в macOS.

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

Заключение

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

Давайте рассмотрим шаги по использованию инструмента Inspect Element в Chrome:

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

Мы надеемся, что эта статья помогла вам узнать, как использовать функцию Chrome Inspect Element и некоторые ее приложения. Если у вас есть какие-либо вопросы или замечания, сообщите нам об этом в разделе комментариев ниже.

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

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

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

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

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

В этой статье будут показаны два простых метода проверки веб-элементов в браузере Chrome.

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

Проверка элемента в Chrome

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

Способ 1. Проверка элемента с помощью инструментов разработчика Chrome

Ниже перечислены шаги для проверки элемента в браузере Chrome:

Запустите Chrome и перейдите на нужную веб-страницу, которую нужно проверить. (В этом примере рассмотрим домашнюю страницу BrowerStack)
В правом верхнем углу нажмите на три вертикальные точки.
В раскрывающемся меню выберите Дополнительные инструменты -> Инструменты разработчика.
Пользователи macOS могут использовать сочетание клавиш — command + option + C, а пользователи Windows могут использовать сочетание клавиш Control + Shift + C.
Инструменты разработчика откроются вместе с консолью и несколькими другими инструментами. Измените размер окна редактора, перетащив углы для удобного просмотра и отладки.

Один из самых простых способов проверить конкретный веб-элемент в Chrome — просто щелкнуть правой кнопкой мыши по этому конкретному элементу и выбрать параметр "Проверить".

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

Теперь давайте перейдем ко второму способу проверки веб-элементов в нужных версиях Chrome.

Способ 2. Использование BrowserStack Live (для определенных версий Chrome)

BrowserStack – это облачная платформа для тестирования, которая позволяет разработчикам и тестировщикам тестировать свои веб-сайты в популярных операционных системах и браузерах.

Облако реальных устройств включает более 2000 реальных устройств и браузеров для всестороннего удаленного тестирования. Инфраструктура BrowserStack включает в себя популярные браузеры, такие как Chrome, Firefox, Safari (включая последние и устаревшие версии), а также устройства таких производителей, как Samsung, Apple, OnePlus и т. д. Полный список см. здесь.

Чтобы проверить веб-элемент в определенной версии Chrome, выполните следующие действия:

Перейдите к панели управления Live после регистрации.
Выберите нужную операционную систему (Android, Windows, macOS). Рассмотрим в качестве примера Windows 10.
Выберите Chrome и его нужную версию (в данном случае v.90).
Нажмите на нужную версию Chrome. Новый сеанс Live будет инициирован в реальном браузере Chrome.
Перейдите на нужный веб-сайт и выполните шаги, указанные в первом способе.

С 65% общей доли рынка браузеров Chrome является бесспорным лидером рынка. Естественно, пользователи с большей вероятностью будут проверять или диагностировать свои веб-сайты в Chrome.

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

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

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

Панель элементов

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

В этой демонстрации я начну с использования страницы Model Railroad Hobbyist (рис. A). Откройте страницу в Google Chrome, щелкните правой кнопкой мыши в любом месте страницы и выберите «Проверить элемент» в нижней части диалогового окна. По умолчанию панель консоли открывается на панели элементов. Когда панель элементов активна, мы можем просматривать HTML-код, выбирать элемент и просматривать его свойства. В этом случае метрики для основного блока контента показывают, как он читается браузером, выделенная область также выделяется синим цветом в верхней панели браузера. Это показывает HTML-элементы страницы на главной панели, а также стили, метрики, свойства и прослушиватели событий на правой боковой панели. Это очень полезно, когда вам интересно, какая часть HTML сгенерировала тот или иной элемент страницы.

Рисунок А

Нажмите, чтобы увеличить изображения.

Дерево элементов DOM, включая его встроенные скрипты и стили, выделены синтаксисом; например, когда я выбираю

Рисунок Б

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

, а также классы. Хороший способ заглянуть внутрь — выбрать атрибут привязки class или id; например, на веб-сайте Google Code я выбрал

и в представлении панели "Элементы" я могу видеть, что такое соответствующие правила CSS, определяющие атрибут. Как показано на рис. C, мы можем определить, что размер шрифта равен 1em, margin равен нулю, padding равен 0,1em, 0 и т. д.

Рисунок C

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

Обновление на лету

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

Теперь предположим, что вы хотите посмотреть, что произойдет со стилем, когда вы отключите или измените свойство. В разделе Matched CSS Rules вы можете отключить любое из свойств, сняв флажок с зеленого флажка, как показано в примере ниже на рисунке D, где поле отключено для результатов «g-first» в разделах «Новости» и «Объявления». под разделом Рекомендуемые товары на странице.

Рисунок D

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

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

Рисунок E

Ввод или вставка одного или нескольких свойств добавляет новые свойства к правилу стиля. Если вы редактируете значение свойства стиля с числом, вы можете использовать клавиши со стрелками вверх или вниз, чтобы изменить число, и, удерживая клавишу Alt/Option, шагать с шагом 0.1; удерживая клавишу Shift с шагом 10. Вы также можете добавить дополнительные свойства, дважды щелкнув любое пустое пространство слева или под любыми существующими записями или вставив несколько свойств, разделенных точкой с запятой. Вы можете изменить имена селекторов стилей, дважды щелкнув их имена, а также добавить новые селекторы стилей с помощью меню Gear, расположенного справа от панели раздела «Стили», как показано на рисунке F ниже.

Рисунок F

Блочная модель показателей

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

Рисунок G

Свойства

Выберите панель «Свойства» на правой боковой панели, а затем разверните «Элемент», чтобы открыть свойства DOM, где вы можете изменить и поэкспериментировать с такими свойствами, как размытие, конструктор, фокус и другими, как показано на рис. H. ниже.

Рисунок Н

Прослушиватели событий

Прослушиватели событий отображаются для выбранных узлов в том порядке, в котором они выполняются и фиксируются во время рендеринга, и разделены по типу. Например, если на узле есть слушатели onclick и onmouseover, они будут отображаться в разных разделах. Параметры фильтра также можно установить в меню Gear, и вы можете выбрать отображение только прослушивателей, зарегистрированных на выбранном узле, или всего потока событий. Пример событий щелчка и документа, как показано на рисунке I ниже.

Рисунок 1

Функция поиска

Вы также можете искать на панели элементов любой код, теги, идентификаторы, классы и скрипты, на которых вы можете захотеть сосредоточить свое внимание, — даже создать список поиска высокоприоритетных совпадений, которые вам нужно найти в быстрая мода. Например, если ввести в поле поиска слово «форма», будет найдено 10 соответствий, а первый экземпляр будет выделен, как показано на рис. J ниже.

Рисунок J

Панель "Элементы" также поддерживает селекторы XPath и CSS в качестве запросов в поле поиска в дополнение к простому тексту, показанному выше.

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

Опубликовано: 20 января 2012 г., 1:20 по тихоокеанскому стандартному времени. Изменено: 20 января 2012 г., 1:20 по тихоокеанскому стандартному времени. Подробнее о корпоративном программном обеспечении

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