Как открыть инспектор в браузере

Вся правда о Chrome (и не только) Web Inspector. Часть 1

Я постараюсь сделать самое полное и подробное описание возможностей Web Inspector, на русском языке.
В первой серии мы залезем в настройки, посмотрим, что умеет консоль и поиграемся с панелью «Elements».

Так как Web-Inspector не переведен на Русский, я буду сохранять оригинальные названия.

В качестве бонуса, приложу скриншот одной и самых первых версий, из далекого 2006го.

Какой версией пользоваться?

1. Все самые новые функции получает Google Chrome Canary Build.
2. Когда все стабилизируется, их добавляют в Ночные сборки WebKit, а затем в Стабильный Google Chrome.
3. Safari в этом смысле — наиболее консервативный браузер и отстает от Google Chrome Canary Build примерно на год.

Почти все описанное здесь, тем не менее, будет работать и в других версиях Web Inspector.

Запускаем Web Inspector

Есть несколько способов открыть Web Inspector:

• Control + SHIFT + I — Открывает панель элементов.
• Control + SHIFT + J или F12 — Открывает консоль
• Control + SHIFT + C — Позволяет выбрать элемент, с помощью мыши, в самом документе и открыть его во вкладке «Elements»
• Можно нажать на любом элементе на странице правой кнопкой мыши и выбрать «Inspect Element (Просмотр кода элемента)».
• Можно открыть Web Inspector из меню: Иконка с ключом -> Инструменты -> Инструменты разработчика (Tools -> Developer tools)

Вы можете открыть Web-Inspector для Web Inspector, для этого нужно открыть его в отдельной окошке:, а затем запустить его снова одним из приведеннм выше способов.

Настраиваем Web Inspector

Экспериментальные функции

Все новые инструменты сначала попадают в «экспериментальные функции». Чтобы включить их, зайдите в «about:flags», найдите там опцию Enable Developer Tools experiments (Включить экспериментальные инструменты разработчика).

После этого перезапустите браузер.

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

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

Настройки

Давайте откроем диалог настроек нажав на эту кнопку , в правом нижнем углу и посмотрим, что там есть интересного.

Dock to the right

Закрепляет Web Inspector в правой части страницы.
На больших мониторах это позволяет лучше использовать горизонтальное пространство, к тому же, позволяет легко менять широту видимой области браузера, что полезно для быстрого тестирования media queries.

По умолчанию Web Inspector снизу. Можно вытащить его в отдельное окошко, нажав на

Disable Cache

Выключает кэш. Весьма полезная опция, при отладке скриптов и стилей.
Еще можно очистить кэш из панели «Network», нажав там правой кнопкой и выбрав «Clear Browser Cache»

Disable JavaScript

Хочу отметить эту функцию здесь, потому что появилась она совсем недавно. Она… выключает Javascript .

Override device metrics

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

Emulate touch events

Позволяет эмулировать touch-события. Полезно, для тестирования мобильных приложений.

Enable source maps

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

Source maps (англ.), позволяют указать браузеру способ найти исходный файл.
Идея отличная, по пока позволяет работать только с Javascript .
В будущем обещают поддержку CoffeeScript , LESS , SASS и других чудо-технологий.

Log XMLHttpRequests

Preserve log upon navigation

Если выбрана эта опция, содержимое консоли будет сохранено даже при обновлении страницы.

Горячие клавиши

Чтобы посмотреть список горячих клавиш, откройте любую вкладку кроме консоли и нажмите там » ? » (В английской раскладке).

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

Здесь все довольно очевидно, важно знать, что практически везде работает автодополнение.

Консоль

Консоль позволяет вводить и исполнять любые Javascript команды. Если вы хотите написать выражение из нескольких строк используйте SHIFT+Enter .

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

• Она отлично помогает в качестве калькулятора, при несложных рассчетах
• В качестве игрального кубика: Math.ceil(Math.random()*6)
• В качестве быстрой записаной книжки: localStorage.setItem(0, «Номер телефона»);

• Tab работает только когда остался лишь один вариант дополнения
• Если вариантов несколько, вы можете выбрать любой и нажать вправо (или просто нажать мышкой)

Что показывать

Можно выбрать, что именно хотим видеть в консоли с помощью этой панели снизу:

Можно выбрать два элемента, если зажать CTRL . Здесь же можно выбрать фрейм, с которым мы хотим работать.

Избавляемся от сообщений об ошибках в расширениях

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

• Запускать Chrome в Incognito Mode ( CTRL+SHIFT+N )
• Использовать для откладки другой профиль, без расширений. Для этого нужен другой Google account. Чтобы добавить профиль нажмите иконку с гаечным ключом -> Настройки -> добавить пользователя (settings add user).

Изменяем размер шрифта

Почему-то CTRL+Scroll в консоли не работает.

Зато можно использовать CTRL + для увеличения шрифта, CTRL — для уменьшения и
CTRL + 0 для изначального масштаба.

У меня это работает только в Chrome Canary build, в стабильной версии увеличивается только сам документ.

Команды консоли

У консоли есть свои собственные команды, Так как Web Inspector написан на JS, список всех команд можно посмотреть в самой консоли, введя console._commandLineAPI . Давайте рассмотрим самые интересные из них.

Очищаем консоль

Есть несколько способов очистить консоль:

• Командой clear();
• CTRL+L (Эта комбинация в Chrome переводит фокус на адресную строку. Если она не работает в консоли, нажмите в любое место документа, а потом кликните на консоль).
• Нажать правой кнопкой и выбрать «Clear console»

Взаимодействие со вкладкой «Elements»

В переменных $0 — $4 — Последние пять выбранных элементов, в порядке выбора.
Любой DOM элемент, выведенный в консоли, можно открыть во вкладке «Elements», нажав правой кнопкой мышки.

Выбираем элементы

• $(«ID») — Выбор элемента по идентификатору.
• $$(«selector») — Выбор элемента по CSS селектору.
• $x(«selector») — Выбор элемента по XPath -селектору.

Изучаем объекты

Есть несколько функций, ползволяющих узнать больше, об элементе. В основном они дублируют функционал панелей из вкладки «Elements».

• inspect() — Открывает DOM-Дерево и находит там элемент
• dirxml() — Выводит элемент в виде xml
• dir() — Показывает список свойств элемента
• keys() — Выбирает все ключи из списка dir()
• values() — Выбирает все значения из списка dir()

Следим за событиями

Можно следить за всем, что происходит с элементом, с помощью функции

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

• «mouse» — для mousedown , mouseup , click , dblclick , mousemove , mouseover , mouseout , mousewheel
• «key» — для keydown , keyup , keypress , textInput
• «touch» — для touchstart , touchmove , touchend , touchcancel (Если включены в настройках)
• «control» — для resize , scroll , zoom , focus , blur , select , change , submit , reset
• Если не указывать второй аргумент, то все вышеперечисленные события плюс load , unload , abort , error , select , change , submit , reset , focus , blur , resize , scroll , search , devicemotion , deviceorientation .

Копируем информацию в буфер обмена

Результат любого выражения можно сразу скопировать в буфер обмена, используя функцию Copy() . Приятно и может сэкономить немного времени.

Вкладка «Elements»

Эта панель содержит в себе все DOM-Дерево нашей страницы, обновляющееся в режиме реального времени.

Каждый раз, когда на странице изменяются элементы, они обновляются в дереве и наоборот.

Если вы хотите выбрать какой-то элемент из документа, нажмите на кнопку с лупой внизу или CTRL+SHIFT+C и выберите любой элемент.
При наведении мышкой будут показан CSS пусть до элемента, его размеры и отступы.

Путь до элемента

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

Работа с деревом

Передвигаться по дереву можно стрелками (если вы в другой секции, то можно вернуть фокус, с помощью CTRL+ вверх/вниз ).

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

Чтобы изменить любой атрибут или значение, дважды кликните на элемент, или нажмите Enter
и доберитесь до него с помощью кнопки Tab ( SHIFT+Tab) .
Можно так же изменить весь HTML -код элемента, нажав F2 .

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

Drag&Drop

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

Контекстное меню

Нажав на элемент правой кнопки мышки, можно скопировать его HTML -код, или XPath -путь и установить DOM-брейкпоинты.

Подробная информация

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

Computed style

Список CSS -стилей, примененных к элементу. Если поставить галку в «Show inherited», то отобразятся все стили, включая браузерные.

Styles

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

Можно выключить любое выражение, убрав галку из чекбокса слева.

