Другое

DevTools: определение, виды инструментов и их применение

Lorem ipsum dolor

DevTools — это инструменты разработчика, происходит от «development tools». По сути, это программный инструментарий, который помогает создавать, тестировать, проверять на ошибки разрабатываемые программы.

Матерые разработчики уже давно используют свой собственный набор DevTools. А вот молодым программистам будет полезно дочитать эту статью до конца, чтобы понять, что за инструментами далеко ходить не надо. У каждого пользователя сети они всегда под рукой. Речь идет о каждом современном браузере:

  • Google Chrome;

  • Firefox;

  • Safari;

  • Microsoft Edge;

  • Opera;

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

  • и др.

Внутри каждого браузера встроены DevTools, которые позволяют просмотреть исходный код сайта, а также анализировать и просматривать HTML, CSS, JavaScript. Дополнительно ничего устанавливать не надо. Однако мало кто понимает, что браузер — это не только обозреватель интернета.

DevTools в браузерах — что это?

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

  • изображения,

  • видео,

  • текстовые блоки,

  • скачиваемые файлы,

  • формы,

  • ссылки на другие ресурсы,

  • и др.

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

Инструменты разработчика в Google Chrome и других браузерах

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

Чтобы открыть DevTools в Google Chrome, нужно:

  • открыть браузер на странице, которую нужно исследовать;

  • в правом верхнем углу окна браузера нужно кликнуть на иконку «три точки»;

  • открыть пункт «Дополнительный инструмент»;

  • открыть в нем пункт «Инструменты разработчика».

Либо можно быстро вызвать DevTools, если нажать «Ctrl+Shift+I».

Панель Elements

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

Эта панель содержит 2 важные кнопки:

  • кнопка выбора элемента на странице при помощи курсора;

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

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

Один важный момент: все изменения сохраняются не в документе, а лишь в браузере. Поэтому, если изменения вас устраивают, их нужно будет перенести в документ сайта. То есть в этой вкладке можно делать только Live-редактирование.

Панель Console

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

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

Панель Sources

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

В общем, кто хоть раз работал в какой-либо профессиональной IDE, разберется с этой панелью очень быстро.

Панель Network

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

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

Панель Performance

На данной вкладке отображаются показания времени:

  • выполнения JavaScript-скриптов;

  • использования сети;

  • загрузки памяти;

  • и др.

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

Панель Memory

Эта панель содержит в себе несколько важных инструментов:

  • JavaScript CPU Profiler — дает возможность понять количество процессорного времени, которое тратит выполнение JS-кода на странице;

  • Record Allocation Timeline — инструмент для обнаружения утечек памяти, так как ведет запись распределения памяти между переменными в коде;

  • Record Allocation Profile — ведет запись распределения памяти между отдельными JS-функциями.

Панель Application

Эта вкладка нужна для того, чтобы быстро очистить все загружаемые ресурсы:

  • кэш,

  • куки,

  • базы данных,

  • шрифты,

  • изображения,

  • и др.

Панель Security

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

Заключение

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

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

Схожие статьи

Firefox Monitor: что это за программа и почему ее стоит скачать?
Другое

Firefox Monitor: что это за программа и почему ее стоит скачать?

Свойство CSS-flex: определение, шпаргалка, назначение и свойства
Другое

Свойство CSS-flex: определение, шпаргалка, назначение и свойства

Создание анимированных диаграмм: необходимые программы и инструменты
Другое

Создание анимированных диаграмм: необходимые программы и инструменты

Основные направления развития ИТ и как успеть ворваться в эту сферу
Другое

Основные направления развития ИТ и как успеть ворваться в эту сферу