Google Chrome позволяет разработчикам тестировать новые функции с помощью инструментов DevTools. 14 Это набор встроенных в браузер утилит для анализа и модификации содержимого сайтов прямо в браузере. 3

Некоторые возможности DevTools:

• Элементы (Elements). 2 Позволяет просматривать и редактировать элементы DOM-дерева страницы. 2 При наведении курсора на строчку кода браузер подсвечивает элемент страницы, за который она отвечает. 2 Это удобно: можно в реальном времени менять параметры объектов и сразу наблюдать за изменениями. 2
• Sources. 2 Встроенная среда разработки, которая позволяет смотреть и редактировать файлы, из которых состоит веб-страница. 2 Ещё здесь есть инструменты для отладки JavaScript с помощью брейк-пойнтов — специальных точек остановки в коде. 2
• Console. 2 Превращает браузер в интерпретатор JS-кода, благодаря чему можно запустить на любой странице абсолютно любой скрипт. 2 Консоль нужна для диагностики: здесь можно посмотреть ошибки, возникшие при открытии страницы, узнать их расположение в коде и выгрузить логи в отдельный файл. 2
• Network. 2 Выводит в виде таблицы все запросы, которыми обмениваются браузер и сервер. 2 Запросы можно фильтровать по типу, статусу и другим параметрам. 2 Основной смысл в том, чтобы изучить, сколько времени уходит на загрузку каждого ресурса, выявить самые прожорливые процессы и оптимизировать их. 2
• Security. 2 На этой вкладке можно выяснить, насколько безопасна страница и какие протоколы шифрования она использует. 2

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