Что такое f12 в браузере
Учимся работать с панелью разработчика браузера. Ликбез для чайников.
Решил написать эту статью под впечатлением от некоторых пользователей, являющихся администраторами нескольких сайтов, но не имеющими представления о консоли браузера, поэтому постоянно достающими вопросами типа «как мне сменить цвет кнопки» или «у меня не работают личные сообщения, что мне делать?». А на вопросы «какие ошибки выводятся в консоли?» или «что возвращает сервер?» лишь предлагают самому посмотреть.
Вебмастер, который не умеет пользоваться инструментами или вообще не знает о них, никуда не годится, ему стоит приложить определенные усилия в своем развитии и в перерывах между созданием очередного веб-шедевра прочитать данную статью, дабы самостоятельно решать проблемы на своем сайте или, по крайней мере, давать более полную информацию на запросы службы поддержки.
Скажу сразу, в данной статье не будет описываться весь функционал панели, но подробно будет рассмотрен функционал и возможности нескольких, наиболее интересных для начинающего веб-мастера вкладок.
Информации получаемой из панели зачастую достаточно, чтобы указать на причину возникновения практически любой проблемы на сайте, пренебрегать этой информацией, как минимум, неразумно.
В наше время, разработчики браузеров не забывают о панели разработчика, она обязательно имеется в любом, более менее современном браузере и можно сказать, что ее наличие является стандартом, так что вы, скорее всего, найдете ее в своем браузере, даже если ранее не подозревали о ее существовании.
Браузеров много, нюансов работы с ними еще больше, но в качестве примера я буду приводить панель браузера Chrom, но пугаться не стоит, принцип ее работы практически у всех браузеров одинаков и сравнивая функционал одного браузера с другим, вы зачастую найдете много общего между их панелями.
Итак, давайте посмотрим на эту панель.
Нажмите клавишу F12 и появиться панель разработчика.
Сразу разбежались глаза, куда смотреть, на что нажимать непонятно. Давайте будем идти по порядку.
По-умолчанию открыта первая вкладка «Elements».
В этой вкладке выводиться html-код текущей страницы.
Внутри вкладки можно получить полную информацию не только о расположении html-блоков, но и просмотреть какие именно js и css-файлы подключаются при ее загрузке и даже ознакомиться с содержимым этих файлов, просто нажав на соответствующую ссылку в коде страницы.
Справа от кода страницы выводится колонка с css-стилями и правилами действующими для текущей страницы или html-блока, который будет вами выделен.
Вот тут и начинаются чудеса. Вкладка позволяет редактировать как html-код, так и css-правила.
Выберите интересующий html-блок, выделите его и в правой колонке отобразятся его css-стили. Нажмите правой кнопкой мыши на этом блоке и выберите одно из предложенных действий «Edit as HTML» и вы сможете редактировать html-код данного блока. Результат данного редактирования вы увидите сразу по завершению, все редактирование происходит, так сказать, в режиме онлайн, сразу на странице выводится результат.
Не стоит думать, что изменения html и css в этой вкладке каким то образом влияют на реальное положение дел на вашем сервере и вы реально редактируете html и css файлы вашего сайта. Все это происходит лишь в браузере и все изменения вам надо будет перенести в эти файлы самостоятельно.
Смотрим в колонку со стилями и замечаем, что рядом с каждым стилевым блоком выводится не только ссылка на css-файл, но и строка, где это правило размещается внутри указанного файла. Воспользовавшись этой информацией вы легко найдете нужный файл на сервере и место для редактирования внутри этого файла.
Освоив данную вкладку вы сможете решать вопросы связанные с внесением небольших изменений в верстку страницы и стилевое отображение ее отдельных элементов, что существенно сэкономит ваше личное время и нервы. Данная вкладка обязательна к изучению в первую очередь.
Данная вкладка не дает таких больших возможностей по редактированию как предыдущая, но информация, получаемая в ней не менее ценна. Тут мы можем отслеживать все запросы, отправляемые к нашему серверу во время загрузки текущей страницы и получить ответы нашего сервера в результате этого запроса. Возможно, эта информация слишком сложна для начинающих вебмастеров, где еще мы можем узнать ответ на вопрос «Почему когда я отправляю личное сообщение в чате оно не отправляется?») Если вы решите найти ответ на этот вопрос и вопросы подобные этому сами, то смотрим во вкладку «Network» во все глаза.
Страницы современных сайтов уже не являются статичными html-болванками как это было ранее, скрипты страницы могут сами постоянно посылать различные запросы к серверу или при определенных действиях пользователя, вот они то и будут нам интересны в первую очередь.
Давайте рассмотрим, какое то пользовательское действие которое отправит запрос на сервер и получит от сервера ответ, например, изменение отправление личного сообщения из приватного чата. Открываем страницу чата, открываем панель разработчика на вкладке «Network» и пытаемся отправить сообщение в чате.
Сразу после того, как будет нажата кнопка «Отправить» во вкладке панели мы сможем наблюдать запрос к файлу сервера, а если нажмем на него, то получим полную информацию о том в какой именно файл отправлялись данные и какие именно данные.
Ответ от сервера можно получить во вкладке Preview данного запроса. Очень важно, чтобы ответ был ожидаемым, тогда и произведенное пользователем действие будет выполнено, иначе возникает ошибка. Если она возникает, то как раз ответ сервера и даст знать о причинах проблемы.
Так что не проходим мимо этой вкладки стороной, информация получаемая из нее очень интересна и полезна, хотя бы для общего развития. Всегда полезно знать, что куда уходит и откуда что приходит)
Иногда бывает так, что вроде нажали на кнопку рейтинга или отправили сообщение в личном чате, а ничего не происходит, посмотрели во вкладку «Network» панели браузера, но запросы к серверу просто не отправляются, вероятнее всего, возник конфликт в js-скриптах сайта, значит самое время перейти во вкладку «Console».
Вкладка «Console» выводит лог проблем возникших при загрузке страницы в js-скриптах, чтобы их было можно отследить. Там же могут выводится ошибки возникшие при попытке загрузить отсутствующий файл при загрузке текущей страницы. Критичные проблемы отображаются красным цветом и зачастую именно их решение возвращает работоспособность всему сайту, если она была нарушена.
Информация из вкладки Console очень полезна для вебмастера, позволяет сразу отследить возникновение конфликтов в скриптах при загрузке страницы или банальные ошибки. Текст ошибки сообщает о ее типе и месте ее возникновения, указывается js-файл и место в этом файле, где ошибка была замечена, что помогает в решении этих ошибок.
Загляните в эту вкладку при загрузке страниц на своем сайте, что вы там увидите? Много ли красных сообщений? Очень часто достаточно только одного сообщения об ошибке в этой вкладке, чтобы все скрипты на сайте перестали работать, поэтому пренебрегать этой информацией явно не стоит, а если заметили записи в консоли, то стоит предпринять действия для выявления и устранения проблем. В идеале в консоли красного вообще не должно быть.
Надеюсь теперь, ознакомившись с перечисленными вкладками панели разработчика, вам станет проще работать со своими сайтами, выявлять и устранять возникшие проблемы не обращаясь к специалистам или предоставлять этим специалистам более исчерпывающую информацию о положении дел.
Значение клавиш F1-F12: на обычной клавиатуре и на ноутбуке
Доброго времени суток!
Сегодняшняя заметка будет носить справочный характер (предназначена в первую очередь для не искушенных пользователей, да и мне будет куда сослаться, чтобы подсказать при вопросах с клавиатурой. ).
Так вот, к теме. Практически на любой клавиатуре, помимо алфавитно-цифровых клавиш, присутствует ряд функциональных F1-F12 (см. фото ниже 👇). Предназначены они для ускоренного обращения к некоторым функциям Windows (да и ПК/ноутбука в целом), а в некоторых случаях — без них и не туда, и не сюда.
Ниже я приведу все основные их значения, а также краткие примеры, когда и в каких случаях их стоят задействовать. Освоив их, вы сможете куда быстрее работать за ПК, и меньше использовать мышь 👌.
На обычной классической клавиатуре
Под «классической» клавиатурой понимается самая обычная типовая модель, у которой на функциональных клавишах нет никаких доп. значков (т.е. всё по «дефолту»).
Отмечу, что перечисленные ниже функции актуальны в том числе и для ноутбучной клавиатуры (только у них, как правило, есть доп. возможности, но об этом во второй части статьи).
Функциональные клавиши F1-F12 на типовой клавиатуре
Мало-используемая клавиша, в основном нужна в прикладных программах. Например, в MS Office с помощью этой клавиши можно проверить орфографию документа, в файловых коммандерах — создать новый каталог.
В некоторых BIOS/UEFI — переключение с расширенного меню на обычное (и обратно).
F9-F12
Разумеется, в добавок к выше-перечисленному в некоторых приложениях могут быть доп. свои значения (которые на них «повесели» разработчики). Кстати, вы также можете на них добавить нужные вам 👉 функции, например, с помощью приложения Volume 2.
На клавиатуре ноутбука
На ноутбуках, помимо выше-оговоренных функций, есть дополнительные. Чтобы они сработали, клавиши Fn-F12 нужно нажимать совместно с FN.
Я в качестве примера взял ноутбук ASUS (см. скрин ниже 👇).
Фото клавиатуры ноутбука Asus (ZenBook 310)
Значок с буквой «Zz»
Подобный знак означает отправку ноутбука в сон (режим гибернации, в зависимости от предустановок).
Значок с самолетом
Предназначена для быстрого включения режима «в самолете» (все сети будут откл.). Полезна только для тех, кто часто летает на самолетах.
F3-F4
Значок с клавиатурой и «солнышком»
Прибавить/убавить яркость подсветки клавиатуры (есть не на всех ноутбуках). Полезно при работе в темноте.
F5-F6
Значок с прямоугольником и «солнышком» по центру
Регулировка яркости экрана (часто-используемая штука, особенно для ноутбуков, которые нередко приходится переносить из одного помещения в другое).
Значок прямоугольника и крестика внутри
Быстрое выключение экрана. Например, чтобы никто не увидел, чем вы сейчас занимаетесь.
Значок с двумя прямоугольниками
Быстрая настройка изображения при подключении ноутбука к ТВ или доп. экрану/проектору.
Быстрое включение/отключение тачпада (иногда он очень мешает, например, при наборе текста).
F10-F12
Значки с динамиками
Отключение звука, регулировка громкости. Очень полезные функции, когда у вас открыто какое-нибудь приложение и до ползунков регулировки в Windows (аудио-плеере) добраться нелегко.
Также нередко на F1-F12 размещают функции для быстрого включения/отключения адаптеров Wi-Fi, Bluetooth, регулировки системы охлаждения (это на игровых ноутбуках) и пр.
Google Chrome панель разработчика
Google Chrome включает в себя огромный набор функционала для тестирования сайтов веб-разработчиком. Панель разработчика открывается нажав F12: 
Elements
Перед нами наше HTML-древо сайта разложенное по полочкам. Расположение внутреннего контента может отличаться, в данном случае я разбил на 2 колонки, где слева HTML-древо, а справа CSS свойства выбранного элемента (тега или тега, оба варианта применяются). Изменяется HTML-древо достаточно просто, выбираете нужный Вам тэг и нажимаете F2, далее изменяете HTML-код блока, где вы можете не только его содержание изменить, но и добавить другие атрибуты этому тэгу, а так же добавить другой тег перед или после данного тэга. При наведении мышкой на данный тэг на экране будет подсвечена область данного тэга, где оранжевым и зеленым цветом отмечены padding и margin. Так же хочу заметить одну важную особенность, если разработчик допускает ошибку и не применяет clear:both после float:left чем нарушает работу верстки, то область указанного тэга не будет видна или будет отображаться с ошибкой. Самая распространенная ошибка, между прочим!
Итак, практическая задача, создайте 3 колонки через float:left с содержанием картинки + текста с одним классом. Далее через панель разработчика добавьте рамки, подкорректируйте расстояние между блоками и текстом используя внутренние и внешние отступы (меняя свойства класса), измените цвет текста в каждом блоке на свой цвет (тут уже element.style). Этого будет вполне достаточно, хотя для себя можете поэкспериментировать меняя таким образом код и других сайтов. Но помните самое важное, Вы не изменяете настоящие html и css файлы, а только временные конкретно данной страницы и как только вы обновите страницу, то и слетят все Ваши настройки!
Console
Без неё и жизнь не мила у любого программиста 🙂 Абсолютно все WARNING и ERROR записываются в данный блок. Убедитесь, что у вас выводятся все ошибки проверив следующим образом: нажмите на иконку filter в данном разделе и выберите вкладку «all», то есть выводить все ошибки. По умолчанию установлен всегда «all», но зная Вас, мои ученики. 🙂
Логи сохраняются в рамках данной страницы с момента открытия консоли, а не загрузки страницы. Поэтому если загрузить страницу, а после открыть консоль, то ошибок вы не увидите, хотя ошибки на странице присутствуют! Поэтому сначала мы открываем консоль, а потом перезагружаем данную страницу! Теперь справа от ошибки будет указываться файл на котором произошла ошибка и даже сама строчка. Хочу заметить, что в консоль так же попадают ошибки различных установленных плагинов и расширений для Google Chrome включая вирусы (они тоже прописываются как плагин или расширение), а так же при работе Ajax и других внешних скриптов может указываться строчка 1 или 0 в исполняемом файле, а никак не строка, откуда этот самый AJAX был выполнен. Это стоит брать во внимание!
О том, что наши заметки попадают в консоль из console.log я писать не буду, Вы итак это знаете из общего курса 🙂
Sources и Network
Ваш внешний вид данного раздела может немного отличаться, там может быть включен overview (соответствующая иконка с графиками), что я обычно выключаю. В левой колонке у нас запросы, в правой идут ответы. При этом ответы так же разделены на подразделы. Первый запрос всегда идёт к исполняющему файлу (указан url), если закрыть правую колонку, то можно увидеть подробности запроса, а именно: метод запроса, как долго он выполнялся (что будет свидетельствовать на сколько сеть и сайт работают хорошо, объем файла. Закрыв правую колонку можно вновь открыть повторно кликнув на интересующий нас файл для анализа.
Preview и Response
Ajax и панель разработчика
Разрабатывая код с Ajax мы делаем следующее:
1) Пишем код, вешаем событие на кнопку.
2) Открываем панель разработчика, обновляем страницу.
3) Проверяем, что ошибок нет, устанавливаем Preserve log, так как в случае переадресации нам надо перехватить ошибку.
4) Кликаем на кнопку вызывающую Ajax запрос. Теперь если переадресации не было смотрим внимательно сначала в вкладку Console и убеждаемся, что произошла ошибка. Ошибка может быть любого плана, не только неправильный ответ с сервера, но и опечатка в самом коде. Если в console ошибки нет, или же она не ясна как, например, это строчка 0 или 1, то продолжаем анализировать вкладку Network.
5) Во вкладке Network убеждаемся, что запрос был отправлен на корректный URL, статус ответа 200, а не 404, анализируем сам запрос, то есть открываем вкладку Response и смотрим внимательно верный ли ответ прислал нам файл, именно тот, который мы ожидаем, или в ответе присутствует мусор в виде лишнего кода, ошибок и т.д. Если Вы понимаете какой ответ ждёте от сервера, то вы без труда можете сравнить ожидаемое с реальностью, увидеть ошибку и исправить её!
П.С. Всем моим гостям я желаю успешного программирования, а с учеников требую идеального понимания того, что я тут расписал. И если я когда-нибудь спрошу у Вас был ли отправлен AJAX запрос на сервер и какой ответ пришел, то Вы должны дать мне корректный ответ, а не моргать глазами как «блондинки». 🙂
Данная статья в будущем ещё будет дорабатываться, возможно!
Русские Блоги
Краткое введение в функцию F12 в браузере Chrome
С F12 есть Инструмент интерфейса разработчика, поэтому я буду продолжать исследовать, после проверки нескольких блогов и информации я подытожил свое собственное понимание и память, я надеюсь помочь друзьям, которые нужно, хеэ!
Сначала введите три верхние функции в инструменте разработчика Chrome, а также три функциональных страница, которые используют элементы, консоль, исходные коды и сеть (сеть).
1、 Элементы
Просмотр кода элемента : Нажмите, как показано
Стрелка (или используя ярлыки клавиш) Ctrl+Shift+C ） Введите режим элемента выбора, затем выберите элемент, который вы хотите просмотреть со страницы, а затем найдите конкретное местоположение исходного кода элемента в столбце элемента элемента разработчика (элементы).
Просмотр свойств элемента : Вы можете просмотреть деталь от позиционного исходного кода, такого как класс, SRC, вы также можете просматривать все свойства в сторону правой, как показано на следующем представлении изображения
Изменить код и свойства элемента : Вы можете прямо дважды щелкнуть деталь, которую вы хотите изменить, то введите изменения или проверьте щелчок правой кнопкой мыши после того, как вы хотите изменить раздел, как показано ниже
Примечание: Эта модификация также вступает в силу только на текущей рендеринге страницы и не изменяет исходный код сервера, поэтому эта функция также используется в качестве эффекта отладки страницы.
Введение в боковую панель правой стороны: Как показано ниже
2、 Приставка
3、 Исходный код Его основная функция описана ниже
Запросить файл Описание файла Описание
Всего четыре модуля:
Приведенное выше мое резюме, контент немного больше, я надеюсь, что каждый может увидеть пациента. ， Chrome devtools также имеет много очень полезных функций, вы можете продолжать исследовать Я надеюсь, что мое резюме полезно для всех.
Главные лайфхаки в консоли разработчика в браузере: так вы улучшите сайт и достигнете своих KPI
Консоль разработчика позволяет увидеть внутреннюю структуру любого интернет-ресурса, отследить происходящие на нем события и протестировать правки в реальном времени. Инструмент крайне полезный – отпугнуть может только достаточно навороченный интерфейс, к тому же на английском. Исправляем это!
Разберем основные возможности консоли разработчика, которыми может воспользоваться маркетолог, и научимся ими пользоваться.
Первый взгляд и инструментарий консоли
Прямое предназначение Development Console – это интерактивная работа с содержанием сайта прямо в браузере. У такого взаимодействия несколько очевидных плюсов:
Эти преимущества делают консоль разработчика полезнейшим инструментом не только для программиста. Верстальщики, тестировщики, специалисты по базам данных, дизайнеры и руководители проектов всего мира пользуются ей для решения повседневных задач. Мы же рассмотрим инструмент с точки зрения полезности для маркетолога.
Маркетологи видят сайт прежде всего как канал продаж. А чтобы он продавал лучше, требуется решать вопросы юзабилити, удобства, скорости взаимодействия, приятного дизайна – к продающим качествам можно отнести очень много параметров. Чтобы оптимизировать содержание ресурса, требуется оценить его и правильно поставить задачу разработчику. Вот здесь-то и пригодится консоль разработчика.
Чаще всего вы будете использовать консоль для получения информации о конкретном элементе сайта. Наведите на него и нажмите правую кнопку мыши. Вы увидите пункт меню, в котором сможете вызвать консоль разработчика:
Мы будем рассматривать консоль в браузере Google Chrome, но в других она отличается несильно. Из меню видно, что также вы сможете осуществить запуск через сочетание клавиш Ctrl + Shift + C. Еще один вариант – нажать f12. По умолчанию интерфейс открывается в правой части окна:
Поначалу кажется, что в консоли очень много элементов и панелей, в которых разобраться будет чрезвычайно сложно. К тому же интерфейс не русифицирован. На самом же деле информация структурирована, и потребуется совсем немного времени, чтобы запомнить, где и что находится. Тем более что маркетологу не обязательно знать все детали консоли разработчика.
Для чего же может потребоваться изучение элемента сайта? Чаще всего – для настройки событий, передаваемых в аналитические сервисы («Метрику», Google Analytics). Сайт, как мы знаем, состоит из элементов и имеет древовидную структуру, благодаря которой каждый подэлемент занимает свое место и показывается пользователю в строго установленном порядке. Существуют контейнеры, абзацы текста, ссылки, изображения, кнопки, списки, видео… Интерес к тому или иному блоку напрямую влияет на продающие качества сайта, соответственно, работа с каждым из них будет означать потенциальное улучшение воронки продаж.
В случае выше мы выбрали для изучения кнопку «Подробнее». Консоль при этом поделилась по умолчанию на три части: инспектор Elements («Элементы»), панель Styles («Стили») и собственно Console.
В панели Styles можно увидеть, какие свойства настроены для выбранного нами элемента, чтобы он отображался именно так, а не иначе. Вы сможете редактировать их прямо через консоль разработчика, наблюдая изменения в браузере. Но об этом поговорим чуть ниже.
Поскольку у ссылки есть параметр HREF, указывающий напрямую адрес страницы, то консоль уже сослужила нам хорошую службу – мы можем поставить на отслеживание в аналитике клики на соответствующий элемент с таким адресом в href.
В блоке Console при этом мы видим ситуацию с событиями, происходящими при нашем взаимодействии с сайтом. В частности, можно заметить, что счетчик Google Analytics пытается считать наши данные, но блокируется встроенным в браузер Adblocker’ом.
Элементы консоли разработчика и их назначение
Чтобы избавиться от ощущения сложности и громоздкости консоли, познакомимся отдельно с каждым ее элементом. В дальнейшем эта информация пригодится нам, чтобы быстрее переключаться с одного инструмента на другой.
Вы можете изменять расположение блоков на панели, корректировать их размер и даже располагать консоль в других частях окна. Чтобы изменить размер блока, просто наведите курсор на границу между блоками и потяните в нужную сторону. Для смены представления нажмите на значок из трех вертикальных точек в правой верхней части:
В открывшемся меню обратите внимание на значки в поле Dock side. С их помощью можно разместить консоль разработчика в левой, нижней или правой (как сейчас) части окна, и даже сделать ее отдельным окном поверх текущего.
Собственно, интерфейс состоит из основной панели (на скриншоте выше – блок Elements), панели свойств (на скриншоте – блок Styles) и консоли вывода Console. Первым делом рассмотрим элементы основной панели.
Здесь можно увидеть дерево элементов сайта. Если до запуска консоли мы не выбирали конкретный элемент, то сможем увидеть структуру сайта в «свернутом» виде:
Ориентироваться в содержании несложно: фиолетовым цветом подсвечиваются объявленные элементы, коричневым – их свойства и параметры, синим – содержание этих параметров, зеленым – комментарии разработчика. Ссылки обозначаются подчеркиванием.
Каждый элемент можно раскрыть, нажимая на серый треугольник слева от него. Так вы проваливаетесь внутрь дерева подэлементов, каждый из которых также может быть развернут.
По сути копирует ту панель, что вы уже видели внизу консоли разработчика. Выбирая ее на основной панели, вы раскрываете консоль на всё рабочее пространство, чтобы анализировать работу сайта «в реальном времени»:
При загрузке сайта здесь будут отображаться различные события, в том числе и ошибки. Регистрируя их вручную или автоматически, вы можете улучшать работоспособность сайта и отдельных его элементов.
Кроме того, в консоли можно вводить собственные команды, наблюдая за тем, как будет реагировать сайт или его модули. Чаще всего маркетологи пользуются этим, чтобы отправлять события в счетчики аналитики вручную, но об этом чуть позже.
В первую очередь служит для отображения связи сайта с внешними и внутренними ресурсами. Чаще всего используется именно разработчиками, но мы можем увидеть некоторую полезную информацию и для себя. В частности, здесь видна связь сайта со счетчиками аналитики, виджетами соцсетей, различными API.
В середине панели отображается код источника данных, который можно править для отладки взаимодействий. Если вы хорошо разбираетесь в функционировании тех или иных подключаемых ресурсов, то можете заняться этим сами. В противном случае лучше оставить работу программисту.
Здесь, исходя из названия, можно ознакомиться с тем, как различные элементы сайта и подключаемые модули влияют на загрузки сетевого соединения. Консоль ведет запись сетевого журнала, из которого вы сможете узнать, какие именно части вашего веб-ресурса стоит оптимизировать.
Красная «лампочка» записи в левом верхнем углу говорит о том, что запись сетевого журнала сейчас ведется, там же ее можно остановить. Фильтр позволяет выбрать только те запросы, которые вам интересны.
Здесь можно увидеть, какие запросы приходят на сервер, отобразить получаемые ответы, понять, какие ресурсы нагружают сеть сильнее всего. Для каждого запроса виден его статус, тип, инициатор, размер передаваемых данных и скорость их передачи в миллисекундах. В случае на скриншоте мы видим обычные для сайта пинги, оценивающие, что пользователь еще находится на нем, а также взаимодействие с «Вебвизором» счетчика «Метрики» под соответствующим номером.
Включает запись полного взаимодействия пользователя с сайтом. Она нужна, чтобы оценить время, затрачиваемое на работу со всеми составляющими ресурса. Начните запись по нажатию на соответствующую кнопку, затем походите по сайту и выполните интересующие вас действия. Остановите запись и просмотрите ее содержание:
Изучение записи позволит вам увидеть работу абсолютно всего на сайте: что и какое время грузится, сколько времени и ресурсов затрачивает. Сравнивая полученные значения с оптимальными, вы можете давать задания разработчикам оптимизировать тот или иной кусок сайта.
Отображает распределение времени исполнения и памяти страницей (или приложением) на каждый внутренний ресурс. С помощью выстраиваемого консолью профиля вы можете оценить, какие части сайта больше нагружают систему. Создайте снэпшот («снимок» памяти) и изучите его содержимое для конкретной страницы сайта:
Списки могут быть отсортированы по любому параметру, что позволяет вам найти ключевые для оптимизации сайта объекты. Сюда включаются и внутренние, и внешние, и системные ресурсы.
Вопреки названию, работает не только с интернет-приложениями. С ее помощью вы можете исследовать загруженные элементы, такие как базы данных, куки или кэш.
Здесь отображается информация о безопасности сайта, в частности – о безопасных соединениях по HTTPS. Если вы знаете, что такое сертификаты безопасности, то здесь сможете работать с ними и просматривать интересующую информацию.
Ранее называлась Audits, и по-прежнему позволяет производить аудиты качества организации сайта. Консоль производит автоматический анализ сайта в представлении как для ПК, так и для мобильных, а затем дает рекомендации относительно улучшения отдельных моментов.
Инструмент делает по сути то же самое, что и отдельный сервис анализа сайтов от Google. Чтобы не искать каждый внутренний ресурс на сайте вручную, можно воспользоваться этим автоматическим анализом и получить список наиболее важных из них с показателями эффективности и нагрузки.
Ну а мы перейдем к элементам панели свойств и параметров.
Чтобы придать элементам сайта уникальный внешний вид, используются файлы стилей CSS. Для связи со стилями применяются классы, причем на дочерние элементы сайта в дереве могут быть применены классы родительских элементов. Чтобы отразить структуру применения стилей, и работает вкладка Styles. Кроме собственно содержания соответствующих файлов CSS для элементов, она показывает стиль наглядно:
На скриншоте показана нижняя часть панели Styles, поэтому содержание основного файла с классом для тега «Новости» мы не видим, зато видно, какие свойства приобретаются от родительских объектов, таких как body. Разноцветный прямоугольник дает представление о размерах объекта и его параметрах padding, border и margin (внутренние и внешние отступы и граница обводки).
Показывает полную модель для выделенного элемента, вычисленную из всех стилей. Здесь дублируется визуальное блочное представление с предыдущей вкладки, а все стили перечислены списком. Такое представление в некоторых случаях будет удобнее для работы со стилями.
Отображает имеющиеся на сайте элементы типа CSS Grid (представление в виде двухмерной сетки). Поскольку такие разметки используются нечасто, опустим подробное описание вкладки.
Выдает все обработчики событий для выделенного элемента или страницы. К событиям можно отнести клики, визуальные изменения, работу курсора мыши, скроллинг, загрузку и т. п. «Слушать» события на элементе могут, например, счетчики аналитики или системы работы с тегами, такие как Google Tag Manager. Чтобы понять, будут ли работать настроенные вами теги, можно воспользоваться данной вкладкой и увидеть, есть ли нужный обработчик на выбранном элементе – кнопке, ссылке или другом интересующем вас объекте.
В основном нужна разработчику, поскольку позволяет установить на элемент точку остановки (breakpoint), которая останавливает срабатывание кода сайта. Например, вы сможете узнать, как будет выглядеть сайт после изменения определенного элемента, если вам кажется, что его работа вызывает общие проблемы работоспособности.
Точки устанавливаются на элемент в панели Elements, для этого надо нажать на выбранном правую кнопку мыши и выбрать «Break on».
Показывает все свойства выбранного элемента. Нас как маркетологов эти свойства в полной мере интересовать не будут.
Выводит дерево уровней доступа для выбранного элемента. Эта информация также интересна сугубо разработчикам, поэтому мы затрагивать вкладку более не будем.
Вместо этого перейдем к демонстрации рабочих способов взаимодействия с сайтом с помощью консоли разработчика.
Лайфхаки для интернет-маркетолога по использованию консоли разработчика
В этом разделе мы рассмотрим простые, но полезные способы применения консоли разработчика.
Видоизменение сайта «на лету»
Одна из самых полезных для маркетолога возможностей консоли разработчика – это редактирование сайта вручную с автоматическим отображением изменений. Вы редактируете сайт исключительно для себя, никакие правки не применятся к нему в целом, но вы можете запомнить произведенные изменения и внести их уже на сервере. Всё очень просто: любые элементы и параметры в консоли могут быть не только просмотрены, но и изменены:
Нужный текст можно править, для этого два раза щелкните по нему левой клавишей.
Схожим образом можно играть с любыми элементами, изменяя сайт как вам нравится, чтобы в будущем применить эти изменения для оптимизации и улучшения. К тому же это позволяет быстрее поставить задачу разработчику, дизайнеру или верстальщику. А если вы сами осваиваете HTML, CSS и движки, то консоль разработчика дает неплохое подспорье в их изучении и применении знаний на практике без вреда для сайта. Как только вы перезагрузите его, все изменения пропадут.
Конечно же, можно менять и стили CSS:
Стили напрямую влияют на вид элементов на сайте, поэтому с их помощью можно оптимизировать юзабилити. Если какие-то объекты кажутся вам слишком мелкими, крупными или расположенными не там, где нужно, смело пробуйте другие варианты: может быть, они окажутся лучше и вы примените изменения для всего сайта. Вы также можете добавлять новые объекты в Elements, накладывая на них имеющиеся или собственные стили.
И не забывайте играть со шрифтами и изображениями:
Поиск элементов, шрифтов
Если вы редактируете сайт через CMS, то часто можете столкнуться со сложностями поиска нужных элементов на FTP или в личном кабинете менеджера. Воспользуйтесь консолью, чтобы найти местонахождение элемента, а затем исправьте файл и его содержимое:
В любой части консоли работает сочетание клавиш CTRL + F, позволяющее открыть строку поиска и найти через нее любое содержимое. Чтобы отредактировать внешний вид, потребуется найти файл CSS, он автоматически покажется вам в Styles после того как вы найдете нужное в Elements. А зайдя в Sources, вы сможете увидеть физический файл, в котором располагается нужный вам текст. Это удобно, когда движок сайта разбрасывает информацию по файлам, например, после применения нестандартной дизайн-схемы.
Хотите знать, какие шрифты использует сайт? Ищите по слову font:
Чаще всего нужный шрифт лежит в Styles, где вы можете выделить нужные части кода, введя «font» в поле Filter. Учтите, что на разные элементы могут быть применены разные шрифты, поэтому сначала выделите нужный на панели Elements. В случае выше мы рассматриваем сразу весь контейнер body. Также имейте в виду, что семейства Arial, Helvetica, Sans Serif и прочие известные названия – это стандартные шрифты, и, скорее всего, участвуют на сайте просто в виде базовых.
Просмотр сайта на мобильном
Хотите быстро увидеть мобильную версию сайта? Легко! Выберите соответствующую иконку в левом верхнем углу консоли разработчика:
Этот инструмент дает прекрасную возможность оценить юзабилити и качество сайта на мобильных устройствах, если у маркетолога есть сомнения относительно этого. Обратите внимание, что на панели сверху есть возможность настроить вывод на конкретной модели смартфона:
Первый выпадающий список дает возможность выбрать устройство, с которого производится эмуляция просмотра сайта. Если вы нажмете на «Edit», то в консоли разработчика справа покажется полный список эмулируемых устройств, в котором вы можете добавить нужные. Там же вы можете поиграть с другими настройками вывода сайта.
Далее в панели показано разрешение, на котором демонстрируется сайт. Регулируется оно моделями устройств. Следующий пункт – масштаб, его можно регулировать.
Наконец, список Throttling дает вам возможность эмулировать качество интернет-соединения на устройстве. No throttling означает, что соединение работает максимально быстро и стабильно. Попробуйте изменить это на нестабильное соединение и посмотрите, как будет вести себя сайт. Если даже в режиме эмуляции он будет загружаться медленно или производить баги, то это повод обратиться к разработчику за оптимизацией.
Поиск и скачивание картинок
Когда-то давно любое изображение прекрасно скачивалось из интернета, если пользователь нажимал на правую кнопку мыши на нем и выбирал «Сохранить изображение как». Теперь же, во времена мощных движков, галерей и Java-модулей, просто так скачать картинку бывает невозможно. Но не для консоли разработчика.
Хороший пример – Instagram. Если мы нажмем правой клавишей на открытое в нем изображение, то не увидим возможности его скачать:
При нажатии на «Сохранить как» браузер предложит нам сохранить всю страницу, а это совсем неудобно. Воспользуемся консолью и выберем «Просмотреть код элемента»:
Теперь становится понятнее – на самом деле над картинкой еще располагается элемент
Это и есть наша картинка. Просто нажмите на ссылку, и изображение откроется в отдельной вкладке. Оттуда вы сможете скачать его, используя правую кнопку мыши.
Если же консоль не находит изображение таким образом, то, скорее всего, оно указано в CSS как «обои» (background-image) для элемента. Здесь чуть сложнее, придется сначала найти элемент с нужными «обоями»:
Когда вы перемещаетесь по элементам на панели Elements, в левой части браузера подсвечиваются области сайта, соответствующие этим элементам. Нам нужно найти объект, содержащий картинку, и после перебора от wrapper к соответствующему
Из новой вкладки мы скачиваем изображение стандартным образом либо копируем его сразу в редактор картинок.
Работа с куки через консоль
Файлы cookie содержат информацию о пользователе, которая порой влияет на отображение сайта. Вы можете удалить куки в настройках браузера, но там вам придется искать нужный сайт в длинном списке. Консоль предлагает более простой способ: откройте вкладку Application, перейдите в раздел Cookies, разверните его, выберите нужный сайт и очистите куки через правую клавишу и Clear. После этого останется только перезагрузить сайт «с чистого листа».
Продвинутый уровень. Поиск элементов и отслеживание событий
С помощью информации на панели Elements можно выполнять и более сложные задачи. Например, настроить веб-аналитику. Стандартные цели в «Яндекс.Метрике» и Google Analytics позволяют отслеживать переходы по страницам с заданным URL, вызов Javascript-событий (их задает чаще всего разработчик) и клики на некоторые определенные элементы на сайте. Но если ресурс имеет сложную структуру вложенности, то грамотно определить элемент для отслеживания бывает нелегко. Проблему решают системы управления тегами, такие как Google Tag Manager. Установив на сайт контейнер такой системы, вы получаете возможность задавать отслеживание как работы с элементами, так и событий, которое затем будет передавать срабатывание целей в счетчики Метрики и GA.
В этом процессе консоль разработчика пригодится как инструмент поиска нужных подэлементов, чтобы, например, следить за кликом не только на отдельную часть кнопки. Рассмотрим подробнее:
Скорее всего, то же самое придется проделывать для целей типа «Клик» в «Метрике». Они появились там недавно.
Вторая частая причина, по которой вам понадобится панель элементов в консоли разработчика – это тестирование юзабилити сайта. Например, вы считаете важным некий блок на сайте, который должен быть востребован пользователями. В метриках вы видите, что по какой-то причине этот блок не пользуется спросом. Открывайте его в консоли разработчика и исследуйте свойства:
В случае выше можно увидеть, что карточка в каталоге является двойным элементом – над ссылкой в теге располагается
В ней также существует удобный способ поиска элементов в дереве:
Нажмите на указанную иконку в левом верхнем углу консоли разработчика. Включится режим автопоиска, в котором вы просто водите курсором по элементам сайта, а консоль автоматически выделяет их в дереве Elements. Кроме того, в части сайта у элементов появляются всплывающие формы, где можно увидеть класс объекта и его основные свойства (в нашем случае класс = fb). Нажмите на элемент один раз левой кнопкой мыши и автопоиск прекратится, а содержимое будет раскрыто в Elements. Так вы сможете работать сразу с нужной частичкой сайта.
Также консоль разработчика в браузере пригодится вам для поиска счетчиков аналитики на сайте. Иногда с ними возникают проблемы, например, остались куски старого счетчика или новый загружен не полностью. Воспользуйтесь следующим алгоритмом для поиска: