Из каких элементов состоит вкладка источников в браузере google chrome
Обновлено: 24.11.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:
- Нажмите кнопку меню Chrome.
- Выбрать дополнительные инструменты
- Выберите Инструменты разработчика.
Панель источников
По умолчанию 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. Когда сниппет запускается, он выполняется из контекста текущей страницы.
Как это работает
Чтобы создать фрагмент, выполните следующие простые действия:
- Откройте Chrome DevTools. Вы можете сделать это, выполнив одну из следующих команд:
- Command + Control + C на macOS
- Control + Shift + C в Windows и Linux
- Просто щелкните правой кнопкой мыши в любом месте браузера и выберите "Проверить".
- Однажды вы окажетесь в среде DevTools:
- Откройте панель "Источники".
- Перейдите на вкладку "Фрагменты".
- Щелкните правой кнопкой мыши в навигаторе.
- Выберите «Создать», чтобы создать и назвать новый фрагмент.
Запустить сниппет
Когда вы создали новый фрагмент, введите свой код в предоставленном редакторе, сохраните код и запустите фрагмент, щелкнув правой кнопкой мыши фрагмент и выбрав "Выполнить", как показано ниже:
Вкладка страницы используется для просмотра всех доступных ресурсов на текущей странице. Это в основном полезно для разработчиков, чтобы воспроизвести структуру страницы локально, поскольку все уровни файлов/папок явно отображаются на вкладке страницы.
Структура страницы
Когда вы открываете новую страницу в браузере, вкладка "Страница" на панели "Источники" упорядочивает все ресурсы этой текущей страницы в соответствии с содержимым боковой панели:
Как это работает
Папки проекта содержат соответствующие файлы проекта, содержащие все ресурсы, составляющие текущую страницу.
Когда вы открываете папку проекта и щелкаете файл, он открывается на панели редактора, где вы можете просмотреть содержимое файла или просмотреть изображения.
Заключение
В этом посте мы по отдельности объяснили все компоненты панели "Источники", рассмотрели их функции и возможные варианты использования. Мы все еще не рассмотрели много информации о 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:
- Откройте веб-сайт в Chrome. В этом руководстве мы будем использовать домашнюю страницу Hostinger.
- Нажмите на три вертикальные точки в верхней строке меню Chrome, чтобы открыть раскрывающееся меню, затем выберите Дополнительные инструменты -> Инструменты разработчика.
- В качестве альтернативы можно использовать сочетания клавиш, упомянутые выше, или щелкнуть правой кнопкой мыши веб-страницу и выбрать "Проверить", чтобы быстро получить доступ к инструментам разработчика.
- После того как панель «Элементы» появится в окне браузера, вы сможете внести изменения в исходный код страницы. Измените размер окна инспектора, перетащив его углы для лучшей читаемости.
- По умолчанию инструменты разработчика отображаются в правой части окна браузера. Если вы хотите изменить его местоположение или переместить в отдельное окно, нажмите на три вертикальные точки в правом верхнем углу панели и выберите предпочтительный параметр Dock Side.
- Чтобы увидеть, как веб-страница выглядит на мобильных устройствах, нажмите на панель инструментов "Переключить устройство" в верхнем левом углу панели. Над предварительным просмотром вы можете изменить переменные, чтобы проверить, как страница работает при другом разрешении экрана или уровне ограничения пропускной способности.
- Откройте любую веб-страницу и найдите элемент, который хотите проверить.
- Нажмите элемент правой кнопкой мыши и выберите "Проверить".
- Измените размер окна "Инструменты разработчика", перетащив его углы для лучшей читабельности. При необходимости настройте другие параметры, такие как положение док-станции и тип устройства.
- Используйте панель «Элементы», чтобы применить изменения макета HTML, и панель CSS, чтобы изменить стиль элементов.
- Нажмите/щелкните вкладку Инспектор.
- В Internet Explorer коснитесь и щелкните DOM Explorer или нажмите Ctrl + 1 .
- В Microsoft Edge или Opera коснитесь/щелкните Элементы.
- В Safari элементы управления представлены не так четко, но вы должны увидеть HTML-код, если вы не выбрали что-то еще для отображения в окне. Нажмите кнопку Стиль, чтобы просмотреть CSS.
- Удалить узел (иногда Удалить элемент). Удаляет текущий элемент.
- Редактировать как HTML (иногда Добавить атрибут/Редактировать текст). Позволяет изменять HTML и видеть результаты на лету. Очень полезно для отладки и тестирования.
- :hover/:active/:focus. Принудительно включает состояния элементов, чтобы вы могли видеть, как будет выглядеть их стиль.
- Копировать/копировать как HTML. Скопируйте текущий выбранный HTML-код.
- В некоторых браузерах также доступны функции Копировать путь CSS и Копировать путь XPath, позволяющие копировать селектор CSS или выражение XPath, которые будут выбирать текущий элемент HTML.
- Правила, примененные к текущему элементу, отображаются в порядке убывания специфичности.
- Установите флажки рядом с каждым объявлением, чтобы узнать, что произойдет, если вы удалите объявление.
- Нажмите на маленькую стрелку рядом с каждым сокращенным свойством, чтобы отобразить сокращенные эквиваленты свойства.
- Нажмите на имя свойства или значение, чтобы открыть текстовое поле, где вы можете ввести новое значение, чтобы получить предварительный просмотр изменения стиля в реальном времени.
- Рядом с каждым правилом указано имя файла и номер строки, в которой определено правило. Щелчок по этому правилу приводит к тому, что инструменты разработчика переходят к его отображению в собственном представлении, где его обычно можно отредактировать и сохранить.
- Вы также можете щелкнуть закрывающую фигурную скобку любого правила, чтобы открыть текстовое поле на новой строке, где вы можете написать совершенно новое объявление для своей страницы.
- Вычислено. Здесь отображаются вычисленные стили для выбранного в данный момент элемента (окончательные нормализованные значения, применяемые браузером).
- Макет. В Firefox эта область включает два раздела:
- Блочная модель: визуально представляет блочную модель текущего элемента, поэтому вы можете сразу увидеть, какие отступы, границы и поля применены к нему, а также насколько велик его контент.
- Сетка. Если просматриваемая вами страница использует CSS Grid, в этом разделе можно просмотреть сведения о сетке.
Подробнее
Подробнее об Инспекторе в разных браузерах:
Отладчик JavaScript
Отладчик JavaScript позволяет вам отслеживать значения переменных и устанавливать точки останова, размещать в вашем коде места, выполнение которых вы хотите приостановить, и выявлять проблемы, которые мешают вашему коду выполняться должным образом.
Чтобы перейти к отладчику:
Chrome: откройте инструменты разработчика и выберите вкладку "Источники". (Опера работает так же.)
Edge и Internet Explorer 11: нажмите F12, а затем Ctrl + 3 или, если инструменты уже отображаются, щелкните вкладку "Отладчик".
Safari: откройте инструменты разработчика и выберите вкладку "Отладчик".
Изучение отладчика
В Firefox Debugger есть три панели.
Список файлов
Первая панель слева содержит список файлов, связанных со страницей, которую вы отлаживаете. Выберите файл, с которым вы хотите работать, из этого списка. Щелкните файл, чтобы выбрать его и просмотреть его содержимое в центральной панели отладчика.
Исходный код
Установите точки останова, в которых вы хотите приостановить выполнение.На следующем изображении выделенная цифра 18 показывает, что в строке установлена точка останова.
Просмотр выражений и точек останова
На правой панели отображается список добавленных вами контрольных выражений и установленных вами точек останова.
На изображении в первом разделе "Выражения отслеживания" показано, что была добавлена переменная listItems. Вы можете развернуть список, чтобы просмотреть значения в массиве.
В следующем разделе "Точки останова" перечислены точки останова, установленные на странице. В example.js точка останова была установлена на операторе listItems.push(inputNewItem.value);
Последние два раздела отображаются только во время выполнения кода.
В разделе "Стек вызовов" показано, какой код был выполнен для перехода к текущей строке. Вы можете видеть, что код находится в функции, которая обрабатывает щелчок мыши, и что код в настоящее время приостановлен в точке останова.
Последний раздел, Области действия, показывает, какие значения видны из разных точек вашего кода. Например, на изображении ниже вы можете увидеть объекты, доступные коду в функции addItemClick.
Подробнее
Подробнее об отладчике JavaScript в разных браузерах:
Консоль JavaScript
Консоль JavaScript — невероятно полезный инструмент для отладки JavaScript, который работает не так, как ожидалось. Он позволяет запускать строки JavaScript для страницы, загруженной в данный момент в браузере, и сообщает об ошибках, возникающих при попытке браузера выполнить ваш код. Чтобы получить доступ к консоли в любом браузере:
Если инструменты разработчика уже открыты, нажмите или нажмите вкладку Консоль.
Появится окно, подобное следующему:
Чтобы увидеть, что произойдет, попробуйте ввести в консоль следующие фрагменты кода один за другим (и затем нажать Enter):
Теперь попробуйте ввести следующие неверные версии кода и посмотрите, что получится.
Вы начнете замечать ошибки, которые возвращает браузер. Часто эти ошибки довольно загадочны, но разобраться в этих проблемах должно быть довольно просто!
Читайте также:
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:
Мы надеемся, что эта статья помогла вам узнать, как использовать функцию Chrome Inspect Element и некоторые ее приложения. Если у вас есть какие-либо вопросы или замечания, сообщите нам об этом в разделе комментариев ниже.
Линас начинал как агент по работе с клиентами, а сейчас является полнофункциональным веб-разработчиком и руководителем технической группы в Hostinger. Он обожает предлагать людям первоклассные технические решения, но, несмотря на то, что ему нравится программировать, втайне он мечтает стать рок-звездой.
Каждый современный веб-браузер включает мощный набор инструментов разработчика. Эти инструменты выполняют ряд функций: от проверки загруженных в данный момент HTML, CSS и JavaScript до отображения того, какие ресурсы запрашивала страница и сколько времени потребовалось для их загрузки. В этой статье объясняется, как использовать основные функции инструментов разработки вашего браузера.
Примечание. Прежде чем приступить к рассмотрению приведенных ниже примеров, откройте пример сайта для начинающих, который мы создали во время серии статей "Начало работы в Интернете". Вы должны открыть его, следуя инструкциям ниже.
Как открыть инструменты разработки в браузере
Инструменты разработки находятся внутри вашего браузера в подокне, которое выглядит примерно так, в зависимости от того, какой браузер вы используете:
Как его поднять? Три способа:
Инспектор: обозреватель DOM и редактор CSS
Инструменты разработчика обычно по умолчанию открываются в инспекторе, который выглядит примерно так, как показано на следующем снимке экрана. Этот инструмент показывает, как выглядит HTML на вашей странице во время выполнения, а также какой CSS применяется к каждому элементу на странице. Это также позволяет вам мгновенно изменять HTML и CSS и видеть результаты ваших изменений в реальном времени в окне просмотра браузера.
Если вы не видите инспектора,
Изучение инспектора DOM
Для начала щелкните правой кнопкой мыши (удерживая нажатой клавишу Ctrl) элемент HTML в инспекторе DOM и просмотрите контекстное меню. Доступные пункты меню различаются в зависимости от браузера, но наиболее важные из них в основном одинаковы:
Попробуйте отредактировать часть вашего DOM прямо сейчас. Дважды щелкните элемент или щелкните его правой кнопкой мыши и выберите Редактировать как HTML в контекстном меню. Вы можете вносить любые изменения, которые хотите, но не можете их сохранить.
Изучение редактора CSS
По умолчанию редактор CSS отображает правила CSS, примененные к выбранному в данный момент элементу:
Эти функции особенно удобны:
В верхней части средства просмотра CSS вы увидите ряд интерактивных вкладок: