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

Содержание

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

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

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

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

• Ознакомиться со структурой и содержимым 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”.

Итоги

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

В Chrome применение пользовательских стилей к Developer Tools считается экспериментальным функционалом, поэтому для начала нужно:

1. Перейти по адресу chrome://flags/ в браузере.
2. Найти опцию под названием Enable Developer Tools experiments и включить ее, если она была выключена.
3. Перезагрузить браузер.
4. Зайти в Chrome Developer Tools, перейти в настройки и на вкладке Experiments включить опцию Allow custom UI themes.

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

• поискать в Интернет-магазине Chrome расширения по ключевому слову devtools theme
• поискать на github.com по ключевому слову devtools theme
• Themes for Chrome Developer Tools

Расширения не обязательно должны находиться в Google Play, их можно устанавливать из локальных папок. Для быстрого создания темы можно воспользоваться Yeoman генератором generator-devtools-theme, но можно сделать это и вручную следующим образом (инструкции для Chrome 32+, проверялся на Ubuntu 14.04):

1. Создать папку для своего расширения.

2. Файл manifest.json:

   {
     "manifest_version": 2,
     "name": "custom theme",
     "version": "0.0.1",
     "devtools_page": "devtools.html"
   }
   

3. Файл devtools.html:

   <script src="devtools.js"></script>
   

4. Файл devtools.js:

   var x = new XMLHttpRequest();
   x.open('GET', 'style.css');
   x.onload = function() {
       chrome.devtools.panels.applyStyleSheet(x.responseText);
   };
   x.send();
   

5. Файл style.css:

   #-blink-dev-tools .tabbed-pane {
     background: red;
   }
   

6. Перейти по адресу chrome://extensions/ в браузере.
7. Включить Developer Mode
8. Нажать на кнопку Load unpacked extension... и указать путь к только что созданной папке. Данное расширение должно появится в списке расширений.

Если после этого открыть Chrome Developer Tools, то часть панелей должна перекраситься в красный.

Советы для разработки пользовательских стилей:

• Chrome Developer Tools можно открыть в Chrome Developer Tools, так как это тоже HTML страница. Для этого нужно открыть Chrome Developer Tools в режиме отдельного окна, после чего нажать Ctrl + Shift + I, что откроет новое окно с Chrome Developer Tools для первого окна. Теперь во втором окне можно пользоваться инспектором элементов и редактировать стили первого окна налету. Во вкладке Network первого окна можно посмотреть, какие ресурсы загружается страница, а именно CSS файлы со стандартными стилями, чтобы взять их за основу.
• После изменения содержимого style.css в своем расширении, для того, чтобы они вступили с силу, необходимо зайти на страницу chrome://extensions/, найти свое расширение и нажать кнопку Reload рядом с ним. После этого, заново открыв Chrome Developer Tools, стили должны обновиться.

Для версий Chrome до 32 порядок был следующим (способ не проверялся):

1. Перейти в директорию в зависимости от ОС:

   • Windows: C:Users**Your username**AppDataLocalGoogleChromeUser
DataDefaultUser StyleSheets
   • Mac: ~/Library/Application Support/Google/Chrome/Default/User StyleSheets/
   • Linux: ~/.config/chrome/Default/User StyleSheets/

2. Заменить файл Custom.css своим.

Ресурсы:

• chromium issue 318566: User Stylesheets removal breaks all DevTools themes
• Skinning the Chrome Developer Tools Revisited — 11+ themes now available
• Theming Chrome Dev Tools

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

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

Зачем нужен режим разработчика в Google Chrome

Режим разработчика нужен следующей категории лиц:

• разработчикам расширений и веб-разработчикам;
• тем кто изучает html и css;
• тестировщикам готового продукта.

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

Открывается «Инструмент разработчика» через главное меню Хрома.

1. Жмём на кнопку в виде трёх полос и здесь наводим курсор на пункт «Дополнительные инструменты».
2. В следующем всплывающем окне выбираем, собственно, «Инструменты разработчика».
3. Или нажимаем комбинацию клавиш Ctrl + Shift + I для Windows и Command + Option + I на MacOS.
4. Либо можно просто кликнуть правой кнопкой мыши по любому элементу и в контекстном меню выбрать «Просмотреть код».

Основные кнопки меню и навигации

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

• В правой части окна инструментов расположена кнопка, которая закрывает инспектор.
• Рядом кнопка «кебаб» – при нажатии на нее появляется выпадающее меню, с перечнем других функций:
• Dock Side  — окно инструментов разработчика можно перевести несколько режимов:
  • слева;
  • снизу;
  • справа;
  • в отдельном окне.

• Hide console drawer скрывает консоль в нижней части окна — быстро открыть/закрыть консоль, находясь на любой вкладке, можно клавишей Esc.

Search

Инструмент Search позволяет искать по всем файлам ресурса, связанных с текущей веб-страницей. Чтобы активировать поиск нажмите комбинацию клавиш Ctrl + Shift + F.

Здесь есть дополнительные инструменты и полезные шорткаты, а также настройки и документация. Возле кнопки меню отображаются иконки предупреждения и ошибок, если они есть на странице. При клике на неё можно перейти к просмотру подробностей.

Адаптив

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

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

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

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

Вкладки инструмента разработчика

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

Elements

Первая вкладка представляет из себя то что называется «дом дерева»:

• узлы можно сворачивать/разворачивать;
• перемещать относительно друг друга;
• редактировать имена тегов и атрибуты.

