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