F12 в браузере как найти

Google Chrome включает в себя огромный набор функционала для тестирования сайтов веб-разработчиком. Панель разработчика открывается нажав F12:

Elements

Перед нами наше HTML-древо сайта разложенное по полочкам. Расположение внутреннего контента может отличаться, в данном случае я разбил на 2 колонки, где слева HTML-древо, а справа CSS свойства выбранного элемента (тега или тега, оба варианта применяются). Изменяется HTML-древо достаточно просто, выбираете нужный Вам тэг и нажимаете F2, далее изменяете HTML-код блока, где вы можете не только его содержание изменить, но и добавить другие атрибуты этому тэгу, а так же добавить другой тег перед или после данного тэга. При наведении мышкой на данный тэг на экране будет подсвечена область данного тэга, где оранжевым и зеленым цветом отмечены padding и margin. Так же хочу заметить одну важную особенность, если разработчик допускает ошибку и не применяет clear:both после float:left чем нарушает работу верстки, то область указанного тэга не будет видна или будет отображаться с ошибкой. Самая распространенная ошибка, между прочим!

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

Выбрав нужный тег мы без труда можем его подправить в нужный нам вид. Хочу заметить, что именно так я корректирую верстку всегда, попросту беру нужные теги и меняю им свойства в браузере, и когда я останавливаюсь на последнем понравившемся варианте, то копирую результат уже в мои html и css. Теперь поговорим о правой колонке — styles и computed. computed — финальная версия всех стилей применённых к тегу. Помните я говорил о том, что браузер по умолчанию имеет перечень свойств у тега, а мы их лишь меняет на нужные нам, так вот тут и есть этот самый перечень финальной версии, то есть вместе с изменёнными нами свойствами. Если посмотреть внимательно, то можно заменить интересную особенность, что почти все теги имеют одни и те же свойства с разными значениями, а это говорит о том, что практически весь сайт можно сверстать используя всего 1 или 2 тега, что кажется и абсурдным, но возможным В первой же колонке Styles указаны именно изменёнными нами стили (нашими таблицами стилей). В данной вкладке мы можем поменять влияние стилей как на данный тег работая в блоке element.style, так и изменять по id и class для всех элементов на сайте.

Итак, практическая задача, создайте 3 колонки через float:left с содержанием картинки + текста с одним классом. Далее через панель разработчика добавьте рамки, подкорректируйте расстояние между блоками и текстом используя внутренние и внешние отступы (меняя свойства класса), измените цвет текста в каждом блоке на свой цвет (тут уже element.style). Этого будет вполне достаточно, хотя для себя можете поэкспериментировать меняя таким образом код и других сайтов. Но помните самое важное, Вы не изменяете настоящие html и css файлы, а только временные конкретно данной страницы и как только вы обновите страницу, то и слетят все Ваши настройки!

Console

Без неё и жизнь не мила у любого программиста Абсолютно все WARNING и ERROR записываются в данный блок. Убедитесь, что у вас выводятся все ошибки проверив следующим образом: нажмите на иконку filter в данном разделе и выберите вкладку «all», то есть выводить все ошибки. По умолчанию установлен всегда «all», но зная Вас, мои ученики…
Логи сохраняются в рамках данной страницы с момента открытия консоли, а не загрузки страницы. Поэтому если загрузить страницу, а после открыть консоль, то ошибок вы не увидите, хотя ошибки на странице присутствуют! Поэтому сначала мы открываем консоль, а потом перезагружаем данную страницу! Теперь справа от ошибки будет указываться файл на котором произошла ошибка и даже сама строчка. Хочу заметить, что в консоль так же попадают ошибки различных установленных плагинов и расширений для Google Chrome включая вирусы (они тоже прописываются как плагин или расширение), а так же при работе Ajax и других внешних скриптов может указываться строчка 1 или 0 в исполняемом файле, а никак не строка, откуда этот самый AJAX был выполнен. Это стоит брать во внимание!