Раздел element.style показывает стили прописанные в style атрибуте в HTML коде документа,
а раздел Matched CSS Rules показывают все селекторы, заданные с CSS файлах и совпавшие с выбранным элементом.

Перемещаться между свойствами и значениями можно можно с помощью Клавиши Tab ( SHIFT+Tab) , чтобы вернуться назад).

Добавление правил и выражений

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

Можно добавить новое выражение в уже имеющийся селектор, нажав на закрывающую фигурную скобку правила (или начав изменять последнее выражение нажать Tab ).

Псевдоклассы

Нажав на эту кнопку , и проставив галки, вы сможете задать пэлементу псевдоклассы :active , :focus , :hover и :visited .

Отображение цветов

Нажав на кнопку с шестеренкой , As authored — покажет цвета в том формате котором они были заданы.

Изменение числовых значений

Числовые значения можно изменять с помощью клавиатуры.

• Alt + Вверх/Вниз изменяет значение на 0.1
• Вверх/Вниз изменяет значение на 1
• SHIFT + Вверх/Вниз или Page Down/Page Up изменяет значение на 10
• SHIFT + Page Down/Page Up изменяет значение на 100.

Metrics

Здесь можно увидеть размеры и отступы элемента (А если для элемента задан position, то и положение).

Вы можете изменить здесь любое значение, нажав на него дважды.

Интересно, что все размеры показываются в пикселях, даже если вы пропишете размеры в EM, они будут переведены в пиксели автоматически.

Properties

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

DOM-Breakpoints

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

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

Сохранение изменений

Web Inspector позволяет нам легко модифицировать CSS код. К сожалению, простого способа, позволяющегобыстро сохранить изменения не существует. Есть несколько вариантов

• Просто скопировать все изменения в вашу IDE.
• Изменения в CSS (кроме заново созданных правил) сохраняются в соотвествующих файлах. Нажав на «имя файла: номер строки» справа от селектора
• Есть расширение от ELV1S: ChromeDevtools Autosave (англ.), оно работает только локально и требует для установки сервера (англ.) на Node JS (англ.) зато позволяет сохранять изменения в JS и CSS автоматически.

Что дальше?

Немного полезных ссылок

• Peter Beverloo (англ.) — Подробно и регулярно о новых функциях Chromium
• Chrome Developer Tools (англ.)
• About Safari Developer Tools (англ.)
• — Modern Web Development (англ.) Хорошая, и очень подробная статья о Web Inspector.
• monitorEvents (англ.) — Немного о monitorEvents
• Youtube канал от разработчиков Chrome (англ.)
• Исходные коды (англ.)
• Багтрекер (англ.)
• Paul Irish (англ.) — Пол Айриш, занимается продвижением Chrome Dev Tools, есть хорошие статьи

В следующий серии

• Что делают оставшиеся 5 панелей.
• Отладка Javascript , debugger; и команды console
• Как получить Base64 код картинки штатными средствами Web Inspector.
• Кто такие «Show shadow DOM», «Snippets support» и «Show styles panel»
• Как превратить минифицированную версию срипта в прекрасную.
• Как отлаживать наш код с помощью JS, DOM, XHR и Event Listener брейкпоинтов.
• Как правильно и максимально эффективно использовать консоль из наших скриптов?
• Как отлаживать приложения для Ipad/Iphone/Androind смартфона с помощью Web Inspector?
• Как подключить консоль для моего любимого Coffee Script? А показывать в консоли ошибки PHP?
• Что за новый plugin-API для Web Inspector, и что с ним делать.
• Как посмотреть HTTP запросы.
• Как получилось, что dev-tools не переведены на русский.

Я часто использую Web Inspector в работе, но могут быть вещи, которые я не знаю, или забыл упомянуть, поэтому я буду рад любым исправлениям или дополнениям.

До следующей серии!

• Веб-разработка
• Google Chrome

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

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

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

Для решения задач такого рода в браузер встроены так называемые «Инструменты разработки» (Developer tools или сокращённо — devtools).

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

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

Google Chrome

В её JavaScript-коде закралась ошибка. Она не видна обычному посетителю, поэтому давайте найдём её при помощи инструментов разработки.

Нажмите F12 или, если вы используете Mac, Cmd + Opt + J .

По умолчанию в инструментах разработчика откроется вкладка Console (консоль).

Она выглядит приблизительно следующим образом:

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

