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

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

Вкладка Console в DevTools позволяет работать с JavaScript при просмотре любой страницы. Это может быть удобно в разных ситуациях:

1. Просмотр ошибок. Например, позволяет увидеть, что какие-то ресурсы (CSS, изображения и так далее) на странице не загрузились.
2. Обращение к HTML-элементам. Так можно сразу проверить правильность написания пути до элемента в JavaScript.
3. Отладка кода на JavaScript. Речь идет о тестировании и устранении ошибок непосредственно в браузере. Для этого вкладка дает множество инструментов.

Сначала разберемся, как открыть консоль в разных браузерах:

Google Chrome

1. Нажмите значок с тремя точками в правом верхнем углу окна браузера.
2. В появившемся меню наведите курсор мыши на «Дополнительные инструменты» и выберите «Инструменты разработчика» в расширенном меню.
3. После этого в правой части экрана откроется раздел с DevTools.

Еще один способ — использовать горячие клавиши. В Chrome это Ctrl+Shift+I (или Command+option+I на Mac).

Microsoft Edge

1. Нажмите на значок «Настройки и другое» в правом верхнем углу экрана.

2. Затем кликните на «Дополнительные инструменты» в раскрывающемся меню и выберите «Инструменты разработчика».

3. После этого в правой части экрана откроется раздел с DevTools.

Как и в Chrome, открыть DevTools в Edge можно горячими клавишами Ctrl+Shift+ I (или Command+option+I на Mac).

Mozilla

1. Выберите меню-гамбургер в верхнем углу экрана.
2. Затем нажмите на «Дополнительные инструменты» в раскрывающемся меню и выберите «Инструменты веб-разработчика».
3. После этого в нижней части экрана откроется раздел с DevTools.

Горячие клавиши в Mozilla — Ctrl+Shift+I (или Command+option+I на Mac).

Opera

1. Щелкните на значок Opera в верхнем левом углу окна браузера.
2. Наведите курсор мыши на «Разработчик» в меню и выберите «Инструменты разработчика».
3. После этого в правой части экрана откроется раздел с DevTools.

В Opera DevTools можно открыть комбинацией клавиш Ctrl+Shift+I(или Command+option+I на Mac).

Читайте также:
Как сохранять фокус на протяжении всего обучения: советы от Хекслета

Safari

1. Выберите меню Safari в верхнем левом углу экрана.
2. Затем нажмите «Настройки» и перейдите в меню «Разработка» в верхней части экрана.
3. Выберите «Показать веб-инспектор» в раскрывающемся меню .
4. После этого откроется новое окно с инструментами разработчика.

Горячие клавиши для Safari — Command + option+ I.

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

1. Нажмите на меню-гамбургер в верхнем правом углу окна браузера.
2. Затем кликните по пункту «Дополнительно» и выберите меню «Дополнительные инструменты».
3. После этого переходим к пункту «Инструменты разработчика» в следующем меню.

Для запуска консоли также можно нажать Ctrl + Shift + I.

Как использовать консоль

Обычно для быстрого выполнения кода и оценки результата его работы используются сторонние сайты. Другой вариант — NodeJS, которая дает доступ к REPL (Read Eval Print Loop) — интерактивному интерпретатору кода. Вкладка Console, по сути, выполняет те же функции и обладает множеством других возможностей.

Рассмотрим, как работает консоль, на примере Chrome DevTools. В ней можно проверять как простые инструкции вида 2 + 2, так и большие функции.

Откроем Chrome DevTools, перейдем во вкладку Console, и вставим выражение 2 + 2 DevTools сразу выдаст ответ 4. Таким образом можно не только складывать числа, а использовать любые методы из стандартной библиотеки JavaScript, например:

'hexlet'.toUpperCase() // => HEXLET
[1, 2, 3, 4].map((number) => number ** 2) // => [1, 4, 9, 16]

Помимо простых выражений, которые никак не связаны с сайтом, можно использовать и DOM API для доступа к элементам страницы. Код, указанный ниже, посчитает и вернет количество ссылок на главной странице ru.hexlet.io. Вы также можете самостоятельно перейти на любую страницу и «посчитать» количество ссылок или любых других элементов на ней:

document.querySelectorAll('a').length // => 73

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

const linksCount = document.querySelectorAll('a').length // => undefined
2 + 2 // => 4
linksCount // => 73
linksCount * 2 // => 146

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

const getElementCount = (tag) => {
  const elementCount = document.querySelectorAll(tag).length;
  return `Найдено ${elementCount} элементов ${tag}`  
}

getElementCount('div') // => 'Найдено 105 элементов div'

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

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

Небольшой обзор инструментов разработчика под названием Chrome DevTools. Рассказываем, что это такое и как с этим работать. 

Вкратце о DevTools

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

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

Здесь есть редактор кода, дебаггер, наглядная визуальная система управления стилями, функция автоматической проверки сайтов на качество (производительность, SEO, адаптация под людей с ограниченными возможностями и т.п.). Также сам браузер поможет адаптировать сайты под мобильные устройства и экраны разных гаджетов. 

Давайте обо всем поговорим подробнее и выясним, чем же так хорош Chrome DevTools.

Как открыть Chrome DevTools

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

1. через контекстное меню,

2. через настройки браузера,

3. с помощью сочетания клавиш.

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

Чтобы открыть DevTools через настройки, нужно кликнуть по иконке в виде трех точек в правом верхнем углу. В появившемся списке найти пункт «Дополнительные настройки» и навести на него курсор. А затем выбрать пункт «Инструменты разработчика».

Ну и основной способ, которым вы будете пользоваться чаще всего, когда запомните – горячие клавиши. Вызвать DevTools можно одновременным нажатием клавиш Ctrl + Alt + I в Windows и Cmd + Alt + I в macOS.

Основные возможности Chrome DevTools

Разберем базовые функции инструментов разработчика в Google Chrome. Посмотрим, что можно делать с веб-страницей, и поймем, почему некоторые разработчики используют DevTools чуть ли не чаще, чем какую-нибудь IDE или текcтовый редактор.

Поиск DOM-элементов

Первое, что вы увидите, когда откроются инструменты разработчика – редактор HTML-кода. Это полноценное DOM-дерево, которое можно просмотреть от и до. И не только посмотреть, но и изменить. Для начала посмотрим, как легко можно найти любой элемент страницы в коде, используя DevTools. 

Во-первых, при вызове инструментария можно кликнуть правой кнопкой мыши не по пустому пространству, а по конкретной кнопке или картинке. Тогда при нажатии на «Просмотреть код» в DOM-дереве подсветится выбранный элемент.

Во-вторых, можно воспользоваться отдельной функцией поиска HTML-компонентов. Для этого нужно кликнуть по иконке в виде стрелки в левом верхнем углу окна DevTools, а затем навести курсор на интересующую кнопку/ссылку/картинку и т.п.

Также элементы подсвечиваются при наведении на них мыши в редакторе.

Редактирование HTML

Весь текст на сайте можно редактировать прямо в браузере. Менять любые параметры DOM. 

В DevTools отображаются все вложенные элементы сайта (все div, section, footer, p и прочие). Чтобы отредактировать текст в блоке, нужно кликнуть по нему два раза. Текст выделится, и в нем появится курсор. 

То же можно проделать с классами и типами данных. Кликнув по имени класса (или самому слову class), вы получите доступ к редактору именно этой части кода. Это удобно, когда нужно скорректировать небольшую часть кода.

Можно заменить сразу большой участок текста или поменять наименования атрибутов. Для этого кликаем правой кнопкой мыши по элементу или его части, а затем выбираем одну из опций. Например, Edit as HTML.

Работа с CSS

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

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

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

Сделаем и то, и другое на примере страницы выше. Поменяем через Chrome DevTools цвет кнопки.

Что получится при смене дизайна клавиш и подсветки ссылок:

Также в Chrome DevTools есть графическая презентация отступов объекта. С помощью нее можно легко настроить положение элемента относительно других, связанных с ним компонентов страницы. 