Работая с JavaScript можем столкнуться с тем, что по клику происходит переадресация на другую страницу в формате: click — ошибка — переадресация, а ошибка произошла перед строчкой, которая должна была заблокировать переадресацию и поэтому в консоли пусто. Решается всё предельно просто, установите галочку Preserve Log, и тогда логи не будут очищаться после перезагрузки или переадресации страницы. Забудете об этой фишке, то будете ошибку пол года искать

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

Sources и Network

Отличный способ промониторить все входящие и исходящие запросы и их результат выполнения. Во вкладке Sources мы можем увидеть все подгруженные дополнительные файлы, а именно картинки и скрипты. Самый простой способ достать нужную картинку, глянуть на её размеры, сохранить к себе на комп. Открыть JavaScript файлы там так же можно. По клику правой кнопкой на нужный файл можно выбрать пункт «Open link in new tab», и уже с новой страницы сохранить файл нажав комбинацию ctrl+s . Согласитесь, удобно же

Network более сложный функционал, тут перечень всех запросов и их ответов с сервером. Обратите внимание на то, что тут так же есть Filter — All, а так же Preserve log, это очень важно!

Ваш внешний вид данного раздела может немного отличаться, там может быть включен overview (соответствующая иконка с графиками), что я обычно выключаю. В левой колонке у нас запросы, в правой идут ответы. При этом ответы так же разделены на подразделы. Первый запрос всегда идёт к исполняющему файлу (указан url), если закрыть правую колонку, то можно увидеть подробности запроса, а именно: метод запроса, как долго он выполнялся (что будет свидетельствовать на сколько сеть и сайт работают хорошо, объем файла. Закрыв правую колонку можно вновь открыть повторно кликнув на интересующий нас файл для анализа.

Во вкладке header у нас тип нашего запроса (файл, метод, ip и статус ответа), Response header и Request header. Request header — то, что отправляет Ваш браузер на сервер, он не только просит страницу, он так же отправляет существующие куки, предпочтительный язык страницы, разрешает ли сжатие gzip файлов, полное название и версия браузера, а так же страницу, откуда он посылает запрос. Хочу заметить, что изучая в будущем CURL на PHP Вы можете так же все эти данные отправлять! В разделе Response приходят заголовки ответа. Вспоминайте теорию работы PHP, отправляемые данные делятся на 2 блока, сначала отправляют заголовки, потом содержание, когда отправляется содержание, тогда нельзя отправлять уже заголовки. В заголовках сервер отправляет куки, если их надо изменить, кодировку страницы, версию сервера (что является уязвимостью и надо скрывать, как это сделано на сайте school-php.com , ya.ru , google.ru и т.д.), дату файла (с целью не загружать его повторно, если изменений не произошло с момента прошлого обращения браузером).

На дате обновления файла хочу остановиться подробнее, бывает так, что файл хоть и был изменён, но браузер всё равно не проверяет его версию, он просто загружает старый вариант сохраненный в кэше. Чтобы очистить кэш браузера у клиента достаточно изменить имя файла с scripts.js?v=1 на scripts.js?v=2. Как видите, мы лишь поменяли переданные GET данные, а скрипт уже практически у всех будет подгружаться новый (не 100%, но вполне приемлемо для большинство сайтов). Но после правки запятой в скрипте во время разработки не так уж и удобно бегать и менять html с подключением этого самого js файла, тут для разработчика приходит на помощь ещё одна важнейшая галочка «Disable cache», если она включена, то все файлы не будут кэшироваться и каждый раз будут загружаться новые! Разрабатываем сайт с этой галочкой, а при загрузке новой версии скриптов всем пользователям меняем лишь версию ?v=3.

Preview и Response

После запроса сервер возвращает нам что-либо, в Preview попадёт удобный для человека вид, а в Response — неотформатированный исходник. На примере запроса изображения во вкладку Preview попадёт сама картинка, а исходный код картинки по соображениям морали будет скрыт, но вот если Вы запросили HTML, JS, PHP файлы, то как раз заглянуть во вкладку Response стоит обязательно для того, чтобы убедиться, что там вернулся именно тот контент, который мы запросили и ожидаем увидеть! При работе с Ajax в Preview мы получим удобный вид JSON ответа похожего на HTML-древо в разделе Elements, что так же упростит нам разработку сайта.

Ajax и панель разработчика

Разрабатывая код с Ajax мы делаем следующее:
1) Пишем код, вешаем событие на кнопку.
2) Открываем панель разработчика, обновляем страницу.
3) Проверяем, что ошибок нет, устанавливаем Preserve log, так как в случае переадресации нам надо перехватить ошибку.
4) Кликаем на кнопку вызывающую Ajax запрос. Теперь если переадресации не было смотрим внимательно сначала в вкладку Console и убеждаемся, что произошла ошибка. Ошибка может быть любого плана, не только неправильный ответ с сервера, но и опечатка в самом коде. Если в console ошибки нет, или же она не ясна как, например, это строчка 0 или 1, то продолжаем анализировать вкладку Network.
5) Во вкладке Network убеждаемся, что запрос был отправлен на корректный URL, статус ответа 200, а не 404, анализируем сам запрос, то есть открываем вкладку Response и смотрим внимательно верный ли ответ прислал нам файл, именно тот, который мы ожидаем, или в ответе присутствует мусор в виде лишнего кода, ошибок и т.д. Если Вы понимаете какой ответ ждёте от сервера, то вы без труда можете сравнить ожидаемое с реальностью, увидеть ошибку и исправить её!

П.С. Всем моим гостям я желаю успешного программирования, а с учеников требую идеального понимания того, что я тут расписал. И если я когда-нибудь спрошу у Вас был ли отправлен AJAX запрос на сервер и какой ответ пришел, то Вы должны дать мне корректный ответ, а не моргать глазами как «блондинки».
Данная статья в будущем ещё будет дорабатываться, возможно!

Содержание

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

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

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

Помогла ли Вам статья?

Публикация в группе: Полезное для WordPress

Категории группы: Полезное

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

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

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

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

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

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

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

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

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

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

По-умолчанию открыта первая вкладка «Elements».

В этой вкладке выводиться html-код текущей страницы.

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

Справа от кода страницы выводится колонка с css-стилями и правилами действующими для текущей страницы или html-блока, который будет вами выделен.

Вот тут и начинаются чудеса. Вкладка позволяет редактировать как html-код, так и css-правила.

Выберите интересующий html-блок, выделите его и в правой колонке отобразятся его css-стили. Нажмите правой кнопкой мыши на этом блоке и выберите одно из предложенных действий «Edit as HTML» и вы сможете редактировать html-код данного блока. Результат данного редактирования вы увидите сразу по завершению, все редактирование происходит, так сказать, в режиме онлайн, сразу на странице выводится результат.

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

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

Если с html-файлами вроде все понятно, один файл — одна страница, то стили страницы могут складываться из множества css-файлов и какие именно файлы надо править необходимо знать точно.

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

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

Переходим к следующей вкладке — «Network».

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

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

Давайте рассмотрим, какое то пользовательское действие которое отправит запрос на сервер и получит от сервера ответ, например, изменение отправление личного сообщения из приватного чата. Открываем страницу чата, открываем панель разработчика на вкладке «Network» и пытаемся отправить сообщение в чате.

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

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

Сервер может возвратить текст ошибки типа «Warning…» или «Fatal Error…», либо возвратить номер ошибки сервера, например 404 или 500, а может такое случиться, что вкладка ответа будет пуста — ответ не был получен. Эта информация очень поможет в решении возникшей проблемы в службе поддержки куда вы с ней обратитесь, она укажет на возможные причины ее возникновения, а зачастую явно покажет, куда надо копать.

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

Иногда бывает так, что вроде нажали на кнопку рейтинга или отправили сообщение в личном чате, а ничего не происходит, посмотрели во вкладку «Network» панели браузера, но запросы к серверу просто не отправляются, вероятнее всего, возник конфликт в js-скриптах сайта, значит самое время перейти во вкладку «Console».

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

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

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

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

