Что показывает панель elements в браузере google chrome

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

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

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

Панель Elements

Используется для выбора и редактирования любых HTML элементов на странице. Позволяет свободно манипулировать DOM и CSS.

Вкладка содержит две кнопки: Выбор элемента с помощью курсора и Переключение в режим выбора устройств, она пригодится при разработке адаптивных интерфейсов, мобильных версий сайтов или для тестирования страниц с разным разрешением монитора. При выборе любого DOM элемента на вкладке Styles будет отображаться все CSS правила применяемые к нему, в том числе и неактивные. Все правила разбиты на блоки и упорядочены по убыванию специфичности селектора. Можно на лету менять значения, деактивировать и дописывать новые правила и смотреть как это влияет на отображение. Также для выбранного элемента DOM доступно еще несколько вкладок: Event Listeners — содержит все события относящиеся к данному элементу, DOM Breakpoints — точки останова для элемента и Properties — список всех свойств для элемента. Также могут быть дополнительные вкладки добавляемые расширениями для Chrome.

Ключевые возможности:

• Просмотр и редактирование в лайв режиме любого элемента DOM.
• Просмотр и изменение CSS правил применяемых к любому выбранному элементу в панели Styles.
• Просмотр всего списка событий и свойств для элемента на соответствующих вкладках.

Панель Console

Необходима для логирования диагностической информации в процессе разработки или взаимодействие с JavaScript на странице. Также все ошибки в JavaScript коде, будут выводится здесь с указанием файла и конкретного места в нем где произошла ошибка. Так же в консоль можно выводить XHR запросы. Есть возможность сохранять логи в отдельный файл.
Консоль содержит ряд инструментов и настроек для фильтрации выводимых сообщений, очистки консоли и запрета очистки логов при перезагрузке страницы — Preserve log.

Также консоль может отобразить/скрыть в виде отдельной вкладки находясь на любой другой вкладке и не покидая ее нажав клавишу Esc.

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

Ключевые возможности:

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

Панель Sources

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

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

Ключевые возможности:

• Отладка Вашего кода с помощью брейкпоинтов.
• Использование браузера в качестве IDE с помощью Workspaces.
• Запуск сниппетов с любой страницы.

Панель Network

Позволяет мониторить процесс загрузки страницы и всех файлов которые подгружаются при загрузке. Ее удобно использовать для оптимизация загрузки страниц и мониторинг запросов.
На панели отображается таблица всех запросов к данным и файлам, над ней располагаются кнопки для фильтрации нужных Вам запросов, очистки таблицы или включения/отключения записи запросов, кнопки управления отображением таблицы. Также есть дополнительные переключатели: Preserve log — не очищать таблицу при перезагрузке страницы, Disable cache — отключить кэш браузера (будет работать только при открытом Dev Tools), Offline — эмулирует отсутствие интернета, также соседний переключатель позволяющий эмулировать скорость скачивания/загрузки данных и ping для различных типов сетей.

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

Ключевые возможности:

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

Панель Performance

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

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

Ключевые возможности:

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

Панель Memory и JavaScript Profiler

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

JavaScript CPU Profiler (был вынесен в отдельную панель JavaScript Profiler ) — позволяет узнать сколько процессорного времени занимает выполнение различных частей вашего JS кода.
Take Heap Snapshot — показывает распределение памяти среди JS объектов и связанные с ним элементы DOM.

Record Allocation Timeline — записывает и отображает распределение памяти между переменными в коде. Эффективен для устранения утечек памяти.

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

Ключевые возможности:

Панель Application

Вкладка для инспектирования и очистки всех загруженных ресурсов, включая IndexedDB или Web SQL базы данных, local и session storage, куков, кэша приложения, изображений, шрифтов и таблиц стилей.

Ключевые возможности:

• Быстрая очистка хранилищ и кэша.
• Инспектирование и управление хранилищами, базами данных и кэшем.
• Инспектирование и удаление файлов cookie.

Панель Security

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

Инструмент используется для отладки проблем смешанного контента, проблем сертификатов и прочее.

Ключевые возможности:

• Окно Security Overview быстро подскажет безопасна ли текущая страница или нет.
• Возможность просмотреть отдельные источники, чтобы просмотреть соединение и детали сертификата (для безопасных источников) или узнать, какие запросы не защищены (для небезопасных источников).

Панель Audits

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

Анализируются такие параметры как: кэширование ресурсов, gzip сжатие, наличие неиспользуемых частей JS кода и CSS правил и много других параметров. Далее пользователю выводится сгруппированных список рекомендаций за счет выполнения которых можно существенно оптимизировать скорость загрузки и отзывчивости страницы.

Главные лайфхаки в консоли разработчика в браузере: так вы улучшите сайт и достигнете своих KPI

Егор Вяхирев Редакция «Текстерры»

Консоль разработчика позволяет увидеть внутреннюю структуру любого интернет-ресурса, отследить происходящие на нем события и протестировать правки в реальном времени. Инструмент крайне полезный – отпугнуть может только достаточно навороченный интерфейс, к тому же на английском. Исправляем это!

Разберем основные возможности консоли разработчика, которыми может воспользоваться маркетолог, и научимся ими пользоваться.

Первый взгляд и инструментарий консоли

Прямое предназначение Development Console – это интерактивная работа с содержанием сайта прямо в браузере. У такого взаимодействия несколько очевидных плюсов:

• Вы видите сайт «как есть» и работаете с последней рабочей версией, доступной пользователям.
• Можно производить редактирование и сразу же наблюдать произведенные изменения в браузере.
• Корректировки не требуют дополнительного инструментария: отработайте процесс в браузере из любого удобного места, а изменения на сервер отправляйте уже с рабочей станции.

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

Маркетологи видят сайт прежде всего как канал продаж. А чтобы он продавал лучше, требуется решать вопросы юзабилити, удобства, скорости взаимодействия, приятного дизайна – к продающим качествам можно отнести очень много параметров. Чтобы оптимизировать содержание ресурса, требуется оценить его и правильно поставить задачу разработчику. Вот здесь-то и пригодится консоль разработчика.

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

Мы будем рассматривать консоль в браузере Google Chrome, но в других она отличается несильно. Из меню видно, что также вы сможете осуществить запуск через сочетание клавиш Ctrl + Shift + C. Еще один вариант – нажать f12. По умолчанию интерфейс открывается в правой части окна:

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

Для чего же может потребоваться изучение элемента сайта? Чаще всего – для настройки событий, передаваемых в аналитические сервисы («Метрику», Google Analytics). Сайт, как мы знаем, состоит из элементов и имеет древовидную структуру, благодаря которой каждый подэлемент занимает свое место и показывается пользователю в строго установленном порядке. Существуют контейнеры, абзацы текста, ссылки, изображения, кнопки, списки, видео… Интерес к тому или иному блоку напрямую влияет на продающие качества сайта, соответственно, работа с каждым из них будет означать потенциальное улучшение воронки продаж.

В случае выше мы выбрали для изучения кнопку «Подробнее». Консоль при этом поделилась по умолчанию на три части: инспектор Elements («Элементы»), панель Styles («Стили») и собственно Console.

В инспекторе автоматически был выделен элемент в коде сайта. Как оказалось, кнопка представляет собой ссылку с HTML-тегом <a>, для которой был задан стиль CSS, формирующий внешний вид кнопки – высоту, ширину, жирность текста, красный фон и т.п. Чтобы работать с элементами, необходимы базовые знания HTML и CSS.

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

Поскольку у ссылки есть параметр HREF, указывающий напрямую адрес страницы, то консоль уже сослужила нам хорошую службу – мы можем поставить на отслеживание в аналитике клики на соответствующий элемент <a> с таким адресом в href.

В блоке Console при этом мы видим ситуацию с событиями, происходящими при нашем взаимодействии с сайтом. В частности, можно заметить, что счетчик Google Analytics пытается считать наши данные, но блокируется встроенным в браузер Adblocker’ом.

Элементы консоли разработчика и их назначение

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

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

В открывшемся меню обратите внимание на значки в поле Dock side. С их помощью можно разместить консоль разработчика в левой, нижней или правой (как сейчас) части окна, и даже сделать ее отдельным окном поверх текущего.

Собственно, интерфейс состоит из основной панели (на скриншоте выше – блок Elements), панели свойств (на скриншоте – блок Styles) и консоли вывода Console. Первым делом рассмотрим элементы основной панели.

• Панель Elements

Здесь можно увидеть дерево элементов сайта. Если до запуска консоли мы не выбирали конкретный элемент, то сможем увидеть структуру сайта в «свернутом» виде:

Можно увидеть, что сайт состоит из классических <head>, <body> и скриптов. Информации здесь гораздо больше, чем вы можете увидеть при открытии кода страницы через CTRL + U. Дело в том, что движок сайта подгружает многие элементы автоматически, а открываемый код содержит лишь базовый HTML-документ.

Ориентироваться в содержании несложно: фиолетовым цветом подсвечиваются объявленные элементы, коричневым – их свойства и параметры, синим – содержание этих параметров, зеленым – комментарии разработчика. Ссылки обозначаются подчеркиванием.

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

• Панель Console

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

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

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

• Панель Sources

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

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

• Панель Network

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

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

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

• Панель Performance

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

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

• Панель Memory

Отображает распределение времени исполнения и памяти страницей (или приложением) на каждый внутренний ресурс. С помощью выстраиваемого консолью профиля вы можете оценить, какие части сайта больше нагружают систему. Создайте снэпшот («снимок» памяти) и изучите его содержимое для конкретной страницы сайта:

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

• Панель Application

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

• Панель Security