А еще это удобный способ понять, как работают свойства margin и padding.

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

Внесенные изменения можно отследить в графе Changes (в нижнем блоке DevTools, справа от Console). Они оформлены в стиле GitHub. То есть видно и замененный элемент, и его обновленный вариант. 

Разработка адаптивного дизайна

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

Чтобы перейти в режим адаптивной верстки, надо кликнуть по кнопке Toggle device toolbar или нажать Cmd + Shift + M.

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

Для упрощения процесса верстки под конкретное разрешение, нужно кликнуть по иконке в виде трех точек слева от кнопки запуска режима адаптивной верстки и нажать на строку Show rulers. Появится пиксельная линейка для «подгонки» сайта.

А еще тут можно делать скриншоты сайта в заданном размере. Там же, где находится линейка, есть кнопка Capture screenshot.

Пример внесения изменений в HTML и CSS через Chrome DevTools

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

Сначала ищем кривую кнопку в коде, активировав функцию поиска элемента. 

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

Остается скопировать этот код непосредственно в приложение/сайт или сохранить обновленный CSS-файл в папку проекта. Для этого нужно открыть вкладку Sources, выбрать отредактированный файл (он будет помечен звездочкой), затем кликнуть по нему правой кнопкой мыши и выбрать опцию Save as…

Запуск и дебаггинг JavaScript-кода 

Инструменты Chrome DevTools позволяют работать не только с CSS и HTML, но и с JavaScript-кодом. Можно запускать произвольные команды через встроенную консоль или подключая дополнительные JS-файлы. 

Чтобы открыть JS-файл, нужно перейти во вкладку Sources справа от Elements.

Через консоль также можно отслеживать работу сайта, наблюдая за появляющимися ошибками и особенностями поведения сайта, в частности с помощью функции console.log( ).

А вот пример запуска произвольного кода внутри консоли браузера.

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

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

• Открываем JavaScript-файл во вкладке Sources.
• Затем переходим в дебаггер. По умолчанию он привязан к нижней границе окна DevTools.
• Выбираем раздел Event Listener Breakpoints.
• В нем ставим галочку напротив действий, которые хотим отслеживать (при их выполнении исполнение кода будет останавливаться).

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

Другие возможности DevTools

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

Оптимизация производительности сайта

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

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

Анализ подключения

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

Уровень безопасности сайта

Chrome DevTools умеет в автоматическом режиме анализировать страницу, проверять сертификаты и степень защищенности соединения. Сюда же попадает проверка всех подключаемых ресурсов. 

Обязательно отслеживайте эту страницу, если рассчитываете на высокие позиции в поисковой выдаче Google.

Lighthouse

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

Скорость загрузки и работы, адаптированность под людей с ограниченными возможностями, корректность верстки, адаптация под поисковые машины (SEO), поддержка Progressive Web App и т.п. 

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

Естественно, Chrome – не единственный браузер, оснащенный HTML-редактором и дебаггером. Аналогичная функциональность есть в Safari и Firefox. У них зачастую даже интерфейсы схожие. Примерно такие же инструменты для визуального редактирования CSS и т.п.

Важное отличие инструментария в Chrome – наличие аналитических систем в духе Lighthouse. Они позволяют напрямую взаимодействовать с Google. Так проще исправлять ошибки в коде и адаптировать ресурс под требования поисковых машин. 

Также инструменты в Safari и Firefox отличаются во всевозможных мелочах. Разные горячие клавиши, разное поведение при выделении и редактировании текста, разные ошибки в консоли по умолчанию и т.п. Но принцип остается один. Возможно, более детальные отличия изучим в следующих материалах. 

Вместо заключения

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

Консоль разработчика в браузере («Хром», «Файерфокс», «Сафари» или т. п.)представляет собой инструмент, который позволяет:

• Ознакомиться со структурой и содержимым web-страницы;
• Обнаружить и исправить имеющиеся на ней ошибки;
• Определять целый ряд показателей и проводить различные полезные манипуляции с самой страницей (если вы знаете, как).

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