Каждый браузер оснащен консольной панелью, с помощью которой разработчики проводят тестирование веб-сайта. Вкладка Elements содержит всю информацию об инспектируемом HTML-файле: теги, таблицы стилей и т.д. Но в консоли есть и другие разделы, такие как Console, Sources, Network и прочие.

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

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

Алгоритм запуска консоли (инспектора) во всех браузерах идентичен. Есть два пути: первый – запуск через специальную клавишу на клавиатуре, второй – через функцию «Посмотреть код страницы/элемента». 

Например, если воспользоваться в Chrome клавишей F12, то откроется дополнительное окно с консолью.

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

В результате перед нами снова отобразится окно, в котором будет открыта главная вкладка с кодом страницы. Подробнее о ней мы еще поговорим, а пока давайте посмотрим, как выполняется запуск консоли в браузере Safari на устройствах Mac.

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

Теперь можно запустить консольное окно – достаточно воспользоваться комбинацией клавиш «Cmd+Opt+C».

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

Какие вкладки есть в консоли и за что они отвечают

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

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

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

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

И еще одна опция, которая может быть полезна – изменение расположения консольной панели. Чтобы ей воспользоваться, необходимо в верхней правой части нажать на кнопку в виде троеточия и в строке «Dock side» изменить ориентацию. Доступные положения: справа, слева, снизу, в отдельном окне.

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

Elements

Основной компонент для верстальщиков. Он включает в себя всю информацию об открытой HTML-странице. Здесь мы можем не только посмотреть текущие теги и атрибуты, но и изменить их – в таком случае произойдет автоматическое изменение дизайна на странице. Если ее обновить, все вернется на свои места. Также открыт доступ к просмотру CSS и прочих элементов – для этого в правой части раздела идут вкладки Styles, Computed, Layout, Event Listeners, DOM Breakpoints, Properties и Accessibility.

Console

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

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

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

Sources

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

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

Network

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

Performance

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

Memory

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

Application

Данный раздел позволяет инспектировать и очищать все загруженные ресурсы. Мы можем взаимодействовать с HTML5 Database, Local Storage, Cookies, AppCache и другими элементами.

Основная особенность опции – чистка куки. Если вам необходимо выполнить эту процедуру, то просто откройте в левой части раздел «Cookies» и нажмите справа на значок запрета. Куки для выбранной ссылки будут очищены.

Security

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

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

Lighthouse

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

Выявление основных ошибок

При возникновении возможных ошибок мы сразу будем об этом уведомлены во вкладке Console – в ней отобразится информация с красной строкой текста. Рассмотрим самые распространенные ошибки, которые могут возникать в Google Chrome, Safari и Internet Explorer:

1. Uncaught TypeError: Cannot read property. Ошибка возникает в Хроме при вызове метода или чтении свойства для неопределенного объекта.
2. TypeError: ‘undefined’ is not an object (evaluating). Аналогична предыдущей ошибке, но только в Safari.
3. TypeError: null is not an object (evaluating). Возникает в Сафари при вызове метода или чтении свойства для нулевого объекта.
4. (unknown): Script error. Обозначает ошибку скрипта.
5. TypeError: Object doesn’t support property. Встречается в Internet Explorer – возникает при вызове определенного метода.
6. TypeError: ‘undefined’ is not a function. Указывает на неопределенную функцию (в Chrome).
7. Uncaught RangeError: Maximum call stack. Ошибка в Chrome, означающая превышение максимального размера стека.
8. TypeError: Cannot read property ‘length’. Невозможно прочитать свойство.
9. Uncaught TypeError: Cannot set property. Возникает, когда скрипт не может получить доступ к неопределенной переменной.
10. ReferenceError: event is not defined. Обозначает невозможность получения доступа к переменной, не входящей в текущую область.

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

Заключение

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

Изучайте и находите свои применения этому инструменту – он может многое. Удачи!