Здесь отображается информация о безопасности сайта, в частности – о безопасных соединениях по HTTPS. Если вы знаете, что такое сертификаты безопасности, то здесь сможете работать с ними и просматривать интересующую информацию.

• Панель Lighthouse

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

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

Ну а мы перейдем к элементам панели свойств и параметров.

• Вкладка Styles

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

На скриншоте показана нижняя часть панели Styles, поэтому содержание основного файла с классом для тега «Новости» мы не видим, зато видно, какие свойства приобретаются от родительских объектов, таких как body. Разноцветный прямоугольник дает представление о размерах объекта и его параметрах padding, border и margin (внутренние и внешние отступы и граница обводки).

• Вкладка Computed

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

• Вкладка Layout

Отображает имеющиеся на сайте элементы типа CSS Grid (представление в виде двухмерной сетки). Поскольку такие разметки используются нечасто, опустим подробное описание вкладки.

• Вкладка Event Listeners

Выдает все обработчики событий для выделенного элемента или страницы. К событиям можно отнести клики, визуальные изменения, работу курсора мыши, скроллинг, загрузку и т. п. «Слушать» события на элементе могут, например, счетчики аналитики или системы работы с тегами, такие как Google Tag Manager. Чтобы понять, будут ли работать настроенные вами теги, можно воспользоваться данной вкладкой и увидеть, есть ли нужный обработчик на выбранном элементе – кнопке, ссылке или другом интересующем вас объекте.

• Вкладка DOM Breakpoints

В основном нужна разработчику, поскольку позволяет установить на элемент точку остановки (breakpoint), которая останавливает срабатывание кода сайта. Например, вы сможете узнать, как будет выглядеть сайт после изменения определенного элемента, если вам кажется, что его работа вызывает общие проблемы работоспособности.

Точки устанавливаются на элемент в панели Elements, для этого надо нажать на выбранном правую кнопку мыши и выбрать «Break on».

• Вкладка Properties

Показывает все свойства выбранного элемента. Нас как маркетологов эти свойства в полной мере интересовать не будут.

• Вкладка Accessibility

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

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

Лайфхаки для интернет-маркетолога по использованию консоли разработчика

В этом разделе мы рассмотрим простые, но полезные способы применения консоли разработчика.

Видоизменение сайта «на лету»

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

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

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

Конечно же, можно менять и стили CSS:

Стили напрямую влияют на вид элементов на сайте, поэтому с их помощью можно оптимизировать юзабилити. Если какие-то объекты кажутся вам слишком мелкими, крупными или расположенными не там, где нужно, смело пробуйте другие варианты: может быть, они окажутся лучше и вы примените изменения для всего сайта. Вы также можете добавлять новые объекты в Elements, накладывая на них имеющиеся или собственные стили.

И не забывайте играть со шрифтами и изображениями:

Поиск элементов, шрифтов

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

В любой части консоли работает сочетание клавиш CTRL + F, позволяющее открыть строку поиска и найти через нее любое содержимое. Чтобы отредактировать внешний вид, потребуется найти файл CSS, он автоматически покажется вам в Styles после того как вы найдете нужное в Elements. А зайдя в Sources, вы сможете увидеть физический файл, в котором располагается нужный вам текст. Это удобно, когда движок сайта разбрасывает информацию по файлам, например, после применения нестандартной дизайн-схемы.

Хотите знать, какие шрифты использует сайт? Ищите по слову font:

Чаще всего нужный шрифт лежит в Styles, где вы можете выделить нужные части кода, введя «font» в поле Filter. Учтите, что на разные элементы могут быть применены разные шрифты, поэтому сначала выделите нужный на панели Elements. В случае выше мы рассматриваем сразу весь контейнер body. Также имейте в виду, что семейства Arial, Helvetica, Sans Serif и прочие известные названия – это стандартные шрифты, и, скорее всего, участвуют на сайте просто в виде базовых.

Просмотр сайта на мобильном

Хотите быстро увидеть мобильную версию сайта? Легко! Выберите соответствующую иконку в левом верхнем углу консоли разработчика:

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

Первый выпадающий список дает возможность выбрать устройство, с которого производится эмуляция просмотра сайта. Если вы нажмете на «Edit», то в консоли разработчика справа покажется полный список эмулируемых устройств, в котором вы можете добавить нужные. Там же вы можете поиграть с другими настройками вывода сайта.

Далее в панели показано разрешение, на котором демонстрируется сайт. Регулируется оно моделями устройств. Следующий пункт – масштаб, его можно регулировать.

Наконец, список Throttling дает вам возможность эмулировать качество интернет-соединения на устройстве. No throttling означает, что соединение работает максимально быстро и стабильно. Попробуйте изменить это на нестабильное соединение и посмотрите, как будет вести себя сайт. Если даже в режиме эмуляции он будет загружаться медленно или производить баги, то это повод обратиться к разработчику за оптимизацией.

Поиск и скачивание картинок