Для быстрого перемещения используется стрелки на клавиатуре. Поиск в древовидной структуре сайта осуществляется с помощью комбинации клавиш Command + F на Mac или Ctrl + F на Windows. Уменьшение или увеличение масштаба осуществляется с помощью клавиш Command + + или — или Ctrl + + или —. Кликнув на имя элемента, на атрибут или на текст ноды (Node) их можно отредактировать.

Кликом по ноде правой кнопкой мыши на теговой части вызывается контекстное меню, где можно:

• добавить атрибут к ноде – Add attribute;
• редактировать атрибут – Edit attribute;
• редактировать ноду со всеми дочерними элементами в режиме простого текста;
• удалить элемент — Delete element. 

Скопировать: 

• весь HTML код с оборачивающим тегом;
• полный селектор, ведущий к этой ноде, body или head;
• скопировать JS;
• скопировать стили;
• XPath селектор, предназначенный для XML-документов;
• И собственно «Вырезать», «Скопировать» или «Вставить».

Можно принудительно перевести ноду в различные режимы:

• :active – создает эффект, как будто мы зажали на элементе левую кнопку мыши;
• :hover – воспроизводится эффект наведения курсора;
• :focus – как-будто поставили на элементе фокус. Например, клавишей Tab.
• :visited – изменяет цвет ссылки на фиолетовый, как-будто мы уже ранее перешли по ней.

Scroll into view – переход к ноде в области просмотра. Удобная штука особенно когда разбираешься в чужом коде.

Поставить breakpoint (Break on) на события:

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

• Модификация любого дочернего элемента ноды;
• Модификация атрибута ноды;
• Удаление ноды.

Если кликнуть правой кнопкой по текстовой части ноды, то вариантов чуть поменьше.

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

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

В правой части вкладки мы видим каскад CSS свойств выбранного элемента. В самом низу вычисленная блочная модель элемента: position, margin, border, padding и внутренняя концертная область. Выше всегда расположены псевдоэлементы after и before, если они есть.

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

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

В некоторых случаях можно здесь можно заметить строку user agent stylesheet, это стили браузера по умолчанию. Они наименее приоритетные и переопределить их можно практически любым способом задания CSS правил.

В самом верху секция element.style позволяет нам удобным образом определить содержимое элемента style текущего выделенного элемента.

Фильтр позволяет найти что-нибудь конкретное, свойство или его значение.

Также здесь есть дополнительные функции:

• :hov — это дублирование пунктов контекстного меню меню для принудительного присвоения состояний.
• :cls — позволяет отобразить анимацию элемента и присвоить ему искусственно селекторы со стилей, которые сбрасываются после перезагрузки страницы.

Computed

Следующая вкладка Computed на этой панели показывает полную вычисленную блочную модель и стили для текущего выделенного элемента.

DOM Breakpoints

Вкладка DOM Breakpoints — это описанные выше брейкпоинты на модификацию или удаление ноды. Если поставить брейкпоинт описанным ранее способом здесь он отобразиться. Здесь собраны все брейкпоинты для всех нод. Ими можно удобно управлять: включать/выключать без удаления.

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

Properties

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

Network

Следующая вкладка, которую мы рассмотрим называется Network. Функции доступные на этой вкладке очень полезны, так как позволяют отследить загрузку страницы и всех файлов, которые данная страница подтягивает при загрузке.

Давайте разберем весь функционал по порядку:

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

Здесь будет отображена следующая информация:

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

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

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

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

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

Еще выше над фильтрами есть более интересные и полезные функции.

• Record — кнопка по умолчанию включена и записывает всю историю загрузок, это именно то о чем мы говорили до этого.
• Clear — вторая кнопка очищает записанную историю.
• Filter — следующая кнопка просто скрывает или показывает строку фильтров.

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

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

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

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

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

Console

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

Рассмотрим более подробно функции консоли разработчика:

Чтобы очистить консоль нужно кликнуть правой клавишей в консоли и выбрать пункт clear console, или вызвать метод clear() прямо в консоли, или из кода, использовав для этого console.clear();

Пункт Log XMLHttpRequest в контекстном меню — это функция включает логирование всех XHR запросов в консоли.

У консоли есть много различных методов, мы познакомились с одним из них который называется clear(). Так же существуют другие методы:

Например:

• console.error() — для вывода ошибок, которые будут подсвечены красным в консоли;
• console.log() — для вывода любой информации, которую мы хотим увидеть в консоли, очень часто используется при отладке кода;
• console.warn() — для вывода оповещений в консоли, которые будут подсвечены желтым цветом с отличительным знаком.
• console.assert() — необходим для проверок. Первым аргументом он будет принимать условие, а вторым текст ошибки. Если переданное условие будет возвращать false, то выведется текст ошибки.
• console.group() — возможность группировать вывод. С его помощью мы задаем название для группы, а также указываем откуда начинается данная группа, все последующие методы вывода, которые будут использованы будут объединены в эту группу до того момента пока не будет вызван метод console.groupEnd().

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

Source

Фактически на этой вкладке мы можем просмотреть все файлы, которые подключены к нашей странице и посмотреть их содержимое.

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

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

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

Preferences

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

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

Memory

Внутри вкладки Memory неё есть несколько профайлеров, с их помощью можно отслеживать нагрузку, которую оказывает выполнение кода на ваш компьютер:

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

Application

На вкладке Application мы можем получить информацию о некоторых хранилищах, которые нам доступны. А именно: это Local Storage, заглянув в который мы можем посмотреть какие переменные хранит страница и их значения. Также Session Storage в котором также хранятся данные по принципу ключ — значение, как правило это данные  о сессии пользователя. Здесь же у нас хранилище в котором хранятся Куки, а также Cache Storage.

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

Security

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

Audits

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

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