Ознакомление с консолью и основные инструменты

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

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

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

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

Он поможет получить сведения о тех или иных элементах сайта. Как открыть консоль разработчика в браузере «Хром», которую мы и рассмотрим? Просто наведите на любую область сайта курсор и кликните правой кнопкой мыши. Перед вами раскроется вот такое меню:

Ещё одна возможность сделать это – использовать сочетание клавиш “Ctrl + Shift + C” или нажать “F12” (и консоль откроется с правой стороны).

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

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

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

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

Ознакомление с основными элементами консоли

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

• Перемещение блоков на панели;
• Изменение их размеров;
• Перемещение самой консоли.

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

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

Интерфейс представлен следующим:

• Панелью “Элементы”;
• Панелью свойств “Стили”;
• Панелью вывода “Консоль”.

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

Вкладка “Элементы”

В ней представлено древо элементов сайта, которое доступно как в свёрнутом, так и в развёрнутом виде. Первое имеет место быть если не был выбран отдельный элемент, и позволяет увидеть, что помимо скриптов сайт включает в себя <head> и <body>. Чтобы проще ориентироваться, достаточно понять, что:

• объявленные элементы подсвечиваются фиолетовым;
• Их свойства и характеристики подсвечиваются коричневым;
• Расшифровка их характеристик подсвечивается синим;
• Комментарии разработчика подсвечиваются зелёным;
• Ссылки выделены подчёркиванием.

Все элементы доступны к открытию нажатием на треугольник серого цвета с левой стороны.

Вкладка “Консоль”

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

Вкладка “Источники”

Она позволяет увидеть связь сайта с другими (как внешними, так и внутренними). Именно здесь можно отследить её со счётчиками web-аналитики, API и социальными сетями. В этом же разделе представлен и код источника данных, который позволяет корректировать взаимодействия.

Вкладка “Сеть”

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

Вкладка “Производительность”

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

• Время, необходимое на загрузку;
• Объём затрачиваемых ресурсов.

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

Вкладка “Память”

Здесь можно увидеть распределение времени исполнения и памяти web-страницы по внутренним ресурсам. Таким образом можно понять, какие именно элементы дают максимальную нагрузку на систему.

Вкладка “Приложение”

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

Вкладка “Безопасность”

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

Вкладка “Lighthouse”

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

Элементы панели свойств и характеристик

Опускаемся на уровень ниже и разбираем следующие семь вкладок.

Вкладка “Стили”

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

Вкладка “Computed”

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

Вкладка “Макет”

В ней можно увидеть элементы, отображаемые на сайте, типа “Grid”, которые применяются достаточно редко.

Вкладка “Прослушиватели событий”

В ней можно увидеть все элементы обработки событий для выделенной web-страницы или её части. Это могут быть изменения оформления, загрузка, нажатие на кнопку, прочее. Всё это можно делать посредством целого ряда счётчиков аналитики или системы работы с тэгами (вроде “GoogleTagManager”).

Вкладка “Точки остановки DOM”

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

Вкладки “Свойства” и “Специальные возможности”

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

Особенности работы маркетолога с консолью разработчика

Данный раздел посвящён лайфхакам, которые позволят использовать консоль для решения маркетинговых задач максимально эффективно.

Лайфхак №1: Отслеживайте вносимые изменения в режиме «онлайн»

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

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

Лайфхак №2: Поиск шрифтов или элементов

Он существенно упрощён в консоли, а необходимость в нём, как правило, возникает при внесении изменений в сайт через систему управления содержимым (CMS). Для этого нужно использовать сочетание клавиш “Ctrl+F”, которая и откроет строку поиска.

Лайфхак №3: Просмотр сайта со смартфона или планшета

Для этого достаточно выбрать определённую иконку, которая находится перед вкладкой “Элементы”.

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

Лайфхак №4: Работаем с куками