Когда-то давно любое изображение прекрасно скачивалось из интернета, если пользователь нажимал на правую кнопку мыши на нем и выбирал «Сохранить изображение как». Теперь же, во времена мощных движков, галерей и Java-модулей, просто так скачать картинку бывает невозможно. Но не для консоли разработчика.

Хороший пример – Instagram. Если мы нажмем правой клавишей на открытое в нем изображение, то не увидим возможности его скачать:

При нажатии на «Сохранить как» браузер предложит нам сохранить всю страницу, а это совсем неудобно. Воспользуемся консолью и выберем «Просмотреть код элемента»:

Теперь становится понятнее – на самом деле над картинкой еще располагается элемент <div>, который мы и кликаем, а браузер не понимает, какое именно изображение нам нужно. Зато чуть ниже в консоли мы видим ссылку на изображение:

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

Если же консоль не находит изображение таким образом, то, скорее всего, оно указано в CSS как «обои» (background-image) для элемента. Здесь чуть сложнее, придется сначала найти элемент с нужными «обоями»:

Когда вы перемещаетесь по элементам на панели Elements, в левой части браузера подсвечиваются области сайта, соответствующие этим элементам. Нам нужно найти объект, содержащий картинку, и после перебора от wrapper к соответствующему <div> мы наконец находим изображение в бэкграунде. Теперь его нужно сохранить, для чего жмем правой кнопкой на ссылку в Styles, убеждаемся в правильности выбора и открываем изображение в новой вкладке:

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

Работа с куки через консоль

Файлы cookie содержат информацию о пользователе, которая порой влияет на отображение сайта. Вы можете удалить куки в настройках браузера, но там вам придется искать нужный сайт в длинном списке. Консоль предлагает более простой способ: откройте вкладку Application, перейдите в раздел Cookies, разверните его, выберите нужный сайт и очистите куки через правую клавишу и Clear. После этого останется только перезагрузить сайт «с чистого листа».

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

С помощью информации на панели Elements можно выполнять и более сложные задачи. Например, настроить веб-аналитику. Стандартные цели в «Яндекс.Метрике» и Google Analytics позволяют отслеживать переходы по страницам с заданным URL, вызов Javascript-событий (их задает чаще всего разработчик) и клики на некоторые определенные элементы на сайте. Но если ресурс имеет сложную структуру вложенности, то грамотно определить элемент для отслеживания бывает нелегко. Проблему решают системы управления тегами, такие как Google Tag Manager. Установив на сайт контейнер такой системы, вы получаете возможность задавать отслеживание как работы с элементами, так и событий, которое затем будет передавать срабатывание целей в счетчики Метрики и GA.

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

Клик на круглую кнопку паблика «Вконтакте» предполагает, что мы используем родительский элемент <a>. Но если развернуть его на панели Elements, то мы видим внутри рисунок <img> с логотипом «ВК». И, если пользователь кликнет по картинке, а не по обрамлению в виде кружка вокруг нее, то Google Tag Manager не отразит это как клик по кнопке, поскольку до этого вы могли задать отслеживание кликов только по <a> с соответствующим href.

Скорее всего, то же самое придется проделывать для целей типа «Клик» в «Метрике». Они появились там недавно.

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

В случае выше можно увидеть, что карточка в каталоге является двойным элементом – над ссылкой в теге <a> располагается <div> с собственным классом, а ссылка в обеих частях элемента одна и та же. Но может случиться и так, что при изменении в CMS ссылка в <div> будет другой по отношению к <a>. Это приведет к переносу числа кликов с одной страницы на другую, что в «Метрике» будет не отследить: для нее при просто уменьшится число «целевых» кликов на одну из ссылок. Консоль разработчика покажет вам техническое несоответствие, которое вы сможете устранить.

В ней также существует удобный способ поиска элементов в дереве:

Нажмите на указанную иконку в левом верхнем углу консоли разработчика. Включится режим автопоиска, в котором вы просто водите курсором по элементам сайта, а консоль автоматически выделяет их в дереве Elements. Кроме того, в части сайта у элементов появляются всплывающие формы, где можно увидеть класс объекта и его основные свойства (в нашем случае класс = fb). Нажмите на элемент один раз левой кнопкой мыши и автопоиск прекратится, а содержимое будет раскрыто в Elements. Так вы сможете работать сразу с нужной частичкой сайта.

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

• В панели Elements нажмите CTRL + F, курсор окажется на поле поиска.
• Введите нужный текст из счетчика для поиска по нему:

• Изучите первый найденный элемент. В данном случае мы нашли текст в комментарии, но для просмотра счетчика нужно будет развернуть блок <script>.
• Если это не тот элемент, который вам нужен, воспользуйтесь кнопками «вниз» и «вверх» справа от поля поиска, произведя перебор по дереву.

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

