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

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

Каждый современный интернет-браузер оснащён мощными инструментами для веб-разработчика. Эти инструменты позволяют делать различные вещи, от изучения загруженных в настоящий момент 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.

Введение в Chrome DevTools. Панель Elements

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

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

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

Настройки DevTools

Тема интерфейса

Можно настроить инструменты разработчика и изменить их внешний вид — например, выбрать тёмное оформление интерфейса.

Горячие клавиши

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

Расположение панелей

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

Вкладка Elements

С её помощью можно отслеживать элементы и их свойства на странице, можно редактировать стили и проверять вёрстку на переполнение. Как это делать? Давайте разбираться.

Как получить информацию об элементе

Есть три способа получить информацию о любом элементе на странице — выбирайте самый удобный для себя.

Через инспектор. Способ удобен, если вы точно видите элемент и можете кликнуть по нему правой кнопкой мыши. Выберите Inspect или «Посмотреть код». Заодно сразу откроется панель разработчика.

Поиск по элементам. При показанном отладчике нажимаем Ctrl+F, и внизу появится окно поиска по тегу, атрибуту, классу или текстовому содержимому элемента.

Введём, например, класс header , и увидим все подходящие элементы:

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

Как внести изменения в элемент на странице

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

Чтобы переместиться вперёд, нажмите Tab, назад — Shift+Tab, а чтобы скрыть элемент, нажмите H.

Как изменить разметку страницы

Любители мыши кликают правой кнопкой на элемент и выбирают Edit as HTML, а фанаты клавиатуры нажимают F2. Результат сразу отображается на экране.

Проверка вёрстки на переполнение

Мы верстали, редактировали, а как проверить, что вёрстка не развалится, если количество элементов изменится? Сделаем тесты на переполнение.

Проверка на переполнение текстом. Есть два способа:

1. Находим элемент, делаем двойной клик и добавляем текст. Проще всего скопировать содержимое и вставить его несколько раз.
2. Открываем вкладку Console, вставляем команду document.body.contentEditable = true , нажимаем Enter. Теперь можно редактировать любой текстовый элемент на странице напрямую. Естественно, исправленный текст останется до перезагрузки страницы и никак не повлияет на сайт.

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

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

Сетка при переполнении не должна ломаться, а логика потока должна сохраняться.

Просмотр и тестовое редактирование стилей

Информация о стилях находится на вкладке Styles. Справа выводятся стили, указанные разработчиком, а справа от каждого стиля — файл и строка, где они прописаны.

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

Блок с метриками (на скриншоте) на самом деле находится в самом низу — нужно проскроллить список до конца.

Меняем стили прямо в браузере

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

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

А ещё мы можем разворачивать сокращённое правило, кликнув на стрелку. Например, так можно развернуть правило для border-style .

Слева у всех элементов есть чекбокс для включения и выключения стилей.

Данные о цвете

У элементов со свойством color легко меняется цвет — для этого нужно воспользоваться пипеткой. Можно выбрать любой цвет из интерфейса или указать цвет в RGBA или HSL.

«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.

Как открыть консоль разработчика в самых популярных браузерах?

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

Как это сделать в конкретном браузере мы расскажем в нашей статье.

Google Chrome:

Инструменты разработчика можно открыть нажав клавиши Сtrl+Shift+J

Другой способ: нажмите Сtrl+Shift+I или клавишу F12.

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

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

Например в Гугл Хром нужно зайти в верхнюю боковую панель «Настройка и управление Google Chrome». В выпадающем меню кликните на строку «Дополнительные инструменты», затем выберите «Инструменты разработчика».

Нажмите Ctrl+Alt+I. Откроется «веб-инспектор». Если вы используете в своей работе Гугл Хром и Сафари, работа с консолью разработчика может показаться вам похожей. Так как функционал обеих платформ нередко пересекается между собой.

Если вы пользуетесь Сафари и у вас возникла проблема с доступом к консоли при помощи клавиатуры, то перейдите в раздел настроек браузера и кликните на «Дополнения». Поставьте галочку в разделе: «Показывать меню “Разработка” в строке меню». Откройте вкладку «Разработка» в строке меню в верхней части браузера. В выпадающем меню выберите строку «Показать веб-инспектор». Готово!

Internet Explorer:

Если у вас браузер Internet Explorer, тогда нажмите клавишу F12 и перейдите на вкладку консоли.

В консоль Windows Internet Explorer можно зайти и по-другому. Нажмите в командной строке на кнопку «Сервис». Затем в выпадающем окне выберите «Средства разработчика». Откроется консоль разработчика.

Mozilla Firefox:

Нажмите сочетание клавиш Сtrl+Shift+K, чтобы открыть веб-консоль или Command+Shift+K на компьютерах с Mac OS. Если у вас установлено расширение Firebug, что рекомендуется разработчиками, тогда нажмите всего лишь одну клавишу F12 и перейдите на вкладку консоли.

В консоль разработчика Mozilla Firefox можно попасть, нажав на вкладку «Открыть меню», в правом верхнем углу браузера. В выпадающем меню выберите «Веб-разработка», затем «Веб-консоль». Можно работать.

Нажмите CTRL + SHIFT + I, чтобы открыть Dragonfly, затем перейдите на вкладку «консоль»

Альтернатива есть. В браузере Opera консоль разработчика открывается в несколько этапов. В левом верхнем углу есть кнопка «Настройка и управление Opera». Она оформлена в виде логотипа браузера (красная буква “О”). В выпадающем списке выбираем строку «Разработка». Она переведет нас в консоль («Инструменты разработчика»)

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

Важно: пожалуйста, убедитесь, что все действия вы выполняете на странице, где обнаружили проблему, связанную с плагином Clearfy или другими плагинами Webcraftic

Консоль разработчика 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.

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

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

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