• В консоли мы можем увидеть сообщение об ошибке, отрисованное красным цветом. В нашем случае скрипт содержит неизвестную команду «lalala».
• Справа присутствует ссылка на исходный код bug.html:12 с номером строки кода, в которой эта ошибка и произошла.

Под сообщением об ошибке находится синий символ > . Он обозначает командную строку, в ней мы можем редактировать и запускать JavaScript-команды. Для их запуска нажмите Enter .

Многострочный ввод

Обычно при нажатии Enter введённая строка кода сразу выполняется.

Чтобы перенести строку, нажмите Shift + Enter . Так можно вводить более длинный JS-код.

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

Firefox, Edge и другие

Инструменты разработчика в большинстве браузеров открываются при нажатии на F12 .

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

Safari

Safari (браузер для Mac, не поддерживается в системах Windows/Linux) всё же имеет небольшое отличие. Для начала работы нам нужно включить «Меню разработки» («Developer menu»).

Откройте Настройки (Preferences) и перейдите к панели «Продвинутые» (Advanced). В самом низу вы найдёте чекбокс:

Теперь консоль можно активировать нажатием клавиш Cmd + Opt + C . Также обратите внимание на новый элемент меню «Разработка» («Develop»). В нем содержится большое количество команд и настроек.

Итого

• Инструменты разработчика позволяют нам смотреть ошибки, выполнять команды, проверять значение переменных и ещё много всего полезного.
• В большинстве браузеров, работающих под Windows, инструменты разработчика можно открыть, нажав F12 . В Chrome для Mac используйте комбинацию Cmd + Opt + J , Safari: Cmd + Opt + C (необходимо предварительное включение «Меню разработчика»).

Теперь наше окружение полностью настроено. В следующем разделе мы перейдём непосредственно к JavaScript.

Как вызвать консоль?

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

Internet Explorer

1. Откройте нужную страницу в браузере Internet Explorer.
2. Нажмите F12.
3. Нажмите в правом углу. Откроется консоль.

Mozilla Firefox

1. Откройте нужную страницу в браузере Mozilla Firefox.
2. Нажмите Ctrl+Shift+K или перейдите → «Разработка» → «Веб-консоль».
3. Убедитесь, что у вас выделены светло-голубым все параметры, о которых отображаются ошибки.

Opera

1. Откройте нужную страницу в браузере Opera.
2. Нажмите Ctrl+Shift+J. Красным отмечены ошибки.

Google Chrome

1. Откройте нужную страницу в браузере Google Chrome.
2. Нажмите → «Дополнительные инструменты» → «Инструменты разработчика».
3. Перейдите во вкладку «Console».

Microsoft Edge

1. Откройте нужную страницу в браузере Microsoft Edge.
2. Справа сверху нажмите и перейдите в «Режим разработчика». Либо нажмите F12.
3. Перейдите во вкладку «Консоль».

Safari

1. Откройте нужную страницу в браузере Safari.
2. В строке меню нажмите «Safari».
3. Перейдите «Настройки» → «Дополнения».
4. Внизу окна установите галочку «Показывать меню „Разработка“ в строке меню».
5. В строке меню нажмите «Разработка» и выберите «Показать веб-инспектор».

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

1. Откройте нужную страницу в Яндекс.Браузере.
2. Нажмите в правом верхнем углу.
3. Перейдите «Дополнительно» → «Дополнительные инструменты» → «Инструменты разработчика».
4. Перейдите во вкладку «Console».

Консоль разработчика в браузере — подробный гид по использованию для маркетолога

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

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

Консоль разработчика (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 помогут вам увеличить конверсию сайта и объем продаж. Настройте окно обратного звонка, умную заявку или мультикнопку, чтобы пользователь смог оставить свои контакты в любое, даже нерабочее время. Программа обработает данные и передаст их в ваш колл-центр, а сотрудники оперативно свяжутся с клиентом и доведут его до сделки. За короткое время вы увидите, как вырастут продажи и уровень лояльности клиентов.

Виджеты Calltouch

• Увеличьте конверсию сайта на 30%
• Обратный звонок, промо-лендинги, формы захвата, мультикнопка, автопрозвон форм

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

Сквозная аналитика Calltouch

• Анализируйте воронку продаж от показов до денег в кассе
• Автоматический сбор данных, удобные отчеты и бесплатные интеграции

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

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