Немного сложнее дело обстоит с событиями, которые маркетологу также могут быть интересны. Для их отслеживании в инструментарии имеется полноценная JavaScript-консоль, которую ранее мы наблюдали под названием Console:

Обычно события на сайте происходят незаметно даже для этой консоли. Если JS срабатывает как надо, то после вызова соответствующих функций мы получаем результат в виде адекватно работающего сайта. В ином случае в консоль автоматически выводятся ошибки. Кроме уже упомянутых проблем доступа модулей аналитики из-за «Адблока» в браузере, мы можем наблюдать и проблемы загрузки некоторых элементов. На снимке выше это изображение в PNG, которое при обращении выдает ошибку 404. Скорее всего, сама картинка уже не существует на сервере, но сайт где-то к ней обращается.

Это повод самим обратиться к содержанию сайта и исправить проблему. Можно попытаться найти элемент самостоятельно через соответствующую панель, но достаточно просто нажать на ссылку класса CSS в правой части события GET. Она отсылает нас к таблице стилей одного из элементов, в котором мы через поиск (отдельно нажмите CTRL + F на вкладке Sources) находим файл decor.png:

Очевидно, что в указанном классе картинка использовалась как бэкграунд. Теперь мы можем отредактировать этот параметр в самом файле CSS или HTML на сервере, удалив бэкграунд или изменив его. Если же картинка просто пропала случайным образом, ее можно восстановить через заливку на сервер.

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

Чаще всего требуется проверить события веб-аналитики. Самое простое: вам требуется отправить в «Метрику» на сайте цель в виде JS-события. Код такой цели (для старого счетчика) представляет собой следующую конструкцию: yaCounter483434.reachGoal(‘test’);

Вводим ее прямо в консоль и жмем Enter:

Мы получили ответ, в котором система ругается на неопределенный счетчик 483434. И действительно, на сайте задан другой счетчик «Яндекс.Метрики». Меняем на правильный и получаем ответ:

Если всё верно, то в счетчик должно было прийти сработавшее JavaScript-событие «test». Конечно же, его нужно было создать в настройках счетчиках заранее.

Иногда в консоли вы можете наблюдать сухой ответ «undefined», в случае с «Метрикой» он вызывается, когда вы пытаетесь отправить событие срабатывания цели из нового счетчика в старый. В новых счетчиках оно записывается как ym(ХХХХХЗ,’reachGoal’,’test’), и старыми не воспринимается. «Старое» же объявление событий одинаково воспринимается как старыми, так и новыми счетчиками.

Точно так же отправляйте тестовые события для Google Analytics и Google Tag Manager. В последнем случае работа с консолью разработчика очень важна, ведь в GTM настройка отслеживания может быть гораздо тоньше. Например, вам нужно посчитать некоторое значение, а затем отправить или не отправить цель в зависимости от результата вычислений. Либо взять первый найденный пользователем на сайте элемент и отправить его содержимое в базу данных Analytics. Делать все придется в JavaScript, а консоль с ним прекрасно работает:

В примере выше мы нашли все элементы в текущем представлении сайта, класс которых соответствует «finded». Это результаты пользовательского поиска информации на сайте. Набрав JS-команду, получили результат в виде массива HTMLCollection, состоящего из двух элементов вида <span>.

В Google Tag Manager при этом переменная с той же командой будет брать одну из строк массива и передавать ее в Google Analytics. Соответственно, проверить работу этой переменной мы можем через консоль разработчика, в которой каждый найденный элемент можно изучить и понять, насколько верно работает конструкция.

Ну и конечно же, проверка работы контейнера GTM с помощью отправки через консоль событий dataLayer.push() будет очень полезна для маркетолога-аналитика.

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

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

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

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

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

macOS — Ctrl + Cmd + I

Linux — Ctrl + Shift + I

Настройки 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.

Это далеко не все возможности Chrome DevTools, но рассказ обо всём сразу займёт не один час. Подпишитесь на рассылку, чтобы не пропустить следующие выпуски.

Гвозди можно заколачивать и микроскопом, но лучше не надо

Сила — в знании, какие инструменты когда применять. Знания — на тренажёрах и интенсивах.

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

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

На сегодняшний день одними из лучших инструментов разработчика обладает браузер Google Chrome. Его встроенная система Chrome DevTools позволяет не только узнавать и менять практически любые элементы веб-страниц «на лету», но также имеет JavaScript-консоль, эмулятор экранов различных устройств и целый ряд диагностических инструментов для аудита и оптимизации загрузки сайтов.

О том, как извлечь максимальную пользу из инструментов разработчика Хрома мы и расскажем Вам в статье ниже.

Chrome DevTools

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

Из всех компьютерных дисциплин, связанных с программированием, веб-разработка, безусловно, имеет самый низкий порог вхождения. Практически всё, что нужно для создания простой веб-странички – Блокнот и браузер.

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

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

