Как открыть инспектор в браузере

Обзор инструментов разработки в браузерах

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

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

Как открыть инструменты веб-разработчика в вашем браузере?

Панель разработчика находится в нижней части вашего браузера :

Как её отобразить? Есть три варианта:

• Клавиатура.Ctrl + Shift + I, кроме
  • Internet Explorer.(клавиша — F12)
  • Mac OS X.(сочетание клавиш — ⌘ + ⌥ + I )
• Панель Меню.
  • Firefox. Открыть меню *➤ *➤ Инструменты разработки, или_ Инструменты ➤Веб-разработка ➤ Инструменты разработки
  • Chrome.Дополнительные инструменты ➤ Инструменты разработчика
  • Safari.Разработка ➤ Показать Web Inspector . Если вы не видите меню «Разработка», зайдите в Safari ➤ Настройки ➤ Дополнительно, и проверьте стоит ли галочка напротив «Показать меню разработки».
  • Opera. Меню➤Разработка ➤ Инструменты разработчика. Если вы не видите меню «Разработка», включите его отображение, перейдя в Меню ➤ Другие инструменты ➤ Показать меню разработчика.
• Контекстное меню. Нажмите правой кнопкой мыши на любом участке веб-страницы (Ctrl-клик для Mac), появится контекстное меню, в котором вам нужно выбрать пункт Исследовать Элемент. (дополнение: этот способ отобразит вам код того элемента, на котором вы щёлкнули правой кнопкой.)

Inspector: DOM обозреватель и CSS редактор

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

Если вы не видите Inspector,

• Нажмите на вкладку Inspector .
• В Internet Explorer, нажмите на DOM Обозреватель, или нажмите Ctrl + 1.
• В Safari, элементы управления представлены не так чётко, но вы должны увидеть HTML код, если вы не выбрали что-то другое в окне разработки. Нажмите на кнопку Стиль, чтобы увидеть CSS.

Обзор DOM inspector

Для начала, попробуйте нажать правой кнопкой мыши (Ctrl+клик) по элементу HTML в DOM inspector и посмотрите на контекстное меню. Пункты меню могут различаться в разных браузерах, но важными из них являются одни и те же:

• Удалить узел (иногда Удалить элемент). Удаляет текущий элемент.
• Править как HTML (иногда Добавить атрибут/Править текст). Позволяет редактировать HTML и видеть результат «вживую». Очень полезно для отладки и тестирования.
• :hover/:active/:focus. Заставляет элементы переключить своё состояние на то, к которому применён ваш стиль.
• Копировать/Копировать как HTML. Копирует текущий выделенный HTML.

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

Обзор CSS редактора

По умолчанию, CSS редактор отображает CSS-свойства применённые к текущему выбранному элементу:

Эти функции особенно удобны:

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

Вы должно быть уже заметили другие вкладки в CSS редакторе:

• Вычислено: Здесь указаны все вычисления свойств выделенного элемента (окончательные, нормализованные значения применённые браузером).
• Блоковая модель: Отображает блочную модель выделенного элемента, здесь вы можете увидеть внешние и внутренние отступы, а также границы применённые к элементу, здесь также указан их размер.
• Анимации: В Firefox, на вкладке Анимации вы можете увидеть анимации применённые к выделенному элементу.

Узнать больше

Узнать больше об Inspector в различных браузерах:

• Firefox Page inspector
• IE DOM Explorer
• Chrome DOM inspector (Inspector в Opera схож с Inspector в Chrome)
• Safari DOM inspector and style explorer

Консоль JavaScript

Консоль JavaScript невероятно полезный инструмент для отладки JavaScript, если он не работает, как ожидалось. Она позволяет вам загружать JavaScript вопреки порядку загрузки скрипта в браузере, и докладывает об ошибках как только браузер пытается выполнить ваш код. Для доступа к консоли из любого браузера просто нажмите на кнопку Console. (В Internet Explorer, нажмите Ctrl + 2.) Откроется окно, как показано ниже:

Чтобы понять, что происходит, попробуйте ввести фрагменты кода в консоль один за другим (и затем нажмите Enter):

alert("hello!"); 

.querySelector("html").style.backgroundColor = "purple"; 

var myImage = document.createElement("img"); myImage.setAttribute( "src", "https://farm4.staticflickr.com/3455/3372925208_e1f2aae4e3_b.jpg", ); document.querySelector("h1").appendChild(myImage); 

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

alert('hello!); 

.cheeseSelector("html").style.backgroundColor = "purple"; 

var myImage = document.createElement("img"); myBanana.setAttribute( "src", "https://farm4.staticflickr.com/3455/3372925208_e1f2aae4e3_b.jpg", ); document.querySelector("h1").appendChild(myImage); 

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

Узнать больше

Узнать больше о JavaScript консоли в различных браузерах:

• Firefox Web Console
• IE JavaScript console
• Chrome JavaScript Console (Inpector в Opera схож с Inspector в Chrome)
• Safari Console

Found a content problem with this page?

• Edit the page on GitHub.
• Report the content issue.
• View the source on GitHub.

This page was last modified on 3 авг. 2023 г. by MDN contributors.

Your blueprint for a better internet.

Консоль разработчика Google Chrome

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

Google Chrome DevTools – как это работает и кому это необходимо?

Мы знаем их, как инструменты для разработчиков сайтов.

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

Так же есть экспериментальная версия браузера Chrome Canary которая обновляется ежедневно.

Пользовательская версия браузера и Canary могут работать вместе, так как Canary не всегда стабилен.

В данной статье мы приведем некоторые сочетания клавиш, а с полным их списком вы можете ознакомиться на веб-сайте Google Developer перейдя по ссылке:

Chrome DevTools — как открыть?

Есть три основных способа открыть DevTools в браузере. Используйте тот метод, который вам нравится, ниже подробнее о них:

1. Из меню браузера.

Нажать на кнопку с тремя точками, перейти в Дополнительные инструменты -> Инструменты разработчика

2. Открыть с помощью мышки

Быстрый и простой способ перейти в DevTools вызвав контекстное меню в браузере.
Правой кнопкой мыши щёлкните на элементе сайта и затем выберете «Просмотреть код».

3. Открыть сочетанием клавиш

Вы можете открыть консоль разработчика следующими сочетаниями:

• Mac: Cmd + Opt + I
• Windows: F12 или Ctrl + Shift + I

Рассмотрим 9 основных вкладок в консоли разработчика

Elements — элементы страницы

В данной вкладке вы можете увидеть структуру страницы, на которой вы находитесь в данный момент (справа).

• При нажатии на элемент, в нижней части можно увидеть полный путь к нему.
• С правой стороны панель стилей. В ней можно редактировать активный стиль элемента, из правой части.
• В данной вкладке можно редактировать содержимое страницы, перемещать HTML блоки, создавать новые элементы. Используется для отладки и редактирования страницы непосредственно в браузере.

Console — консоль

• Данный инструмент используется для отладки кода Javascript, проверки скриптов, просмотр логов, которые можно выводить с помощью команды console.log, а также вывод различных ошибок кода и загрузки элементов.
• Некоторые расширения браузера Chrome также могут выводить некоторую информацию и ошибки, например посмотреть как Adblock блокирует рекламу на странице.

Sources — ресурсы, файлы

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

Network — сеть

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

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

Perfomance — скорость работы

• Используется для оценки нагрузки и скорости загрузки по каждому элементу.
• Демонстрирует, как они в целом влияют на скорость работы сайта.

Memory — количество используемой памяти

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

Application — приложение

Используется для просмотра и отладки веб приложений.

Security — безопасность

Просмотр насколько безопасен ваш сайт, в основном используется для отладки HTTPS на сайте.

Lighthouse — оценка скорости работы сайта

Это по сути «Google Page Speed» внутри браузера, избавляет вас от перехода на страницу данного инструмента для теста там.

• С правой стороны есть настройки, что именно вам хочется проверить, а так же на каком типе устройства требуется сделать проверку.
• Результат можно будет сгенерировать кнопкой «Generate report» и через некоторое время будет результат.
• Для того чтобы очистить и проверить снова — есть кнопка новой проверки.

Советы и приемы

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

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

Быстрое переключение файлов

Быстро получить доступ к файлам сайта — можно используя комбинацию Ctrl + P (Mac: Cmd + P), и выполнить поиск по названию.

Улучшение читаемости кода

Немногие знают, что в DevTools есть возможность автоматически разворачивать код, так он проще читается.

• Проверить данный функционал можно, нажав на <> во вкладке Sources.
• Очень полезная функция, когда код минифинцирован.

Изменение HTML элементов

Во вкладке «Elements» удобно редактировать элементы в браузере, сразу видны изменения на сайте.

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

Изменение свойств CSS

Свойства стилей можно изменять в той же вкладке. Удобный и легкий способ изменения внешнего вида сайта мгновенно.

• Выберите HTML элемент, стиль которого вам нужно поправить, а слева, в панели стилей, изменяйте или добавляйте любое свойство CSS.
• Можно так же изменить внешность только одного элемента, и можно добавить дополнительный класс.

Поиск кода

Быстро найти код поможет команда Ctrl + Shift + F (Mac: Cmd + Opt + F).

Точки остановки работы кода Javascript (брейкпоинты)

При отладке кода Javascript полезно указывать брейкпоинты.

• Во вкладке Sources нажмите на строчку кода, где нужна остановка скрипта, и выполните комбинацию Ctrl + R (Mac: Cmd + R) для перезагрузки страницы.
• Работа скрипов сайта остановится на выбранном вам месте. Кнопка F8 отвечает за паузу и продолжение выполнения скриптов.

Переход к нужной вам строке

Переход выполняется с помощью команды Ctrl + O (Mac: Cmd + O).

Мы вывели для примера строку 256 и столбец 15.

Несколько курсоров

К примеру — у вас несколько строк или частей кода, и вам нужно что-то добавить.

Вы можете ввести команду Ctrl + Click (Mac: Cmd + Click), и у вас будет возможность вводить информацию в несколько строк одновременно.

Положение консоли

1. Вы можете изменить положение Chrome DevTools в браузере и даже отстыковать его от окна, чтобы использовать например на втором мониторе. Или просто закрепить в определенном положении в окне.
2. Изменить можно сочетанием клавиш Ctrl + Shift + D (Mac: Cmd + Shift + D) или через меню внутри консоли разработчика.

Очистить кеш и куки

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

• Очистить куки можно во вкладке Application — слева меню Storage — Cookies.
• Нажимая на эти файлы правой кнопкой, можно очистить их.
• Чтобы отключить кеширование, нажмите на Настройки (шестерня) и найдите в таблице Network пункт- «Disable cache». Теперь когда вы находитесь в консоли разработчика, кеш сайта не будет сохраняться.

Режим медиа устройства

Проверить свой вебсайт на адаптивность можно в специальном режиме устройства.

• В данном режиме можно проверить совместимость вашего сайта с популярными форматами гаджетов и место разрыва страницы, чтобы применить там media query.
• В режиме просмотра на устройстве, можно нажать на значок планшета в DevTools или зажать Ctrl + Shift + M (Mac: Cmd + Shift + M).
• Вы можете выбрать мобильное устройство из списка доступных, или задать разрешение самостоятельно. Во втором случае нужно кликнуть — Responsive.
• Также можно изменить положение устройства.

Цветовая палитра и её подбор

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

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

Изменение цветового формата

Для переключения между цветовыми моделями RGBA, HSL, HEX можно используя комбинацию клавиш Shift + Click на цветовом блоке.

Переключить состояние элемента

• Еще один полезный инструмент называется – «Toggle Element State», служит для просмотров скрытых стилей. Стили активируются, при наведении мышкой на элемент или нажатие на него.
• Инструмент позволяет вам изменять состояние элемента, например «hover», чтобы вы могли посмотреть, как он будет выглядеть на сайте, не перемещая каждый раз на него мышку.

История сетевой загрузки

Данная функция покажет, загрузку страницы с первой секунды до окончания.

• Она захватывает во время загрузки снимки экрана. Можно увидеть, как отображается шрифт и есть ли проблемы с загрузкой шрифтов.https://www.keycdn.com/blog/web-font-performance
• В панели «Network» можно также сделать настройку, нажав на значок и отметив Capture screenshots. Теперь перезагрузите страницу комбинацией Ctrl + R (Mac: Cmd + R).

Производительность

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

Для запуска нажмите Ctrl + E (Mac: Cmd + E) и обновите страницу Ctrl + R (Mac: Cmd + R).

Остановить можно нажав на Finish.

Регулирование сети

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

• Если у посетителя вашего сайта — медленный интернет, ему поможет данный инструмент.
• В панели «Network» нажмите «Online» (установка по умолчанию) и выбирайте значение или уже из готовых, или создайте свой профиль кнопкой «Add».
• Можно установить скорость загрузки, отдачи и задержку (например, чтобы проверить скорость в других странах).

Безопасность

• В данной панели можно проверить, действителен ли ваш сертификат, является ли соединение — безопасным.
• Отлично подходит для миграции на HTTPS и исправлении Mixed content.

Заключение

Надеюсь, вы заметили, как много полезных функций имеет DevTools в браузере Chrome.

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

Если мы не рассказали, о какой – то из функций, напишите нам об этом в комментариях.

Мы подготовим обзор необходимых функций для Вас по интересующим темам.

Chrome DevTools

Chrome DevTools — это набор инструментов, встроенных в браузер Google Chrome, для создания и отладки сайтов. С их помощью можно просматривать исходный код сайта, отлаживать работу frontend: HTML, CSS и JavaScript. Также DevTools позволяет проверять сетевой трафик, быстродействие сайта и многое другое.

Освойте профессию «Frontend-разработчик»

Как начать работу с DevTools

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

1. Сочетанием горячих клавиш: для Windows и Linux Ctrl + Shift + I, для macOS cmd + Shift + I.
2. В контекстном меню: на странице в любом месте кликнуть правой кнопкой мыши и выбрать «Просмотреть код». Главное — не путать с «Просмотр кода страницы», эта опция покажет исходный код вне DevTools.
3. Через меню браузера: в правом верхнем углу нажать на три точки, в меню выбрать раздел «Дополнительные инструменты» и далее «Инструменты разработчика».

Профессия / 9 месяцев
Frontend-разработчик

Создавайте интерфейсы сервисов, которыми пользуются все

Какие вкладки есть в DevTools

Elements. Здесь отображается весь HTML- и CSS-код открытой страницы. На данной вкладке можно просмотреть и внести исправления в файлы CSS и JavaScript, изменить элементы DOM (программного интерфейса (API) для HTML- и XML-документов). Отредактировать HTML-элементы на странице, открытой в браузере, можно, кликнув по нужному элементу правой кнопкой мыши и выбрав пункт Edit as HTML. Изменения можно наблюдать в режиме реального времени. Манипуляции отображаются только в браузере и не видны другим пользователям. Для того чтобы применить исправленное, необходимо поработать с соответствующими файлами на веб-сервере.

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

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

Network. На вкладке отображаются сетевые запросы, который делает сайт. Как правило, ее используют при оптимизации скорости загрузки страницы, а также для мониторинга выполняемых запросов. Запросы к данным представлены в виде таблицы. Сверху расположены инструменты: очистка таблицы, включение и отключение записи запросов и другие. Под таблицей можно увидеть количество запросов, общее время загрузки всех данных, время загрузки DOM и ресурсов, участвующих в отображении текущей страницы.

Performances. Вкладка отображает нагрузку, которую создает сайт на компьютер пользователя. Здесь можно увидеть показатели FPS, загрузки CPU и сетевые запросы, необходимые данные и инструменты для повышения производительности страницы. На панели есть таймлайн использования сети, выполнения JavaScript и загрузки памяти. После первого построения таймлайнов можно найти данные о всем жизненном цикле страницы и выполнении кода.

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

Читайте также Кто такой frontend-разработчик?

Memory. Здесь расположено несколько инструментов, которые помогают отслеживать, какую нагрузку на систему оказывает выполнение кода:

• Heap Snapshot. С помощью него можно посмотреть, как распределяется память между объектами JavaScript и связанными с ними элементами DOM.
• Allocation instrumentation on timeline. Этот инструмент используется для устранения утечек памяти. Он показывает, как распределяется память между переменными в коде.
• Allocation sampling. Профайлер записывает, как распределяется память на отдельные функции JavaScript.

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

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

Станьте Frontend-разработчиком
и создавайте интерфейсы сервисов, которыми пользуются все

Lighthouse. На этой вкладке можно проверить производительность сайта.

• Performance. Позволяет узнать скорость загрузки сайта. Итоговый показатель зависит от времени загрузки интерактивных элементов, шрифтов и прочего контента, а также от времени блокировки и отрисовки стилей.
• Progressive Web App. Позволяет проверить, регистрирует ли сайт Service Workers, возможна ли работа сайта офлайн, а также возвращает ошибку 200.
• Best Practices. Помогает проверить безопасность сайта и узнать, применяются ли современные стандарты веб-разработки. На показатель влияет использование устаревших API, HTTPS, корректность кодировки и многое другое.
• Accessibility. Позволяет узнать, насколько удобен сайт, как воспринимается контент и можно ли управлять интерфейсом и передвигаться по сайту без мыши.
• SEO. Позволяет понять, насколько соблюдаются рекомендации Google по оптимизации сайта. На показатель влияют использование метатегов, наличие alt у изображений, адаптивная верстка и пр.

Каждый из показателей оценивается по шкале 100 баллов. Также для удобства оценка имеет цвет: зеленый — от 90 до 100 баллов, оранжевый — от 50 до 89 баллов, красный — ниже 49 баллов.

Основные инструменты и как их использовать

Поиск нужного DOM-элемента. На панели Elements находится полное DOM-дерево, которое можно просмотреть и изменить. Найти конкретный элемент можно двумя способами.

1. Выбор элемента на странице

Необходимо навести курсор, например на картинку на сайте, нажать правую кнопку мыши и выбрать «Просмотреть код». В DOM-дереве код выбранного элемента будет подсвечен.

2. Использование функции поиска HTML-компонента

Для этого надо кликнуть по кнопке со стрелкой в левом верхнем углу консоли, а затем — по необходимому элементу на странице.

Редактирование HTML. В консоли отображаются абсолютно все элементы: div, section, footer и т. д. Чтобы, например, изменить текст, достаточно кликнуть по нему два раза. Такие же действия доступны для классов и типов данных. Чтобы редактировать конкретную часть кода, нужно кликнуть по имени класса или самому слову class. Помимо этого, можно редактировать сразу большой участок текста или, например, названия атрибутов. Необходимо просто кликнуть правой кнопкой мыши по необходимому элементу и выбрать нужную опцию.

Работа с CSS. Под редактором HTML располагается консоль работы со стилями. В Chrome DevTools можно отключать и включать любое свойство одним кликом по чекбоксу слева. Также именно Chrome DevTools имеет удобную палитру для выбора оттенка цвета и позволяет настраивать угол наклона градиента. Здесь представлена визуализация отступов элемента, поэтому можно с легкостью настроить положение одного объекта относительно других. Это далеко не полный список всех удобных функций.

Поиск и исправление «мертвого» кода. Иногда в файлах CSS и JavaScript содержится много кода, который присутствует, но нигде не используется. Его наличие напрямую влияет на производительность сайта. В Chrome DevTools для этого предусмотрен инструмент Coverage. На панели со всеми основными вкладками (Elements, Console и т.д.) с правой стороны есть три точки. Необходимо кликнуть по ним и выбрать More Tools, где расположен Coverage. Внизу появится новая вкладка, где представлены данные о неиспользуемых CSS и JavaScript в процентном выражении. Если кликнуть по одному из них, можно увидеть все строки кода с цветовым обозначением: красные — используемые, синие — неиспользуемые. Чтобы повысить производительность сайта, нужно убрать неиспользуемый код.

Структурирование кода. Код, в котором отсутствуют «мертвые» элементы, улучшает производительность сайта, но сложен для восприятия (иногда бывают удалены даже пробелы и переносы строк). Chrome DevTools позволяет его структурировать. На вкладке Elements необходимо выбрать любой минифицированный ресурс (CSS, JS или HTML), после чего в новой вкладке отобразится содержимое, а снизу появится иконка с изображением фигурных скобок. Нажав на них, Chrome DevTools структурирует код, который подходит для внесения каких-либо изменений.

Просмотр внешнего вида сайта на разных устройствах. В режиме разработчика Google Chrome можно посмотреть, как выглядит текущая страница практически на любом устройстве. Сделать это можно комбинацией клавиш Ctrl + Shift + M для Windows и Linux и cmd + Shift + M для macOS. Также можно кликнуть на значок телефона в левом верхнем углу консоли. Теперь можно выбрать абсолютно любое разрешение или конкретное устройство из списка Dimensions. Также инструмент позволяет посмотреть, как будет отображаться страница при разной скорости интернета.

Это далеко не полный список всех возможностей и полезных функций Google Chrome Developer Tools. Но чтобы разобраться в них, необходимо рассматривать каждый инструмент подробно и в отдельности, соблюдая логическую структуру. Узнать подробнее вы можете на портале Chrome Developers в разделе документации DevTools.

Frontend-разработчик

Научитесь создавать удобные и эффектные сайты, сервисы и приложения, которые нужны всем. Сегодня профессия на пике актуальности: в России 9000+ вакансий, где требуется знание JavaScript.

Как вызвать консоль?

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

Internet Explorer

1. Откройте нужную страницу в браузере Internet Explorer.
2. Нажмите F12.
3. Нажмите в правом углу. Откроется консоль.

Mozilla Firefox

1. Откройте нужную страницу в браузере Mozilla Firefox.
2. Нажмите Ctrl+Shift+K или перейдите → «Разработка» → «Веб-консоль».
3. Убедитесь, что у вас выделены светло-голубым все параметры, о которых отображаются ошибки.

Opera

1. Откройте нужную страницу в браузере Opera.
2. Нажмите Ctrl+Shift+J. Красным отмечены ошибки.

Google Chrome

1. Откройте нужную страницу в браузере Google Chrome.
2. Нажмите → «Дополнительные инструменты» → «Инструменты разработчика».
3. Перейдите во вкладку «Console».

Microsoft Edge

1. Откройте нужную страницу в браузере Microsoft Edge.
2. Справа сверху нажмите и перейдите в «Режим разработчика». Либо нажмите F12.
3. Перейдите во вкладку «Консоль».

Safari

1. Откройте нужную страницу в браузере Safari.
2. В строке меню нажмите «Safari».
3. Перейдите «Настройки» → «Дополнения».
4. Внизу окна установите галочку «Показывать меню „Разработка“ в строке меню».
5. В строке меню нажмите «Разработка» и выберите «Показать веб-инспектор».

Яндекс.Браузер

1. Откройте нужную страницу в Яндекс.Браузере.
2. Нажмите в правом верхнем углу.
3. Перейдите «Дополнительно» → «Дополнительные инструменты» → «Инструменты разработчика».
4. Перейдите во вкладку «Console».