Как открыть network в браузере
Введение в Chrome DevTools. Console, Sources, Network
В первой части цикла про инструменты разработчика мы разобрались со вкладкой Elements, а теперь продолжаем знакомить с другими важными частями DevTools — вкладками Console, Sources и Network.
Бонус — расскажем, как сделать скриншот всей страницы в Chrome без плагинов.
Вкладка Console
В консоли отображается информация об ошибках в коде, а ещё туда можно ввести команду, и она выполнится. Если на странице не подгрузились шрифты, картинки или стили, то сообщения об ошибках выводятся именно сюда. Справа в верхнем углу DevTools выведутся иконки-предупреждения, которые откроют окно консоли.
Вкладка Sources
Теперь заглянем во вкладку Sources. Она показывает все подключенные к странице ресурсы. Чаще всего эта вкладка используется при отладке кода.
Например, так выглядит минифицированный CSS-файл на вкладке Sources.
Чтобы посмотреть файл в более привычном виде, нажмите на иконку с фигурными скобками внизу окна:
Вкладка Network
С её помощью можно выяснить, сколько времени заняла загрузка страницы, какие ресурсы подключились или не подключились к странице, и многое другое. При первом открытии вкладка может оказаться пустой — тогда просто перезагрузите страницу.
После перезагрузки внизу появится таблица всех ресурсов, подключенных к странице, и данные о них. Здесь можно узнать тип запроса, который был отправлен для получения ресурса, статус ответа, размер ресурса и многое другое.
Обычно вкладку Network используют, чтобы узнать состояние ресурса, который не отображается на странице, но был к ней подключен. Смотрим в таблицу — если есть какая-то ошибка, ресурс будет гореть красным. Если ошибок нет, то статус каждого запроса — 200. Это значит, что всё хорошо.
Но если на сайте будет ошибка, сообщение о ней отобразится и на вкладке Console.
Если нажать кнопку фильтра, появится возможность посмотреть, как загружаются определенные ресурсы — например, картинки или шрифты.
В левом нижнем углу — информация о количестве запросов, трафике и времени загрузки. Ещё мы можем выбрать скорость соединения и проверить, как сайт работает на мобильном где-нибудь за городом.
Проверка вёрстки на мобильных
Легко проверить, как выглядит вёрстка на мобильных. Заходим в режим эмуляции и всё — можем поменять ширину экрана, выбрать конкретный девайс (например, айфон), просмотреть все media-выражения, примененные к странице, или выбрать плотность пикселей, чтобы проверить ретиновую графику.
Это незаменимый инструмент в работе над адаптивной вёрсткой.
Скриншоты страниц
Другая возможность — скриншоты страницы. Заходим в режим эмуляции и в выпадающем меню выбираем «сделать скриншот» — изображение сразу сохраняется на компьютер.
Также есть возможность сделать скриншот всей страницы целиком — для этого выберите пункт Capture full size screenshot.
На этом всё — в следующих выпусках расскажем, как пользуются DevTools настоящие профессионалы.
DevTools — инструмент разработчика
Но сила не в инструментах, а в голове. Познакомьтесь с вёрсткой бесплатно прямо сейчас.
Учимся работать с панелью разработчика браузера. Ликбез для чайников.
Решил написать эту статью под впечатлением от некоторых пользователей, являющихся администраторами нескольких сайтов, но не имеющими представления о консоли браузера, поэтому постоянно достающими вопросами типа «как мне сменить цвет кнопки» или «у меня не работают личные сообщения, что мне делать?». А на вопросы «какие ошибки выводятся в консоли?» или «что возвращает сервер?» лишь предлагают самому посмотреть.
Вебмастер, который не умеет пользоваться инструментами или вообще не знает о них, никуда не годится, ему стоит приложить определенные усилия в своем развитии и в перерывах между созданием очередного веб-шедевра прочитать данную статью, дабы самостоятельно решать проблемы на своем сайте или, по крайней мере, давать более полную информацию на запросы службы поддержки.
Скажу сразу, в данной статье не будет описываться весь функционал панели, но подробно будет рассмотрен функционал и возможности нескольких, наиболее интересных для начинающего веб-мастера вкладок.
Информации получаемой из панели зачастую достаточно, чтобы указать на причину возникновения практически любой проблемы на сайте, пренебрегать этой информацией, как минимум, неразумно.
В наше время, разработчики браузеров не забывают о панели разработчика, она обязательно имеется в любом, более менее современном браузере и можно сказать, что ее наличие является стандартом, так что вы, скорее всего, найдете ее в своем браузере, даже если ранее не подозревали о ее существовании.
Браузеров много, нюансов работы с ними еще больше, но в качестве примера я буду приводить панель браузера 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-файл и место в этом файле, где ошибка была замечена, что помогает в решении этих ошибок.
Загляните в эту вкладку при загрузке страниц на своем сайте, что вы там увидите? Много ли красных сообщений? Очень часто достаточно только одного сообщения об ошибке в этой вкладке, чтобы все скрипты на сайте перестали работать, поэтому пренебрегать этой информацией явно не стоит, а если заметили записи в консоли, то стоит предпринять действия для выявления и устранения проблем. В идеале в консоли красного вообще не должно быть.
Надеюсь теперь, ознакомившись с перечисленными вкладками панели разработчика, вам станет проще работать со своими сайтами, выявлять и устранять возникшие проблемы не обращаясь к специалистам или предоставлять этим специалистам более исчерпывающую информацию о положении дел.
Панель разработчика — вкладка «Network»
В этой статье рассмотрим вкладку «Network». Она не отличается наличием множества возможностей по редактированию. Однако эта вкладка имеет определенную ценность для разработчика. Прежде всего, она предназначена для отслеживания запросов, которые отправляются серверу в процессе загрузки страницы. «Network» также отслеживает все ответы сервера на отправленные запросы.
Страницы на большинстве современных интернет-порталов – это уже не статичные html-болванки. Сегодня они оснащены множеством скриптов, которые регулярно посылают запросы серверу. Эти скрипты также реагируют на различные действия пользователей.
Далее рассмотрим действие пользователя, в результате которого на сервер будет отправлен запрос. На него также будет получен ответ. Самый простой пример – изменение правил отправления сообщения в закрытом чате. Для этого необходимо открыть страницу данного чата и вкладку «Network». Далее следует написать сообщение в чат.
После нажатия на «Отправить» в «Network» появится соответствующий запрос. Нажав на этот запрос, разработчик получит все необходимые сведения о том, куда были отправлены данные и что они собой представляют.
Ответ сервер будет виден во вкладке «Preview». Для разработчиков чрезвычайно важно, чтобы ответ был прогнозируемым. В таком случае и действие пользователя будет выполнено. В противном случае существует вероятность возникновения ошибки. В подобной ситуации именно ответ, полученный от сервера, расскажет о причинах появления проблемы.
В случае возникновения проблем сервер обычно пишет «Fatal Error», «Warning» и т.д. Иногда сервер возвращает исключительно номер ошибки (например, 404).
Более того, весьма вероятно, что в случае возникновения ошибки вкладка ответа вообще будет пуста. В любом случае ответ сервера очень важен для разработчика, так как именно он позволяет определить истинные причины возникновения проблем.
Поэтому разработчикам стоит уделить этой вкладке особое внимание. Она очень информативна и полезна.
У пользователей зачастую возникает такая проблема: они отправляют сообщение в приватный чат, но после этого ничего не происходит. Если во вкладке «Network» не отображаются запросы пользователя, то разработчику стоит обратить внимание на вкладку «Console». Дело в том, что в такой ситуации проблемы, скорее всего, произошли в JavaScript-скриптах сайта.
В «Console» отображаются логи проблем в js-скриптах и ошибки, которые возникают в результате загрузки отсутствующих файлов. Стоит заметить, что особо критические проблемы помечаются красным цветом. Как правило, решение именно этих проблем позволяет вернуть сайт к «жизни».
Информация, указанная в «Console» очень важна для веб-разработчиков. Именно она позволяет выявить конфликты, которые возникают в скриптах в процессе загрузки страницы. Здесь также отображаются и многие другие ошибки, о нюансах которых можно узнать по указанному тексту. В «Console» также отображается js-файл, в котором данная ошибка была выявлена.
В «Console» необходимо заглянуть в процессе загрузки страницы. Очень часто даже одна «красная» ошибка является поводом для того, чтобы скрипты перестали нормально функционировать. Поэтому веб-разработчикам следует внимательно отнестись к указанным ошибкам и как можно быстрее их устранить.
Стоит понимать, что для обеспечения нормальной работы сайта «красных» ошибок вообще не должно быть.
После знакомства с указанными вкладками на панели разработчика у начинающих веб-мастеров не должно возникнуть особых проблем с обслуживанием своих сайтов. Если же такие проблемы возникли, то стоит обратиться к более опытным специалистам, которые смогут быстро выявить и устранить любые ошибки в работе сайта.
Сетевой монитор
Сетевой монитор (Network Monitor) показывает все сетевые запросы, которые выполняет Firefox (например, когда загружается страница или выполняются запросы типа XMLHttpRequests), а также как долго выполняется запрос и детали запроса.
Как открыть Сетевой монитор
Есть несколько различных способов:
Пожалуйста, обратите внимание, что сочетание клавиш было изменено в Firefox 55
Сетевой монитор появится внизу окна браузера. Для просмотра запросов перезагрузите страницу:
Сетевой монитор записывает сетевые запросы постоянно, пока открыты Инструменты разработчика, даже когда вкладка Сеть не выбрана. Поэтому можно начать отладку страницы, например, в Веб-консоли, а потом переключиться и посмотреть сетевую активность в Сетевом мониторе без перезагрузки страницы.
Обзор пользовательского интерфейса
Интерфейс разбит на четыре основные части:
Панель инструментов
Начиная с Firefox 47 и далее, панель инструментов находится сверху окна. В ранних версиях Firefox она располагалась снизу.
Она содержит:
Примечание: Начиная с Firefox 58, кнопка фильтра «Flash»более недоступна, поэтому запросы Flash включены в фильтр «Прочее» (баг 1413540).
Список сетевых запросов
По умолчанию Сетевой монитор показывает список всех сетевых запросов, сделанных по ходу загрузки страницы. Каждый запрос отображается в отдельной строке:
По умолчанию Сетевой монитор очищается каждый раз, когда вы переходите на новую страницу или перезагружаете текущую. Вы можете это изменить посредством включения галочки «Включить непрерывные логи» в настройках.
Поля таблицы запросов
Начиная с Firefox 55, вы можете выбирать разные колонки, кликая правой кнопкой мыши на заголовок таблицы, а затем выбирая нужные колонки в выпадающем меню. Опция «Восстановить колонки» доступна для сброса списка колонок к исходному варианту. Список колонок:
По клику на заголовок колонки произойдёт сортировка всех запросов по этой колонке. По умолчанию сортировка происходит по колонке «Временная шкала».
Миниатюры изображений
Если файл является изображением, то в строку будет включена его миниатюра, при наведении на которую появится просмотр изображения во всплывающей подсказке:
Значки безопасности
Сетевой монитор показывает значок в колонке Домен:
Это предоставляет дополнительную информацию о безопасности запроса:
| Значок | Значение |
|---|---|
 | HTTPS |
 | Слабый HTTPS (например, использовался некриптостойкий шифр) |
 | Ошибка HTTPS (например, недействительный сертификат) |
 | HTTP |
 | |