Подобие таких инструментов появилось ещё в Internet Explorer. В старой Opera для этих целей использовалась панель Dragonfly и даже имелся собственный встроенный аналог Блокнота с подсветкой кода, что позволяло верстать прямо в среде браузера:

Сегодня от подобной практики отошли и снабдили веб-обозреватели специальными инспекторами кода. Наиболее функциональным инструментарием разработчиков могут похвастаться браузеры на базе движка Chromium, а конкретнее в Google Chrome. На его примере всё и рассмотрим.

Вызов инструментов разработчика и представления страницы

Вызвать инструменты разработчика в Хроме можно несколькими способами:

1. Из основного меню. Кликаем по кнопке меню (три точки в правом верхнем углу окна браузера), наводим курсор на выпадающий список «Дополнительные инструменты» и в нём нажимаем пункт «Инструменты разработчика».
2. Горячими клавишами. Для вызова можно нажать кнопку F12 или комбинацию CTRL+SHIFT+I.
3. Из контекстного меню (наиболее удобно для инспекции конкретных элементов страницы). Нажимаем правой кнопкой мыши по нужному объекту на веб-страничке и выбираем пункт «Просмотреть код» (или «Исследовать элемент» в некоторых более ранних версиях Хрома).

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

Поведение первой мы ещё изучим, а, что касается второй, то она позволяет эмулировать отображение веб-страницы на экране одного из доступных мобильных устройств (например, iPhone) или на дисплее заданного разрешения в пикселях. Всё, что нужно для этого – нажать её и выбрать желаемое устройство:

В правой части также имеется несколько кнопок и индикаторов. Индикаторы отображают количество ошибок (красным) и предупреждений (жёлтым) в работе скриптов. Основной же кнопкой здесь можно назвать меню настроек. Она позволяет изменять привязку самой панели относительно фрейма со страницей, а также включать и отключать дополнительные вкладки с инструментами (раздел «More tools»). По умолчанию она находится внизу под инспектируемой страницей, но её также можно разместить сбоку или даже открепить в отдельное окно:

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

Вкладка Elements

По умолчанию Chrome DevTools открывается на вкладке «Elements». Это одна из самых полезных вкладок, поскольку позволяет просматривать и быстро менять HTML и CSS-код различных элементов веб-страницы. Чтобы выбрать элемент, достаточно активировать первую кнопку в левой части панели («Select an element in the page to inspect it») и курсором мышки ткнуть в нужный фрагмент страницы. На самой страничке вокруг выбранного элемента отобразится выделение и размеры блока в пикселях, а во вкладке «Elements» HTML-код развернётся до строки, описывающей выбранный фрагмент:

Выбрав элемент, мы можем править его и относящиеся к нему стили как нам нужно. К примеру, мы хотим изменить текст и внешний вид блока-«облачка» с фразами Фриды на нашем сайте. Для этого выберем сам блок и посмотрим его содержимое:

Как видим, внутри него находится три блока с разными репликами и скрипт, который эти реплики переключает через определённые отрезки времени. Чтобы написать что-то своё, мы можем остановить работу скрипта и прописать в одном из блоков наш текст (правка HTML доступна после двойного клика по элементу). Хотя, чего мелочиться? Можем убрать все лишние блоки, оставив только один (а заодно можно и скрипт снести :)):

Итак, текст в блоке мы изменили, но он выглядит как-то мелковато. Нужно, чтобы масштабы нашего «злодеяния» было видно с первого взгляда 🙂 И здесь нам поможет функция правки стилей, которая имеется в дополнительной части вкладки «Elements». Выделяйте в коде нужный блок и двойным кликом в боковой панельке можете как править те стили, которые уже есть, так и добавлять новые. Таким образом можно добиться весьма заметных результатов 🙂

Обратите внимание, что все элементы, которые мы добавляем в панели работы со стилями, автоматически прописываются в качестве инлайновых стилей (параметры атрибута «style») выбранного блока HTML-кода. При этом каждый из них можно быстро отключить, сняв галочку слева (в коде отключённый параметр автоматически убирается в комментарий).

Ну и, пожалуй, самое полезное – для каждого селектора с описанием стилей имеется точная ссылка на строку, в которой он реально прописан в CSS-файле. Это позволяет открыть файл и внести необходимые правки в заранее известном месте вместо того, чтобы искать вручную! То есть, использовать инструменты разработчика на вкладке «Elements» можно для внесения и оценки предварительных временных правок кода (все правки исчезают после перезагрузки страницы) с последующим внесением наиболее удачных изменений в код на постоянной основе.

Стоит также напоследок отметить, что панель для правки стилей имеет целый ряд собственных вкладок, в которой «Styles», лишь первая. Вот, какие дополнительные разделы там имеются:

• Computed – отображает модель выбранного блока и вычисленные для него автоматически стили, которые явно не заданы или были унаследованы от родительских блоков;
• Event Listeners – выводит список функций, «слушающих» определённые события для всей страницы или конкретно выбранного блока (нужно снять галочку ;
• DOM Breakpoints – содержит так называемые «точки остановки» DOM (сокр. англ. «Document Object Model» – «объектная модель документа»), которые можно создавать из контекстного меню HTML-кода (группа «Break on») при его модификации для быстрой отмены/применения внесённых правок;
• Properties – позволяет просмотреть полный список JavaScript-свойств для выбранного блока на страничке;
• Accessibility – показывает иерархический уровень вложенности для выбранного блока без учёта типов блоков, их классов, идентификаторов или иных характеристик.

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

Консоль

Раз уж речь зашла о JavaScript, то нельзя не сказать о таком инструменте, встроенном в Chrome DevTools, как консоль. Найти её можно на отдельной вкладке «Console», а также она по умолчанию отображается в качестве дополнительной нижней панели на всех других вкладках (отключить отображение можно в настройках, выбрав пункт «Hide console drawer» или нажав кнопку ESC):

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

1. Белый – «отстуки» об успешно выполненных событиях.
2. Жёлтый – предупреждения о возможных некритических ошибках и сбоях.
3. Красный – ошибки в выполнении скриптов или в доступе к определённым запрашиваемым ресурсам.

Ошибки и предупреждения содержат в себе краткое описание проблемы и ссылку на файл и строку в нём, которая эту проблему вызывает. Зная точный адрес возникновения неполадки (при условии, что она возникает в файле на Вашем сервере), Вы можете быстро локализовать и устранить ошибку.

Что касается выполнения пользовательского кода, то данная возможность применяется очень часто для быстрой отладки кода и проведения различных экспериментов с JavaScript. Например, при изучении этого языка Вам не всегда нужен отдельный Блокнот или даже полновесная среда разработки. Простенькие скрипты Вы можете выполнять прямо в консоли (тем более, что она поддерживает автодополнение команд).

Для программирования в консоли лучше всего открывать в Хроме несуществующую внутреннюю страницу (например, chrome://blank/) или новую пустую вкладку (chrome://newtab/). Это позволит избежать накладок в выполнении уже работающих на странице скриптов. По сути и всё – можем писать код в консоли и выполнять его нажатием Enter. Единственное, что нужно помнить, для вывода, вместо традиционного «document.write(«»);», используется конструкция «console.log(«»);». Вот Вам самый примитивный пример для вывода текстовой строки:

console.log(«Мой первый вывод текста в консоли Хрома :)»);

Консоль поддерживает ряд спецификаторов, позволяющих явно определить тип вывода (строка/число/элемент DOM/объект JavaScript), выполнить подстановку данных обозначенного типа или применить форматирование:

Спецификатор	Назначение
%s	Определяет результат вывода как строку
%d	Определяет результат вывода как любое число
%i	Определяет результат вывода как целое число
%f	Определяет результат вывода как десятичную дробь (число с плавающей запятой)
%o	Определяет результат вывода как элемент DOM, аналогичный тому, который отображался на панели «Elements»
%O	Определяет результат вывода как JavaScript-объект
%c	Позволяет применить к результату вывода CSS-правила, которые указываются в формате инлайн-стилей в качестве второго параметра

Вот несколько примеров применения спецификаторов:

console.log(«Я считаю до пяти: %d, %d, %d, %d, %d \n%s», 1, 2, 3, 4, 5, «Я иду искать!»);

console.log(«%cЭто будет написано большими красными буквами на синем фоне», «color: #f00; font-size: 30px; background: #00f; padding:10px; font-weight:bold»);

var curDate = new Date();
var day = curDate.getDate();
var month = curDate.getMonth();
var arr = [
‘Январь’,
‘Февраль’,
‘Март’,
‘Апрель’,
‘Май’,
‘Июнь’,
‘Июль’,
‘Август’,
‘Сентябрь’,
‘Ноябрь’,
‘Декабрь’,
];
console.log(«%cСегодня: %s — %d число», «color: orange; font-size: 30px; background: blue; padding: 20px», arr[month], day);

Как видим, консоль можно с успехом использовать не только для инспектирования существующего кода, но и в качестве среды для изучения JavaScript. Она поддерживает как однострочные выражения, так и более сложные многострочные конструкции с переменными, массивами и циклами. Для перевода строки в консоли вместо Enter нужно нажимать SHIFT+ENTER, а для перевода строк в результатах вывода пользуйтесь символом перевода строки – «\n».

Вкладка Sources

На первый взгляд назначение третьей вкладки инструментов разработчика «Sources» не совсем понятно. По умолчанию в центре рабочего пространства здесь также открывается исходный код страницы, который, почему-то, нельзя править. По бокам расположено две панели: «Page» (слева) и «Threads» (справа). И вот как раз левая панель и является основным «богатством» вкладки «Sources»!

Эта панель позволяет просмотреть все ресурсы, которые подгружаются вместе со страницей. Картинки, скрипты, таблицы стилей – всё это можно выделить и просмотреть в рабочей области (а скрипты можно ещё и править):

Помимо просмотра ресурсов и правки JavaScript (кстати, при этом можно использовать инструменты из правой панели), вкладка «Sources» позволяет скачивать любые файлы на компьютер. Эту особенность можно применить в дело, для скачивания, например, фотографий из Instagram и других веб-ресурсов, на которых прямое сохранение изображений недоступно! Просто открываем инструменты разработчика, в списке ресурсов ищем нужные картинки, а затем сохраняем их:

Аналогично можно скачивать, например, понравившиеся шрифты SVG-графику и подобные ресурсы, прямое сохранение которых может быть недоступно.

Инструменты тестирования и аудита

Рассмотренные выше три вкладки являются, можно сказать, основными в инструментах разработки. Состав же и количество остальных от версии к версии Google Chrome может меняться (как это, например, происходит с вкладкой «Memory», которая то появляется, то исчезает). К тому же, количество вкладок может увеличиваться за счёт устанавливаемых расширений, которые добавляют собственные панели инструментов.

На данный момент актуальной версией Google Chrome является недавно обновлённая 69-я ветка. Поэтому рассматривать дополнительные вкладки будем на её примере.

Вкладка «Network»

Вкладка «Network» позволяет просмотреть статистику загрузки всех элементов инспектируемой веб-страницы, а также наблюдать за запросами, отправляемыми ею во время работы. Для начала отслеживания нужно нажать кнопку записи в левой части вкладки и перезагрузить страничку (F5). Остановить запись можно в любой момент, однако, целесообразно делать это после полной загрузки страницей всех требуемых ресурсов:

Полученные результаты можно изучить, используя фильтрацию событий по типы передаваемых данных, по их размеру, времени загрузки и т.п. Кроме того, можно эмулировать загрузку страницы с искусственным ограничением скорости, соответствующим тем или иным мобильным сетям (выпадающий список «Online»). Всё это можно использовать для выявления самых «тяжеловесных» файлов и оптимизации их загрузки (или вообще исключения) для экономии трафика и ускорения Вашего сайта.

Вкладка «Performance»

Если предыдущая вкладка позволяла нам отследить сугубо сетевую активность страницы, то «Performance», работая по схожим принципам (запись действий), позволяет оценить, какую нагрузку создаёт веб-ресурс на компьютер пользователя. Чтобы получить достаточное для анализа количество данных, достаточно записывать работу страницы в течении минуты, после чего останавливаем и смотрим результаты:

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

Вкладка «Memory»

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

Что интересно, отображается потребление памяти не только самой страницей, её скриптами и подгружаемыми ресурсами, но также расширениями Хрома, которые активны в данный момент! Это может пригодиться в тех случаях, когда браузер стал сильно тормозить из-за «обрастания» лишними плагинами. Зная основных «пожирателей» ресурсов, Вы сможете их удалить, вернув своему Хрому былую лёгкость.

Вкладка «Application»

Если Вам нужно узнать, что хранит веб-страница в сессиях, cookie-файлах или иных локальных хранилищах, Вам на вкладку «Application». Здесь всё максимально просто – в левой панели выбираем интересующее нас хранилище данных, а в основной области смотрим его содержимое. И, что характерно, здесь же мы можем сразу это содержимое править и даже полностью удалять (кнопки «Clear all» и «Delete selected»):

Вкладка «Security»

Сейчас стало практически необходимо использовать на сайтах защищённый HTTPS-протокол. Чтобы оценить эффективность его работы и потенциальные бреши в безопасности веб-страниц, можно воспользоваться вкладкой «Security». Здесь после перезагрузки страницы мы увидим отчёт о безопасных и опасных ресурсах и, соответственно, сможем принять дальнейшие меры для устранения выявленных недостатков:

Вкладка «Audits»

Наконец, в довершение ко всему, Google Chrome может дать нам практические советы по улучшению работы сайта. Для этого нужно перейти на вкладку «Audits», запустить тестирование и дождаться его завершения. По результатам аудита будут сформированы графики и конкретные рекомендации по дальнейшей оптимизации страниц:

Выводы

Google Chrome предоставляет пользователю довольно хороший набор инструментов разработчика. В нём есть практически всё, что может потребоваться для инспектирования и оптимизации веб-страниц. В Вашем распоряжении средства для правки HTML-кода, управления стилями и даже полного контроля над скриптами. Кроме того, в Chrome DevTools Вы найдёте инструменты для тестирования производительности сайта, что позволит наметить пути для дальнейшей оптимизации.

И всё это не требует установки каких-либо дополнительных программ или расширений. Хотя, некоторые расширения могут добавлять свои инструменты в и без того богатый арсенал Хрома. Если Вы освоите хотя бы половину из того, что даёт DevTools, то сможете существенно повысить производительность своего труда и улучшить качество создаваемых Вами веб-страниц!