В них содержатся сведения о пользователе, которые могут оказывать влияние на отображение сайта. Они доступны для удаления в настройках любого браузера, где, впрочем, для этого пришлось бы искать сайт в довольно длинном перечне… А вот в консоли это можно сделать в разы быстрее: достаточно перейти на вкладку “Приложение”, найти там раздел “Файлы cookie”, открыть его – и выбрать нужный сайт. Удалить куки можно нажав правую клавишу и “Удалить данные”, а потом перезагрузив сайт.

Лайфхак №5: Поиск нужных элементов

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

Что касается поиска элементов на древе сайта, то его можно осуществить нажав на иконку в левой верхней углу консоли. Будет запущен режим автоматического поиска, при котором элементы, «задеваемые» при движениях курсора по странице, будут выделяться в древе в разделе “Элементы”. В ряде из них будут появляться всплывающие окна, в каждом из которых обозначен класс объекта и его основные свойства.

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

1. Перейти в панель “Элементы”;
2. Выбрать “Ctrl+F” и запустить поиск;
3. Ввести в него текст из счётчика;
4. Изучить первый обнаруженный элемент;
5. Если это не то, что нужно, – использовать кнопки «вверх»/«вниз» для дальнейшего поиска.

Лайфхак №6: Отслеживание событий

Данное решение может быть интересным не только разработчикам, но и маркетологам. В консоли под него предусмотрена вкладка “Консоль”. В неё в автоматическом режиме выводятся ошибки, такие как:

• Сбои доступа аналитических модулей из-за “Adblock”;
• Сложности с загрузкой ряда элементов.

Для того чтобы проверить события web-аналитики (к примеру, отправить цель в виде события в “Yandex.Metrika”), достаточно ввести её код в консоль и нажать «Ввод». В ответ система может выдать ошибку неопределённого счётчика. Это происходит в том случае, если на сайте задан другой счётчик. Желаемый ответ “test” можно получить заменив его на правильный код.

Если же в консоли появился ответ “undefined”, это означает, что пользователь пытается отправить событие срабатывания цели из нового счётчика в старый. Его запись в новых счётчиках выглядит следующим образом: “ym(XXXXX3,’reachGoal’,’test’)” и никак не воспринимается старыми. А вот что касается старых, то объявление событий в них воспринимается одинаково и старыми и новыми счётчиками.

Вышеописанное позволяет отправлять события для “GoogleAnalytics” и “GoogleTagManager”. В последнем случае отслеживание может намного более детальным: в частности, оно позволяет просчитывать целый ряд значений, после чего – отправлять или нет эти результаты. Кроме того, оно может взять первый из обнаруженных пользователем на сайте элементов и отправить его содержимое в базу “GoogleAnalytics”.

Итоги

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

Содержание

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

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

Консоль разработчика (Development Console) — это панель в браузере, которая содержит несколько вкладок, отражающих те или иные элементы и свойства сайта. Эти вкладки называют инструментами разработчика, или DevTools.

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

Как открыть консоль в разных браузерах

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

Google Chrome

Вот способы вызова консоли:

• Нажмите на клавиатуре F12 (или Fn + F12) или комбинацию Ctrl + Shift + I.
• Кликните в любом месте страницы правой кнопкой и активируйте опцию «Просмотр кода страницы».
• Откройте настройки браузера — кликните на иконку с тремя вертикальными точками в правом верхнем углу страницы. Наведите курсор на «Дополнительные инструменты» — «Инструменты разработчика» и активируйте функцию.

Яндекс

Варианты запуска консоли в Яндекс Браузере:

• С помощью комбинации Ctrl + Shift + I.
• Через меню в правой части окна вверху. Путь: «Дополнительно» — «Дополнительные инструменты» — «Инструменты разработчика».

Safari

Это браузер для iOS. Способы открытия DevTools:

• Комбинация клавиш Command + Option + I.
• Меню настроек в верхнем левом углу окна. Необходимо последовательно активировать опции «Настройки» — «Разработка» — «Показать веб-инспектор».

Элементы консоли

В разных браузерах консоль разработчика может выводиться в различных частях экрана, например в Chrome — справа, в Mozilla — внизу. Незначительные различия могут быть и в дизайне вкладок. Однако структура и функциональные возможности консоли будут идентичными. Рассмотрим содержание вкладок на примере Google Chrome.

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

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