| URL принадлежит домену, о котором известно, что он отслеживает пользователей, поэтому URL был заблокирован. |
По слабым и ошибочным HTTPS-запросам, вы можете посмотреть более детальную информацию о проблеме на вкладке «Защита».
Колонка «Причина» (Cause)
Колонка «Причина» указывает, что было причиной запроса. Обычно это очевидно, и можно увидеть корреляцию между этой колонкой и колонкой «Тип». Наиболее распространённые значения:
Когда запрос срабатывает из JavaScript, то слева от надписи в колонке «Причина» появится маленький значок JS. При наведении на него курсором мыши появится всплывающее окно, содержащее трассировку стека для запроса; это даёт подсказку, откуда был вызван запрос.
Во всплывающей подсказке вы можете кликнуть в любой из появившихся элементов, чтобы открыть связанный скрипт в панели «Отладчик».
Временной график
Список запросов отображает время выполнения разных частей каждого запроса.
Каждый график дан в горизонтальном виде в своей строке запроса, сдвинутый относительно позиций других запросов, поэтому вы можете увидеть полное время использованное для загрузки страницы. Для понимания деталей цветового кодирования, используемого здесь, загляните в раздел «Тайминги».
Начиная с Firefox 45 график содержит две вертикальные линии:
Фильтр запросов
Вы можете отфильтровать запросы по типу контента, по URL, по XMLHttpRequests или WebSocket, или по свойствам запроса.
Фильтрация по типу контента
Для фильтрации по типу контента используйте кнопки на панели инструментов.
Фильтрация XHR
Для просмотра только XHR-запросов используйте кнопку «XHR» панели инструментов.
Фильтрация WebSockets
Новое в Firefox 48
Для просмотра только подключений WebSocket, используйте кнопку «WS» панели инструментов.
Для контроля данных, передаваемых через WebSocket-соединения, попробуйте использовать дополнение WebSocket Sniffer.
Фильтрация по URL
Начиная с Firefox 45, вы можете фильтровать запросы, которые не содержат введённую вами строку, предварив вводимую строку символом «-«. Например, запрос «-google.com» покажет все запросы, которые не имеют подстроки «google.com» в своих URL.
Фильтрация по свойствам
Новое в Firefox 55
Контекстное меню
При клике правой клавишей мыши по строке отобразится контекстное меню:
Изменить и снова отправить
Эта опция открывает редактор, позволяющий вам отредактировать метод запроса, URL, параметры и заголовки и ещё раз отправить запрос.
Копировать как cURL
Эта опция копирует сетевой запрос в буфер как команду cURL, и вы сможете запустить его из командной строки. Команда может включать следующие опции:
