Из каких элементов состоит вкладка источников в браузере google chrome

Обновлено: 02.07.2024

С помощью Chrome DevTools можно легко просматривать и изменять любую страницу в браузере. Панель «Источники» — это мощный компонент DevTools. Давайте углубимся в нее, чтобы увидеть, как она может помочь нам улучшить нашу разработку.

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

С DevTools легко просматривать и изменять любую страницу в браузере, просто просматривая ее элементы и изменяя значения HTML и CSS. В этом посте мы обсудим панель «Источники DevTools» и все ее компоненты. Для начала давайте сначала продемонстрируем, как открыть DevTools в вашем браузере. Мы можем сделать это несколькими способами, которые мы перечислим ниже:

Открыть инструменты разработчика

Чтобы открыть Chrome DevTools, выполните любое из следующих действий:

Используйте сочетания клавиш, выполнив следующие команды:
- Command + Control + C на macOS
- Control + Shift + C в Windows и Linux
Проверьте страницу, щелкнув правой кнопкой мыши в любом месте браузера и выбрав "Проверить".
Использовать главное меню Chrome:
1. Нажмите кнопку меню Chrome.
2. Выбрать дополнительные инструменты
3. Выберите Инструменты разработчика.
Панель источников

По умолчанию Chrome DevTools открывает панель "Элементы", как видно из изображения выше. Однако в этом посте нас интересует панель Sources. Давайте продолжим и переключимся на него, поскольку мы будем обсуждать его компоненты в этом посте:

На панели "Источники" у нас есть четыре отдельных компонента:
- Страницы
- Файловая система
- Переопределение
- Фрагменты
- Мгновенное редактирование и запуск файлов CSS и JS
- Создание, сохранение и выполнение фрагментов кода
- Сохранение изменений при перезагрузке страницы
- Включение доступа к файловой системе браузера
- Отладка и т. д.
Ограничения

Как было сказано ранее, панель "Источники" имеет свои ограничения. К ним относятся:
- Вы не можете сохранить изменения, сделанные в дереве DOM на панели «Элементы». Следовательно, вместо этого вам придется редактировать HTML на панели «Источники».
- Если вы редактируете CSS на панели «Стили», а источником этого CSS является файл HTML, DevTools не сохранит изменения. Поэтому вам также придется отредактировать HTML-файл на панели «Источники».
Теперь давайте подробно рассмотрим эти операции в соответствующих компонентах, чтобы дать вам более четкое представление. Начнем с переопределений.

Переопределения

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

Как это работает:
- Во-первых, необходимо указать каталог, в котором DevTools сохранит внесенные изменения.
- При внесении изменений в DevTools измененная копия сохраняется в вашем каталоге.
- Когда страница перезагружается, DevTools предоставляет вам локальный измененный файл
Настроить переопределения:
- Откройте панель "Источники".
- Откройте вкладку "Переопределения".
- Нажмите "Настроить переопределения".
- Выберите каталог, в котором вы хотите сохранить изменения.
- В верхней части области просмотра нажмите «Разрешить», чтобы предоставить DevTools доступ для чтения и записи к каталогу.
- Внесите изменения
Файловая система

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

Файловая система дает Chrome возможность служить IDE для разработчиков, поскольку дает нам возможность вносить изменения в локальные файлы.

Как это работает:

Чтобы лучше понять, как это работает, давайте откроем папку проекта в файловой системе и внесем в нее изменения в файлы проекта.
- Откройте браузер Google Chrome и откройте Chrome DevTools. (Вы можете использовать сочетание клавиш Command + Options + J на Mac или Control+Shift+J на Windows, чтобы открыть консоль)
Настроить файловую систему

Для начала откройте DevTools и перейдите на вкладку "Источники":

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

Нажмите «Разрешить», и папка вашего проекта будет правильно настроена на вкладке «Файловая система» под навигатором. Теперь, когда вы щелкнете вкладку «Файловая система», вы сможете увидеть файлы проекта:

Теперь, когда наш проект правильно настроен в Chrome, мы можем вносить изменения в файлы нашего проекта прямо из Chrome. Во-первых, для простоты давайте поиграем с именами членов нашей команды.

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

Фрагменты

Это сценарии, которые вы можете запускать, создавать и выполнять на панели "Источники" Chrome DevTools. Когда сниппет запускается, он выполняется из контекста текущей страницы.

Как это работает

Чтобы создать фрагмент, выполните следующие простые действия:
1. Откройте Chrome DevTools. Вы можете сделать это, выполнив одну из следующих команд:
  - Command + Control + C на macOS
  - Control + Shift + C в Windows и Linux
  - Просто щелкните правой кнопкой мыши в любом месте браузера и выберите "Проверить".
2. Однажды вы окажетесь в среде DevTools:
  1. Откройте панель "Источники".
  2. Перейдите на вкладку "Фрагменты".
  3. Щелкните правой кнопкой мыши в навигаторе.
  4. Выберите «Создать», чтобы создать и назвать новый фрагмент.
  Запустить сниппет
  
  Когда вы создали новый фрагмент, введите свой код в предоставленном редакторе, сохраните код и запустите фрагмент, щелкнув правой кнопкой мыши фрагмент и выбрав "Выполнить", как показано ниже:
  
  Вкладка страницы используется для просмотра всех доступных ресурсов на текущей странице. Это в основном полезно для разработчиков, чтобы воспроизвести структуру страницы локально, поскольку все уровни файлов/папок явно отображаются на вкладке страницы.
  
  Структура страницы
  
  Когда вы открываете новую страницу в браузере, вкладка "Страница" на панели "Источники" упорядочивает все ресурсы этой текущей страницы в соответствии с содержимым боковой панели:
  
  Как это работает
  
  Папки проекта содержат соответствующие файлы проекта, содержащие все ресурсы, составляющие текущую страницу.
  
  Когда вы открываете папку проекта и щелкаете файл, он открывается на панели редактора, где вы можете просмотреть содержимое файла или просмотреть изображения.
  
  Заключение
  
  В этом посте мы по отдельности объяснили все компоненты панели "Источники", рассмотрели их функции и возможные варианты использования. Мы все еще не рассмотрели много информации о Chrome DevTools, которая обещает улучшить ваш опыт разработки и проектирования, поэтому вам стоит ознакомиться с официальной документацией DevTool для них.
  
  Дополнительная информация о создании отличных веб-приложений
  
  Хотите узнать больше о создании отличных пользовательских интерфейсов? Ознакомьтесь с Kendo UI — нашей полной библиотекой компонентов пользовательского интерфейса, которая позволяет быстро создавать высококачественные адаптивные приложения. Он включает в себя все необходимые компоненты, от сеток и диаграмм до планировщиков и циферблатов.
  
  Кристиан Нвамба
  
  Кристиан – разработчик программного обеспечения из Лагоса (Нигерия) и адвокат разработчиков. Он продолжает раздвигать границы с/для Next Billion Users и Next Million Developers через Microsoft.
  
  Несколько месяцев назад я начал составлять серию руководств по превосходным инструментам отладчика Chrome. Изучив вкладку «Элементы» и вкладку «Сеть», я продолжу работать слева направо и в этом месяце рассмотрю вкладку «Источники», которая функционирует почти как полноценная IDE в браузере и особенно полезна для разработчиков Javascript. Я подозреваю, что большинство пользователей инструментов отладки Chrome начали с изучения вкладки "Источник" и обнаружили остальные ее функции позже.
  
  Точки останова на исходном уровне
  
  В простейшем случае вкладка "Источники" позволяет устанавливать точки останова и оценивать выражения в Javascript независимо от того, загружался ли этот сценарий из отдельного файла или был частью страницы, как показано на рис. 1 ниже, на котором показан снимок экрана. очень простой Пример 1.
  
  Рисунок 1. Простая однофайловая веб-страница
  
  Рисунок 1 не очень интересен, потому что на нем ничего не происходит; страница уже загружена. Вы можете, конечно, просмотреть исходный код страницы отсюда, но вы можете увидеть это на вкладке «Элементы» в более красивом, красивом виде. Однако вкладка «Источник» имеет преимущество над вкладкой «Элементы», если на странице есть какой-либо Javascript. Если щелкнуть «желоб» рядом со списком исходных текстов, где находятся номера строк, появится синий символ шеврона, указывающий, что вы установили точку останова. Если на странице установлена точка останова, браузер приостановит рендеринг страницы при выполнении этого фрагмента Javascript. Поскольку единственная строка Javascript на рис. 1 является «встроенной» (то есть не содержится внутри функции), она выполняется сразу после анализа. На рис. 2 показано, как будет выглядеть браузер, если установить точку останова в строке 5 и обновить страницу.
  
  Рисунок 2: разрыв строки кода Javascript
  
  Несколько интересных моментов, которые следует отметить в отношении рисунка 2. Во-первых, область отображения браузера совершенно пуста — в этот момент тег еще не встретился, поэтому у документа еще нет тела. Значок «загрузка» в верхнем левом углу браузера (не показан на рис. 2) продолжает вращаться, поскольку загрузка страницы приостановлена в ожидании инструкций. В этом случае делать нечего, но взгляните на всплывающую подсказку вверху с надписью «Приостановлено в отладчике». Справа от текста вы видите направленный вправо треугольник и стрелку. Первый сообщает Chrome завершить загрузку страницы (или перейти к следующей точке останова, если она обнаружена), а второй сообщает Chrome запустить выделенную строку и остановиться на следующей.
  
  Эти два значка дублируются в области справа от исходного списка вместе с четырьмя другими, о которых я расскажу ниже. А пока просто нажмите треугольник resume и подождите, пока страница загрузится.
  
  Стек вызовов
  
  Пример 2 представляет собой немного более интересную страницу, на которой вычисляются последовательности Фибоначчи (хотя реализация немного ухитрилась показать некоторые части отладчика). Установка точки останова в строке 9 и перезагрузка, как показано на рис. 3, не приводят к немедленному выполнению каких-либо действий, поскольку функция fib не вызывается до тех пор, пока вы не введете значение для n и не нажмете кнопку Compute. (Если вы следите за текстом, не забудьте поставить число вместо n ).
  
  Рисунок 3. Последовательность Фибоначчи
  
  Теперь, когда вы вводите 8 для вычисления 8-го числа Фибоначчи (то есть 21) и нажимаете «Вычислить», браузер останавливается, как показано на рисунке 4.
  
  Рисунок 4: пауза внутри функции
  
  Обратите внимание на область состояния программы справа от листинга исходного кода. Он состоит из 7 заголовков, которые можно разворачивать или сворачивать по отдельности: Watch Expressions, Call Stack, Scope Variables, Breakpoints, DOM Breakpoints, XHR Breakpoints и Event Listener Breakpoints. Эта область отвечает за предоставление вам представления о том, что происходит в «программе» Javascript прямо сейчас — вот почему на рисунке 3 она практически пуста, поскольку код Javascript не выполнялся. На рис. 4 вы можете узнать гораздо больше.
  
  На рисунке 4 заголовок переменных Scope разделен на два подраздела: Local и Global . Если вы снова посмотрите на рисунок 2, то заметите, что в примере 1 показана одна глобальная переменная с именем Window, как и на рисунке 4. Это иллюстрирует особенность Javascript (по крайней мере, в отличие от многих других языков программирования, таких как Java и C). . Локальная переменная — это переменная, объявленная с помощью ключевого слова Javascript var. Но, как вы, возможно, знаете, var не требуется в Javascript — вы можете законно объявить переменную, например: Это не локальная переменная и не будет отображаться в списке локальных переменных; вместо этого он добавляется как свойство глобальной области видимости, которая всегда определена и всегда точно одна из них. Используйте команду step over, чтобы перейти к строке 11, чтобы увидеть это в действии — переменная индекса цикла i объявлена без ключевого слова var, поэтому она отображается не как локальная переменная, а как свойство глобальной переменной, как показано на рисунке. 5.
  
  Рисунок 5: нелокальные переменные становятся свойствами глобальной области видимости
  
  В этом случае у глобальной области есть имя, и это имя будет Window . Global всегда определяется и в Javascript на стороне клиента всегда является экземпляром «Window». На рис. 4 показана дополнительная локальная переменная n — параметры, передаваемые функциям, всегда становятся локальными переменными.
  
  Теперь нажмите «Вступить», и вы перейдете к функции fib_elem, показанной на рис. 6. Обратите внимание, что стек вызовов увеличился на одну запись; каждый раз, когда вызывается функция, стек вызовов отслеживает, где был сделан вызов, и сохраняет ссылку на него. Теперь вы можете видеть, что (в этот момент выполнения) fib_elem был вызван fib, который первоначально был вызван onclick. Щелкните вызов fib в стеке вызовов, и вы увидите, каким было n, когда этот уровень стека вызовов был активен. Кроме того, в листинге исходного кода выделена строка, из которой был сделан исходный вызов функции.
  
  Рис. 6. Просмотр стека вызовов в резервной копии
  
  Однако код находится не там; если бы вы щелкнули step over , вы бы вернулись на текущий уровень в стеке вызовов. Однако прежде чем вы это сделаете, вы можете заглянуть в стек еще дальше, к вызову onclick, с которого все началось, как показано на рис. 7.
  
  Рисунок 7: обработчик onclick
  
  Точки останова прослушивателя событий
  
  Пока что это шаблонный отладчик с исходным кодом; если вы использовали любой другой инструмент IDE, такой как Eclipse, Visual C++ (или даже GDB), это должно быть вам знакомо, и даже если вы этого не сделали, вы почти наверняка сразу увидите утилиту. Однако есть несколько расширений, которые довольно специфичны для выполнения Javascript, особенно в браузере. Например, на рис. 7 я показал вам, как можно пройти по трассировке стека до действия на уровне браузера, которое активировало обработчик Javascript; но что, если бы я закодировал этот обработчик таким образом, чтобы он не вызывал функцию в исходном коде? Что, если бы я действительно хотел сделать паузу в самом обработчике onclick? Вы можете подумать, что можете просто установить точку останова в строке 21, где объявлен обработчик onclick. И хотя Chrome послушно поместит значок точки останова рядом со строкой 21, чтобы вы думали, что он остановится на этом месте, когда эта строка будет выполнена (т. е. нажата кнопка), браузер просто проплывает мимо нее.
  
  Здесь пригодятся точки останова прослушивателя событий. Если вы развернете заголовок Event Listener Breakpoints в отладчике, вы увидите классифицированный список всех действий, к которым клиентский Javascript может прикрепить обработчики. В этом случае тот, который вас интересует, находится в разделе «Мышь» — в частности, обработчик кликов. На рис. 8 показан обработчик кликов, вызываемый для нажатия кнопки из примера 2. Раздел переменных области действия такой же, как и на рис. 7, но на этот раз стек вызовов показывает только один уровень, поскольку обработчик верхнего уровня не сделал какие-либо вызовы еще. Важно понимать, что точки останова прослушивателя событий прерываются только в том случае, если у вас есть прослушиватель рассматриваемого события — например, в полях ввода могут быть установлены события щелчка, но если ваш код не прикрепил к ним прослушиватель, отладчик не сломается. Он разобьется независимо от того, использовали ли вы HTML-атрибут on, как я сделал в примере 2, или более современный: или даже обработчик событий jQuery (к сожалению, в последнем случае вы попадете в среду выполнения jQuery).
  
  Рисунок 8: точка останова обработчика onclick
  
  Пауза в исключениях
  
  Я говорил о пяти из шести кнопок действий в верхней части области состояния программы: пауза/воспроизведение, переход, переход, выход и отключение точек останова. Последний — Pause on Exceptions. В примере 3 вызывается одна строка Javascript:, которая заставит Chrome выдать TypeError, так как я пытался вызвать функцию для несуществующего свойства окна nonexistent . Однако, если вы загрузите страницу, вы не увидите никаких признаков того, что что-то пошло не так. Однако, поскольку Javascript останавливает выполнение при ошибке, код под этой строкой никогда не будет вызван, и вам останется только гадать, что не так с вашей страницей. Нажатие паузы на исключениях, как показано на рис. 9, по крайней мере позволяет вам увидеть, что пошло не так, хотя вы не можете исправить это. Описание самой ошибки отображается в желтой области под панелью управления. Приостановка в исключениях почти всегда полезна, и я почти всегда оставляю ее активной.
  
  Рисунок 9: приостановка работы с исключениями
  
  Возможно, вы заметили, что при активации функции «Пауза при возникновении исключений» появился новый флажок «Пауза при обнаружении» . Этот флажок, кажется, не меняет поведение страницы, и, например, 3, это не так.Однако в примере 4 я окружил ошибочный вызов блоком try/catch с благими намерениями: в некотором смысле это даже хуже, потому что часть за пределами обработчика try делала запустить, так что у вас действительно не будет никаких признаков того, что что-то не так, если вы случайно не посмотрите на консоль. Однако, если вы нажмете флажок «Пауза при обнаружении», вы будете уведомлены о проблеме, как только она произойдет.
  
  Выражения просмотра
  
  Следить за выражениями вверху позволяет ввести выражение, которое будет оцениваться каждый раз, когда отладчик приостанавливает работу, в том числе после полного отображения страницы. Если выражение имеет смысл относительно переменных области видимости, вы увидите его значение; если нет, Chrome просто сообщит, что это . Вам никогда не нужно отслеживать переменные — вы всегда можете определить значения переменных из Scope Variables , но контрольные переменные время от времени пригодятся в ходе длительного сеанса отладки.
  
  Точки останова
  
  До сих пор я обсуждал кнопки вверху, выражения просмотра, стек вызовов и переменные области видимости. Остальные четыре заголовка инструментов отладчика — «Точки останова», «Точки останова DOM», «Точки останова XHR» и «Точки останова прослушивателя событий» — показывают списки установленных вами точек останова. Самый простой — первый, просто помеченный как Breakpoints — он показывает вам, где в вашем исходном коде вы установили точку останова на уровне строки. Если механизм выполнения Javascript достигает любой из этих строк, механизм приостанавливается, а инструменты отладчика становятся активными, как показано на рисунке 2. Вы можете снять флажок рядом с точкой останова, и это приведет к тому, что Chrome будет игнорировать эту точку останова, пока вы не -Проверь это; полезно, если вам нужно установить точку останова внутри цикла по какой-либо причине. Точки останова — это списки всех точек останова в любом исходном файле, который был загружен этой страницей.
  
  Chrome также делает все возможное, чтобы отслеживать установленные вами точки останова и перезагружать их, когда вы повторно открываете страницу позже. Это означает, что если у вас есть две или более страниц, которые совместно используют исходный файл Javascript, точки останова, установленные вами на одной странице, будут по-прежнему активны при загрузке другой страницы. Однако, если вы измените исходный файл вне Chrome, точка останова останется на той же строке, что и при его первоначальном создании, даже если эта логическая строка переместилась вверх или вниз в исходном файле. Что, если вы удалите строку полностью? В этом случае точка останова по-прежнему будет оставаться недостижимой, пока вы не решите удалить ее или расширить файл исходного кода, включив в него код в этой строке в будущем.
  
  Точки останова DOM
  
  Что насчет точек останова DOM? Если вы развернете треугольник раскрытия, кажется, нет никакого способа добавить его. Вместо этого, как показано на рисунке 10 ниже, единственный способ создать точку останова DOM — это перейти на вкладку «Элементы», щелкнуть правой кнопкой мыши элемент DOM (т. е. один из ваших тегов HTML) и выбрать один из «Разрыв». опции. Как видите, их немного.
  
  Рисунок 10. Точки останова DOM
  
  Точки останова XHR
  
  Под точками останова DOM находятся точки останова XHR , последний оставшийся подзаголовок инструментов отладчика.
  
  Рисунок 11. Точки останова XHR
  
  Рисунок 12. Разрыв в XHR
  
  Стек асинхронных вызовов
  
  Некоторые другие источники асинхронных вызовов в Javascript связаны с setTimeout и более новыми функциями HTML5, такими как Web Workers.
  
  Рисунок 13. Стек асинхронных вызовов
  
  Исходники скриптов
  
  Все предыдущие примеры были довольно упрощенными, чтобы продемонстрировать один аспект инструментов отладчика Chrome. Однако большинство веб-интерфейсов намного сложнее, и в Chrome есть много возможностей для учета этого. На рис. 14 показан список источников при загрузке домашней страницы Amazon. Здесь вы видите, что все загруженные исходные файлы упорядочены по домену и пути. Это представление может быть особенно полезным при попытке диагностировать междоменные сценарии и проблемы с совместным использованием файлов cookie. Список источников обновляется динамически, так что когда, как это часто бывает, скрипты загружают другие скрипты, вы можете видеть, что они есть.
  
  Хотя представление источников показывает, из какого домена и пути был загружен сценарий, оно не сообщает вам, какой исходный файл был ответственен за то, что он попал в область действия. Вы можете быть удивлены, когда однажды обнаружите, например, что EXT-JS внезапно появился на вашей веб-странице, что вызвало странные конфликты. Вы, наверное, подозреваете, что виноват рекламодатель, но какой именно?Все, что вы можете сказать на вкладке «Источник», это то, что он был загружен с домена www.sencha.com. Chrome предлагает вам способ отследить сценарий до его конечного источника — щелкните правой кнопкой мыши сценарий в разделе «Источники» и выберите «Показать на сетевой панели». Это приведет вас к вкладке «Сеть», в которой есть столбец «Инициатор» каждого веб-артефакта. Однако вы увидите параметр «Показать на сетевой панели» только в том случае, если инструменты отладчика Chrome были открыты при загрузке страницы в первую очередь; возможно, вам придется открыть инструменты отладчика и перезагрузить страницу, чтобы увидеть ее.
  
  Рисунок 15. Отображение на сетевой панели
  
  Минификация и исходные карты
  
  Однако в большинстве случаев Javascript не развертывается, как в примерах, которые я показывал до сих пор, со встроенными
  
  Если вы являетесь веб-разработчиком, вам может понадобиться тестировать все на лету, когда вы общаетесь со своими клиентами. Кроме того, вам может потребоваться поделиться снимком экрана, но веб-страница, которую вы пытаетесь сделать, содержит вашу личную информацию.
  
  Инструмент "Проверить элемент" полезен в обоих случаях. Он позволяет пользователям получать доступ к исходному коду веб-страницы и управлять ее элементами. Поскольку это встроенная функция во всех основных браузерах, как посетители, так и веб-разработчики могут использовать этот инструмент для отладки, тестирования и исследования ключевых слов.
  
  В этой статье показано, как получить доступ к Inspect Element в Google Chrome. Вы узнаете о его различных применениях, в том числе о том, как изменить или скрыть элемент страницы и проверить классы CSS.
  
  Знакомство с панелью Elements в Chrome
  
  Проверка элемента – это функция Инструментов разработчика Chrome, позволяющая проверять и изменять внешние веб-элементы страницы. С помощью этого инструмента можно изменить внешний вид и содержимое веб-страницы, отредактировав ее файлы CSS и HTML.
  
  Существует несколько способов открыть Инструменты разработчика в Google Chrome. Первый способ — через Меню. Нажмите на три вертикальные точки в правом верхнем углу браузера. Затем наведите курсор на «Дополнительные инструменты» и нажмите «Инструменты разработчика».
  
  Чтобы легко проверить элемент в Chrome, щелкните элемент страницы правой кнопкой мыши и выберите "Проверить", чтобы открыть Инструменты разработчика для этого элемента. Вы также можете использовать сочетание клавиш Ctrl+Shift+C для Windows и Command+Shift+C для Mac для доступа к меню инструментов разработчика.
  
  Панель инструментов разработчика состоит из трех основных частей:
  - Панель «Элементы/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:
  1. Откройте веб-сайт в Chrome. В этом руководстве мы будем использовать домашнюю страницу Hostinger.
  2. Нажмите на три вертикальные точки в верхней строке меню Chrome, чтобы открыть раскрывающееся меню, затем выберите Дополнительные инструменты -> Инструменты разработчика.