Также для HTML-разметки предусмотрено дополнительное меню, включающее разделы Styles, Computed, Layout, Event Listeners и прочие. С их помощью можно посмотреть CSS и другие элементы страницы.

Console. На этой вкладке вы можете изучать работу сайта в режиме реального времени: 

• увидеть данные об ошибках на сайте; 
• ознакомиться с выполняемым в данный момент JavaScript-кодом (действиями на сайте) — для этого используйте метод console.log;
• ввести свои команды и наблюдать за откликом системы или ее модулей;
• настроить фильтры на отображаемые сведения;
• искать информацию по тегу, фразе или слову.

Аналитика помогает улучшить работоспособность ресурса.

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

• картинки, шрифты и другие элементы дизайна;
• CSS-файлы;
• взаимосвязи с внутренними и внешними ресурсами — виджетами, API, аналитическими счетчиками.

Сам инструмент состоит из трех областей: навигатора с иерархически связанными файлами, исходного кода и окна отладки.

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

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

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

Memory. Это инструмент для отслеживания объема памяти, которую используют элементы сайта или приложения. «Тяжелые» компоненты, активно нагружающие систему, лучше оптимизировать.

Application. Вкладка, с помощью которой можно изучать и очищать загруженные ресурсы — кэш, базы данных, cookies.

Security. Это раздел с информацией о безопасности ресурса. Доступны следующие сведения:

• тип сертификата безопасности и сведения о его проверке;
• наличие TLS-соединения — современных протоколов;
• конфиденциальность связанных с сайтом ресурсов.

Lighthouse. Это панель аудита — ее инструменты автоматически анализируют сайт и предоставляют рекомендации для его улучшения.

Как консоль может облегчить жизнь

Рассмотрим, как команды для консоли в браузере помогают в работе маркетолога или другого непрофильного специалиста.

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

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

1. Нажмите одновременно Ctrl + F, чтобы запустить поисковую строку.
2. Впишите нужный вам элемент и нажмите на «Enter». Чтобы изменить внешний вид страницы, найдите файл CSS. Для поиска и изменения шрифтов выполните поиск по слову «font» — внутри строки вы увидите стандартный вариант начертания, например Arial или Sans Serif.

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

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

Картинка может быть установлена на сайте в виде обоев — тег background-image в CSS. В этом случае:

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

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

1. Откройте консоль и вверху, рядом с вкладкой Elements кликните на иконку в виде большого и маленького экранов смартфона.
2. В верхнем меню окна кликните на «Responsive» (или «Dimention: Responsive») и в выпадающем меню выберите нужную вам модель мобильного устройства.
3. Оцените юзабилити мобильной версии сайта. Если вы хотите узнать, как работает ресурс при нестабильном соединении, поменяйте в верхнем горизонтальном меню свойство «No throttling» на «Low-end мobile». Если появляются ошибки, попросите разработчика оптимизировать сайт.

Работа с куки. Эти файлы собирают информацию о посетителе, которая может мешать корректному отображению сайта. Чтобы очистить cookies:

1. Откройте консоль, затем — «Application», зайдите в «Cookies».
2. Выберите нужный сайт, затем кликните по нему правой кнопкой и запустите опцию «Clear». 
3. Закройте консоль и обновите страницу.

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

Главное в статье

• С помощью консоли разработчика можно оценить качество и удобство работы сайта и отредактировать его содержимое.
• DevTools позволяет маркетологу найти ошибки на сайте, создать более удачное оформление и передать разработчику запрос на оптимизацию.
• С HTML-кодом и CSS работают во вкладке Elements, а в разделе Sources просматривают иерархию сайта. Информация в других вкладках отображает работу сайта в режиме реального времени: код, трафик, скорость, память.
• С помощью консоли вы можете изменить шрифты и стили, скачать картинки с сайта, а также проанализировать работу его мобильной версии на различных устройствах и при разной стабильности сети.