что делает f12 в браузере
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 запрос на сервер и какой ответ пришел, то Вы должны дать мне корректный ответ, а не моргать глазами как «блондинки». 🙂
Данная статья в будущем ещё будет дорабатываться, возможно!
F1-F12
Клавиши F1-F12 используются практически в каждом приложении, которое вы используете. Они используются как самостоятельно для вызова некоторых функций, так и в комбинациях с управляющими клавишами (alt, ctrl, shift). За все время существования персональных компьютеров сложился негласный этикет привязки функций в программах для функциональных клавиш. Кроме того, почти всегда описание комбинаций с их использованием можно найти в документации к используемым вами приложениям.
Итак, приступим. В первую очередь, имеет значение функционал этих клавиш в самой операционной системе. Также эти клавиши используются в играх.
Клавиша F1 — где бы то ни было, эта клавиша почти всегда ассоциируется с вызовом справочной системы того приложения, работая с которым вы ее нажмете. Работает практически в любом приложении. Если у программы есть своя справочная система, то откроется она. Также во многих программах к этой клавише привязывают онлайн-документацию по приложению — то есть по нажатию запустится ваш браузер, или откроется новая вкладка, если он уже запущен, и произойдет переход на страничку документации в интернете. Допустим, читая эту статью, попробуйте нажать F1 — и вам будет представлена справка по вашему браузеру. Если вы работаете в Windows, cверните все окна, с которыми вы сейчас работаете, и нажмите эту клавишу. Откроется справочная система Windows. Таким образом, эта клавиша используется наиболее часто, практически всегда. Каких-либо устоявшихся комбинаций с ее использованием нет. Если они и существуют для каких-либо особых приложений, то это, как правило, указано в документации к этим приложениям. Клавишу правильно нажимать следует мизинцем левой руки.
Клавиша F2. Эта клавиша тоже имеет негласную стандартную функцию. Как правило, эта клавиша позволяет открыть на редактирование что бы то ни было — например, переименовать файл — стандартное применение в проводнике ОС Windows. Открыть значение для в ячейке для редактирования в MS Excel. Однако, в отличие от F1, она может использоваться для каких-либо других функций гораздо чаще — допустим, в браузере Opera эта клавиша вызывает дополнительную строку ввода адреса для перехода к странице. Но в любом случае, даже в незнакомых приложениях стоит попробовать эту клавишу в качестве открытия для переименования или редактирования. Иногда в программах, например, в некоторых играх, F2 используется для сохранения файла, или игры. Кроме того, эта клавиша позволяет осуществить переход к BIOS (если вам известно, что это такое) до загрузки компьютера на некоторых моделях материнских плат. Особых стандартных комбинаций тоже нет. Палец — безымянный или же мизинец левой руки.
F3. Клавиша F3 — это, как правило, поиск. Будь то поиск файлов по файловой системе в ОС или же поиск текста по загруженной в браузере страничке, открытому документу в pdf-просмотрщике или же в текстовом редакторе. К слову, наряду с F3 для вызова поиска стандартной комбинацией является сочетание ctrl+F (здесь F от слова find — искать). В том же opera ctrl+F безусловно вызывает окно для задания шаблона поиска, в то время как F3 вызывает это окно только если шаблон на данный момент пуст, если же он уже задан то F3 просто осуществляет поиск по заданному шаблону без вызова окна, если шаблон уже задан. Думаю, Opera — не единственное приложение, где поиск работает именно таким способом. Соглашение об использовании этой клавиши в качестве вызова поиска тоже довольно устоявшееся, примерно как и F1 для справки. F3 Нажимать средним или безымянным пальцем левой руки.
F4. При использовании этой клавиши в приложениях не всегда придерживаются каких либо строгих рамок, ибо их нет. Я знаю три наиболее частых варианта, где ее можно использовать. Первое — это пошло еще со времен старых файловых менеджеров а-ля Norton Commander — это функция Edit, то бишь редактирование. Однако, это не то редактирование, как в случае с F2 — это непосредственно вызов текстового редактора и открытие в нем файла на редактирование, в то время как F2 позволит только лишь редактировать название файла. Так, например, это работает в известном файловом менеджере для windows — Total Commander.
Второе — эта клавиша позволяет передать фокус в адресную строку и одновременно открыть историю адресной строки в стандартной оболочке Explorer ОС Windows. То же самое происходит и в браузере MS Internet Explorer. Ну, и последнее — в некоторых приложениях эта клавиша открывает какую либо дополнительную панель — например, в браузере Opera или в Pdf-просмотрщике Foxit Reader. Средний палец левой руки.
Но это еще не все, что можно сказать об F4. Очень устоявшаяся и наиболее часто используемая комбинация — Alt+F4, возможно, вы с ней уже знакомы. Эта комбинация — закрытие приложения — аналог кнопки крестика в правом верхнем углу приложения. Она работает почти всегда и везде именно так. Нажимают эту комбинацию обычно так: большой палец левой руки на левый Alt и средний палец левой руки на F4. Это кажется наиболее удобным способом, но более правильным вариантом будет нажатие средним пальцем правой руки на правый Alt и средний палец левой руки на F4.
Еще одно сочетание которое менее известно, но оно тоже довольно стандартно — Ctrl+F4 — закрытие активной вкладки. Например, в браузерах. Но это несколько неудобная комбинация, и мало кем используется, ибо для той же цели служит комбинация Ctrl+W.
Клавиша F5. Это очень полезная клавиша, и, пожалуй, наиболее известна из всего ряда F-клавиш. Это функция обновления (refresh) странички в браузерах. Да и вообще, обновление чего-либо — в первую очередь стоит попробовать именно ее. В любом браузере клавиша F5 работает именно так. Аналог — сочетание Ctrl+R (R от refresh — обновить, освежить) Однако, у F5 есть еще одно применение опять же из двухпанельных файловых менеджеров — копирование файла. Так это работает, например, в Total Commander. Нажимается указательным пальцем левой руки.
F6. Наиболее частое применение — передача фокуса (перевод курсора для ввода) в адресную строку. В браузерах (IE, mozilla firefox, google chrome), в оболочке (explorer) Windows. Работает примерно так же, как и F4, с тем отличием, что не открывается история адресной строки. Второе применение — двухпанельные файловые менеджеры — перемещение файлов (Total Commander). Ну и, наконец, очень часто используется в играх в качестве клавиши для быстрого сохранения игры. Указательный палец левой руки.
F7, F8 и F9. Каких то конкретных привязок у этих клавиш нет, используется по разному в зависимости от приложения, поэтому описывать здесь не буду. Вообще клавиши F7, F8 и F9 — это клавиши, которые не имеют каких-либо стандартных функций и в разных приложениях используются по разному, чаще всего это какие то специфичные для приложения функции. Эти клавиши и сочетания с ними интенсивно используются для отладки кода в различных средах разработки. Например Ctrl+F9 зачастую запускает процесс компиляции. F7 — создание нового каталога в двухпанельных файловых менеджерах. Единственное, могу сказать о наиболее стандартном — клавиша F9 очень часто используется в играх для быстрой загрузки последнего быстрого сохранения по F6. Поэтому если вы игроман, эта пара клавиш — F6 и F9 должна быть вам очень полезна, в особенности в играх жанра action. Клавиша F8, если ее нажать во время загрузки Windows, позволит выбрать режим загрузки. Клавиша F9 до загрузки на некоторых моделях материнских плат может вызывать меню загрузки (boot menu) для выбора источника загрузки. Кроме того, нажатие F9 во время загрузки Windows позволяет вызвать восстановление системы из резервного раздела — присутствует на некоторых моделях ноутбуков. Эргономика — F7 и F8 — указательный палец правой руки, F9 — средний палец правой руки.
Клавиша F10. Стандартное назначение этой клавиши в большинстве приложений — вызов (а иногда и закрытие) меню программы. Работает практически везде. Нажимается средним или безымянным пальцем правой руки.
F11. Зачастую спецклавиша, но наиболее известное и частое применение — переключение полноэкранного/оконного режима. В большинстве браузеров, различных просмотрщиков и редакторов — F11 работает именно так. Нажимать удобнее безымянным или мизинцем правой руки.
Ну и, наконец, клавиша F12. У нее тоже нет какой либо строго привязанной функции, однако довольно часто эта клавиша используется для вызова какого-либо дополнительного меню. Например, с настройками программы (так используется в Opera). В текстовом процессоре MS Word эта клавиша используется для сохранения текущего документа. В любом случае, если какие либо клавиши используются в интересующем вас приложении, то это описано в документации по нему.
Ну вот, в принципе, и все. Как видно из представленного мной описания — первые 6 клавиш функционального ряда (F1-F6) обладают особенно полезными функциями. Используйте их и сделайте вашу работу за компьютером эффективнее.
(сеть)
Учимся работать с панелью разработчика браузера. Ликбез для чайников.
Решил написать эту статью под впечатлением от некоторых пользователей, являющихся администраторами нескольких сайтов, но не имеющими представления о консоли браузера, поэтому постоянно достающими вопросами типа «как мне сменить цвет кнопки» или «у меня не работают личные сообщения, что мне делать?». А на вопросы «какие ошибки выводятся в консоли?» или «что возвращает сервер?» лишь предлагают самому посмотреть.
Вебмастер, который не умеет пользоваться инструментами или вообще не знает о них, никуда не годится, ему стоит приложить определенные усилия в своем развитии и в перерывах между созданием очередного веб-шедевра прочитать данную статью, дабы самостоятельно решать проблемы на своем сайте или, по крайней мере, давать более полную информацию на запросы службы поддержки.
Скажу сразу, в данной статье не будет описываться весь функционал панели, но подробно будет рассмотрен функционал и возможности нескольких, наиболее интересных для начинающего веб-мастера вкладок.
Информации получаемой из панели зачастую достаточно, чтобы указать на причину возникновения практически любой проблемы на сайте, пренебрегать этой информацией, как минимум, неразумно.
В наше время, разработчики браузеров не забывают о панели разработчика, она обязательно имеется в любом, более менее современном браузере и можно сказать, что ее наличие является стандартом, так что вы, скорее всего, найдете ее в своем браузере, даже если ранее не подозревали о ее существовании.
Браузеров много, нюансов работы с ними еще больше, но в качестве примера я буду приводить панель браузера 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-файл и место в этом файле, где ошибка была замечена, что помогает в решении этих ошибок.
Загляните в эту вкладку при загрузке страниц на своем сайте, что вы там увидите? Много ли красных сообщений? Очень часто достаточно только одного сообщения об ошибке в этой вкладке, чтобы все скрипты на сайте перестали работать, поэтому пренебрегать этой информацией явно не стоит, а если заметили записи в консоли, то стоит предпринять действия для выявления и устранения проблем. В идеале в консоли красного вообще не должно быть.
Надеюсь теперь, ознакомившись с перечисленными вкладками панели разработчика, вам станет проще работать со своими сайтами, выявлять и устранять возникшие проблемы не обращаясь к специалистам или предоставлять этим специалистам более исчерпывающую информацию о положении дел.
Как использовать консоль браузера для выявления ошибок на сайте
Каждый браузер оснащен консольной панелью, с помощью которой разработчики проводят тестирование веб-сайта. Вкладка 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 отображает информацию о безопасном протоколе. Если его нет, то будет сообщено, что данная страница в чем разница» rel=dofollow»>страница является небезопасной. Кроме того, можно получить еще некоторые сведения о:
Lighthouse
Последний раздел представляет собой инструмент аудита с открытым исходным кодом. Благодаря ему разработчики могут повысить производительность и доступность своих веб-сайтов.
Выявление основных ошибок
При возникновении возможных ошибок мы сразу будем об этом уведомлены во вкладке Console – в ней отобразится информация с красной строкой текста. Рассмотрим самые распространенные ошибки, которые могут возникать в Google Chrome, Safari и Internet Explorer:
Устранение основных и прочих ошибок может быть проблематично. Если вы считаете, что они сильно мешают производительности вашего сайта, то рекомендуем поискать информацию о них в официальной документации браузера либо на тематических форумах.
Заключение
Иногда консоль пригождается не только верстальщикам – она бывает полезна для самых простых действий. Например, чтобы посмотреть мобильную версию, скачать картинку либо узнать используемый шрифт на сайте. В общем, применять консольное окно можно в различных ситуациях – как для просмотра содержимого сайта, так и для анализа потребления памяти.
Изучайте и находите свои применения этому инструменту – он может многое. Удачи!