F12 в браузере что
Значение клавиш 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, регулировки системы охлаждения (это на игровых ноутбуках) и пр.
Учимся работать с панелью разработчика браузера. Ликбез для чайников.
Решил написать эту статью под впечатлением от некоторых пользователей, являющихся администраторами нескольких сайтов, но не имеющими представления о консоли браузера, поэтому постоянно достающими вопросами типа «как мне сменить цвет кнопки» или «у меня не работают личные сообщения, что мне делать?». А на вопросы «какие ошибки выводятся в консоли?» или «что возвращает сервер?» лишь предлагают самому посмотреть.
Вебмастер, который не умеет пользоваться инструментами или вообще не знает о них, никуда не годится, ему стоит приложить определенные усилия в своем развитии и в перерывах между созданием очередного веб-шедевра прочитать данную статью, дабы самостоятельно решать проблемы на своем сайте или, по крайней мере, давать более полную информацию на запросы службы поддержки.
Скажу сразу, в данной статье не будет описываться весь функционал панели, но подробно будет рассмотрен функционал и возможности нескольких, наиболее интересных для начинающего веб-мастера вкладок.
Информации получаемой из панели зачастую достаточно, чтобы указать на причину возникновения практически любой проблемы на сайте, пренебрегать этой информацией, как минимум, неразумно.
В наше время, разработчики браузеров не забывают о панели разработчика, она обязательно имеется в любом, более менее современном браузере и можно сказать, что ее наличие является стандартом, так что вы, скорее всего, найдете ее в своем браузере, даже если ранее не подозревали о ее существовании.
Браузеров много, нюансов работы с ними еще больше, но в качестве примера я буду приводить панель браузера 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 используются практически в каждом приложении, которое вы используете. Они используются как самостоятельно для вызова некоторых функций, так и в комбинациях с управляющими клавишами (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) обладают особенно полезными функциями. Используйте их и сделайте вашу работу за компьютером эффективнее.
(сеть)
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 запрос на сервер и какой ответ пришел, то Вы должны дать мне корректный ответ, а не моргать глазами как «блондинки». 🙂
Данная статья в будущем ещё будет дорабатываться, возможно!