F12 в браузере как называется
В этой статье мы рассмотрим клавиши в верхнем ряду клавиатуры и разберемся, для чего нужны клавиши F1 - F12. Для начинающих пользователей компьютеров или для тех, кто хочет освоить его получше, статья будет очень полезной.
Некоторые пользователи по праву назовут этот ряд клавиш странным, потому что не понимают как их использовать. На самом деле всё довольно просто. Начнем по порядку.
Что означают буква и номер
Клавиши имеют маркировку состоящую из буквы (F), номера (1-12) и иногда значка определенной функции, например WiFi.
Буква F - это первая буква слова Functional (Функциональный), от него и происходит название для этих клавиш. Их ещё называют функциональными клавишами.
Номер клавиш от 1 до 12 - просто потому что их 12 штук и они расположены по порядку, так гораздо удобнее запомнить, какие функции выполняет каждая клавиша.
Функции клавиш
- F1 - запускает в активном окне программы рамку «помощи». Благодаря этому пользователь может получить справку по работе с программой и решению технических проблем.
Нажатие клавиши на рабочем столе запускает окно справки Windows, в котором можно получить сведения о работе с операционной системой.
- F2 - клавиша активирует команду «переименовать файл». Выбрав файл мышью и затем нажав данную клавишу, можно изменить имя файла.
- F3 - клавишей можно вызвать строку поиска по тексту. Например, это можно сделать в текстовом документе, чтобы найти определенное слово или предложение. В папке с файлами - чтобы найти файл по названию.
- F4 - клавиша используется совместно с другими. Например, команда Ctrl+F4 закроет активное окно в браузере. Команда Alt+F4 закрывает активную программу, а на рабочем столе вызывает меню режимов выключения компьютера.
- F5 - клавиша обновляет активное окно в браузере или других программах. Иногда может помочь, если сайт или программа «глючит» или подтормаживает.
- F6 - при нажатии на клавишу в браузере курсор перемещается сразу в поисковую строку, где можно сделать необходимый запрос.
- F7 - в некоторых текстовых редакторах нажатие клавиши запускает проверку орфографии.
- F8 - при нажатии клавиши в момент запуска системы вызывается меню, в котором можно выбрать, в каком режиме запустится операционная система, например «безопасный режим».
- F9 - при нажатии клавиши в текстовом редакторе Word обновляет страницу документа.
- F10 - клавиша может выполнять некоторые функции компьютерной мыши. Например, комбинация Shift+F10 производит то же действие, что и нажатие правой кнопки мыши.
Нажатие клавиши F10 в папках на Windows запускает показ рядом с элементами меню буквенные и числовые обозначения для использования без компьютерной мыши.
- F11 - клавиша запускает полноэкранный режим в браузере и в некоторых других программах.
- F12 - в текстовом редакторе Word клавиша запускает окно "сохранить". В программе PDF Viewer запускает режим просмотра или чтения файла.
Дополнительный функционал
Если у вас ноутбук, то скорее всего вы заметили, что на этих клавишах могут располагаться ещё и значки.
Они нужны для обозначения функций каждой клавиши при совместном использовании с клавишей Fn, которая расположена в левом нижнем углу клавиатуры.
На моём ноутбуке, например командой Fn + F4 можно запустить спящий режим, а командой Fn + F7 заблокировать/разблокировать тачпад.
Какую тему обсудить в следующих статьях? Задавайте вопросы и делитесь мнением в комментариях.
Оцените, поставив палец вверх и подписывайтесь на канал «Свет». Спасибо, что дочитали!
Google Chrome включает в себя огромный набор функционала для тестирования сайтов веб-разработчиком. Панель разработчика открывается нажав F12:
Elements
Перед нами наше HTML-древо сайта разложенное по полочкам. Расположение внутреннего контента может отличаться, в данном случае я разбил на 2 колонки, где слева HTML-древо, а справа CSS свойства выбранного элемента (тега или тега, оба варианта применяются). Изменяется HTML-древо достаточно просто, выбираете нужный Вам тэг и нажимаете F2, далее изменяете HTML-код блока, где вы можете не только его содержание изменить, но и добавить другие атрибуты этому тэгу, а так же добавить другой тег перед или после данного тэга. При наведении мышкой на данный тэг на экране будет подсвечена область данного тэга, где оранжевым и зеленым цветом отмечены padding и margin. Так же хочу заметить одну важную особенность, если разработчик допускает ошибку и не применяет clear:both после float:left чем нарушает работу верстки, то область указанного тэга не будет видна или будет отображаться с ошибкой. Самая распространенная ошибка, между прочим!
Найти нужный тег в древе не сложно, есть 2 способа. Способ первый - перед Elements в меню находятся 2 иконки, вторая из которых перевод сайта в мобильную версию (не надо даже телефон покупать, всё итак видно верстальщику), а первая - выбрать элемент на странице. Достаточно нажать на первую кнопку, выбрать нужный блок и кликнуть по нему левой кнопкой мыши, таким образом у нас откроется именно данный тэг для корректировки. Метод второй, более быстрый - сразу правой кнопкой мыши нажать на нужный участок сайта и выбрать "Просмотреть код".
Итак, практическая задача, создайте 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 . Согласитесь, удобно же :)
Ваш внешний вид данного раздела может немного отличаться, там может быть включен overview (соответствующая иконка с графиками), что я обычно выключаю. В левой колонке у нас запросы, в правой идут ответы. При этом ответы так же разделены на подразделы. Первый запрос всегда идёт к исполняющему файлу (указан url), если закрыть правую колонку, то можно увидеть подробности запроса, а именно: метод запроса, как долго он выполнялся (что будет свидетельствовать на сколько сеть и сайт работают хорошо, объем файла. Закрыв правую колонку можно вновь открыть повторно кликнув на интересующий нас файл для анализа.
На дате обновления файла хочу остановиться подробнее, бывает так, что файл хоть и был изменён, но браузер всё равно не проверяет его версию, он просто загружает старый вариант сохраненный в кэше. Чтобы очистить кэш браузера у клиента достаточно изменить имя файла с 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 запрос на сервер и какой ответ пришел, то Вы должны дать мне корректный ответ, а не моргать глазами как "блондинки". :)
Данная статья в будущем ещё будет дорабатываться, возможно!
Доброго времени суток!
Сегодняшняя заметка будет носить справочный характер (предназначена в первую очередь для не искушенных пользователей, да и мне будет куда сослаться, чтобы подсказать при вопросах с клавиатурой. ).
Так вот, к теме. Практически на любой клавиатуре, помимо алфавитно-цифровых клавиш, присутствует ряд функциональных F1-F12 (см. фото ниже 👇). Предназначены они для ускоренного обращения к некоторым функциям Windows (да и ПК/ноутбука в целом), а в некоторых случаях — без них и не туда, и не сюда.
Ниже я приведу все основные их значения, а также краткие примеры, когда и в каких случаях их стоят задействовать. Освоив их, вы сможете куда быстрее работать за ПК, и меньше использовать мышь 👌.
На обычной классической клавиатуре
Под "классической" клавиатурой понимается самая обычная типовая модель, у которой на функциональных клавишах нет никаких доп. значков (т.е. всё по "дефолту").
Отмечу, что перечисленные ниже функции актуальны в том числе и для ноутбучной клавиатуры (только у них, как правило, есть доп. возможности, но об этом во второй части статьи).
Функциональные клавиши F1-F12 на типовой клавиатуре
F1
- в любых программах — вызов справки, помощь, поддержка;
- в Windows — открытие браузера Edge со справкой и помощью;
- при загрузке ПК/ноутбука (не для всех моделей) — вход в BIOS/Boot Menu (это бывает необходимо при установке Windows).
F2
- в проводнике Windows (Win+E) — переименовать файл или папку;
- на этапе загрузки компьютера — вход в BIOS (на подавляющем большинстве ПК и ноутбуков).
F3
- вызов строки поиска (в большинстве программ); — повторить предыдущую команду;
- в Word и текстовых ПО — в сочетание с клавишей Shift позволяет менять регистр букв.
F4
- в сочетании с Alt — закроет текущее окно/программу (если нажать Alt+F4 на рабочем столе — появится окно для выкл. компьютера);
- вызов окна поиска (аналогично F3);
- MS Office — повтор последнего набранного символа или действия.
F5
- в браузерах — обновить страничку (данные в форме). Если нажать в сочетание с Ctrl — то обновиться в т.ч. и кэш странички;
- в файловых менеджерах (Total Commander, например) — копировать файл/папку;
- в MS Office — вызов окна поиска и замены.
F6
- функция для перемещения курсора;
- в браузере: выбор адресной строки;
- в Windows: выбор значка программы на панели задач;
- в MS Office: выбор листа.
F7
Мало-используемая клавиша, в основном нужна в прикладных программах. Например, в MS Office с помощью этой клавиши можно проверить орфографию документа, в файловых коммандерах — создать новый каталог.
В некоторых BIOS/UEFI — переключение с расширенного меню на обычное (и обратно).
F8
- в некотором ПО — удаление папки/файла (под курсором);
- в некоторых BIOS/UEFI — вход в раздел настроек Boot Menu.
F9-F12
F9
- в Excel — перерасчет формулы;
- в BIOS/UEFI — загрузка безопасных настроек (не везде!);
- в ряде другом ПО — вызов доп. панелек инструментов.
F10
- вызов меню программы (например, это полезно, если вам нужно перейти в ее параметры);
- в BIOS/UEFI — сохранить введенные настройки и перезагрузить ПК/ноутбук;
- в ряде ПО — вызов доп. панелек инструментов.
F11
- в браузерах и некоторых играх — открыть полно-экранную версию отображения (все меню будут скрыты);
- в Excel — создать диаграмму (не во всех версиях).
F12
- в браузере — открыть код странички (в некоторых случаях — Ctrl+Shift+F12);
- в MS Office — сохранить документ/файл;
- в ряде ПО — вызов панельки быстрого доступа.
Разумеется, в добавок к выше-перечисленному в некоторых приложениях могут быть доп. свои значения (которые на них "повесели" разработчики). Кстати, вы также можете на них добавить нужные вам 👉 функции, например, с помощью приложения Volume 2.
На клавиатуре ноутбука
На ноутбуках, помимо выше-оговоренных функций, есть дополнительные. Чтобы они сработали, клавиши Fn-F12 нужно нажимать совместно с FN.
Разумеется, на каждую модель ноутбука — производитель добавляет свои фишки (здесь нет никакой стандартизации). Обращайте в первую очередь внимание на значки на этих клавишах, в большинстве случаев - по ним все становится ясно.
Я в качестве примера взял ноутбук ASUS (см. скрин ниже 👇).
Фото клавиатуры ноутбука Asus (ZenBook 310)
F1
Значок с буквой "Zz"
Подобный знак означает отправку ноутбука в сон (режим гибернации, в зависимости от предустановок).
F2
Значок с самолетом
Предназначена для быстрого включения режима "в самолете" (все сети будут откл.). Полезна только для тех, кто часто летает на самолетах.
F3-F4
Значок с клавиатурой и "солнышком"
Прибавить/убавить яркость подсветки клавиатуры (есть не на всех ноутбуках). Полезно при работе в темноте.
F5-F6
Значок с прямоугольником и "солнышком" по центру
Регулировка яркости экрана (часто-используемая штука, особенно для ноутбуков, которые нередко приходится переносить из одного помещения в другое).
F7
Значок прямоугольника и крестика внутри
Быстрое выключение экрана. Например, чтобы никто не увидел, чем вы сейчас занимаетесь.
F8
Значок с двумя прямоугольниками
Быстрая настройка изображения при подключении ноутбука к ТВ или доп. экрану/проектору.
F9
Значок с тачпадом
Быстрое включение/отключение тачпада (иногда он очень мешает, например, при наборе текста).
F10-F12
Значки с динамиками
Отключение звука, регулировка громкости. Очень полезные функции, когда у вас открыто какое-нибудь приложение и до ползунков регулировки в Windows (аудио-плеере) добраться нелегко.
Также нередко на F1-F12 размещают функции для быстрого включения/отключения адаптеров Wi-Fi, Bluetooth, регулировки системы охлаждения (это на игровых ноутбуках) и пр.
Доброго времени суток!
Ох уж эти современные клавиатуры, с которыми сейчас чего только не делают производители. И проблема с работоспособностью клавиш даже нового устройства — не редкая. 👀
Собственно, сегодняшняя статья будет о работе и настройке функциональных клавиш F1÷F12 и Fn на ноутбуках. Дело в том, что частенько они либо вообще не работают, либо работают не так, как должны.
Причем, многие производители "городят" форму клавиш, их функции, включение/выключение, настройку, как им вздумается (никакой стандартизации).
Меж тем, клавиши Fn, F1, F2, F3 и др. — очень важны, они позволяют быстро прибавить/убавить яркость и звук, включить/выключить сеть Wi-Fi, тачпад и многое другое.
В общем-то, отказываться от них — значит лишать себя нужного функционала, что не есть хорошо.
Причины неработоспособности Fn и F1÷F12
Напоминаю , что в большинстве случаев, чтобы функциональные клавиши могли выполнить альтернативную функцию (убавить ту же яркость) необходимо нажимать их одновременно с клавишей Fn.
Например, для того, чтобы включить/выключить Wi-Fi — нужно нажать комбинацию Fn+F2 (это в качестве примера! На каждом ноутбуке свои сочетания, см. внимательно на картинки на клавишах) .
Одновременное нажатие Fn+F2 - включает или выключает Wi-Fi / в качестве примера!
1) А включена ли Fn? Нет ли альтернативной кнопки на клавиатуре?
Некоторые типы клавиатур снабжены дополнительными кнопками F Lock или F Mode. Они позволяют блокировать (отключать) функциональные клавиши. Присмотритесь внимательно — нет ли у вас их?
Клавиша F Lock (чаще всего встречается на классической клавиатуре, а не на ноутбуках)
Также отмечу, чтобы задействовать кнопку Fn, на некоторых ноутбуках необходимо нажать сочетание кнопок Fn+Esc (см. скрин ниже — на клавише должен быть нарисован небольшой замок) . Кстати, вместо Fn+Esc — может использоваться сочетание Fn+NumLock.
Fn+Esc - изменяют режим работы Fn
2) Настройки BIOS (режимы Hotkey Mode и аналоги)
👉 Ремарка!
Если вы не знаете, что такое BIOS и как в него войти — рекомендую ознакомиться с этой заметкой .
В некоторых ноутбуках (например, Dell Inspiron, Lenovo ThinkPad и др.) в BIOS можно задать режим работы функциональных клавиш (т.е. они могут выступать в классической роли, а могут без нажатия на Fn сразу же выполнять вторую свою функцию: убавлять звук, включать/выключать тачпад и т.д.).
Чаще всего, для входа в BIOS — нужно перезагрузить ноутбук, и при его включении (до загрузки ОС Windows) сразу же нажимать клавиши F2 или Delete (кнопки могут быть отличными, зависит от модели устройства).
Называются подобные режимы: Hotkey Mode, Action Keys Mode (и прочие производные) . Для изменения их режима работы — необходимо зайти в раздел BIOS Configuration и поменять режим с Enabled на Disabled (или наоборот) .
Hotkey Mode - измененный режим работы клавиш F1-F12
3) Отсутствие драйверов и специального ПО от производителя
Когда драйвера ставятся автоматически вместе с Windows, либо используются различные комплекты/паки (например, Driver Pack Solution) — в системе часто не оказывается специального ПО от производителя ноутбука. В следствии чего, некоторые клавиши могут не работать (в том числе и функциональные).
Рассмотрю ниже пример обновления подобных драйверов на примере ASUS (если у вас марка ноутбука отличная, скажем HP, Acer, Dell, Lenovo — все действия будут аналогичны, только адрес офиц. сайта будет отличный) .
ASUS
Поиск по базе продукта
Загружаем необходимые драйвера
В общем-то, если подводить некий итог : необходимо просто обновить драйвера, скачав их с сайта производителя вашего ноутбука. Причем, сделать это нужно для конкретно той версии Windows, который пользуетесь в настоящий момент.
Если для вашей версии Windows на сайте производителя ноутбука нет драйверов — то это серьезный повод задуматься о переходе на другую версию ОС (вполне возможно, что из-за этого и не работает часть функционала, в том числе и функциональные клавиши).
👉 Дополнение!
Возможно кому-то пригодится статья о том, как установить драйвера на ноутбук или ПК (рассмотрены различные варианты).
4) Проблема с самой клавиатурой
Если вы роняли или 👉 заливали жидкостью ноутбук — вполне возможно, что клавиша не работает из-за физической неисправности клавиатуры.
Обратите внимание на то, реагирует ли клавиша хоть иногда (может быть попробовать нажать на нее чуть сильнее) . Если проблема с дорожками под клавишей — то часто более сильное нажатие срабатывает (например, дорожки могут окислиться после залития, или вести себя так в следствии износа) .
Что можно сделать:
- заменить клавиатуру на ноутбуке на новую (рекомендую сдать в сервис на диагностику, т.к. не лишним будет проверить нет ли проблем еще с чем-то);
- подключить к USB порту внешнюю клавиатуру и пользоваться ей (чем не временный вариант?) ; на другую;
- использовать экранную клавиатуру. Чтобы ее вызвать, зайдите в: Панель управления\Специальные возможности\Центр специальных возможностей
Можете ли вы представить себе создание и отладку кода веб-сайта без помощи каких-либо интегрированных инструментов разработки и отладки? Тем из нас, кто занимается разработкой сайтов и веб-приложений более нескольких лет, нам не нужно думать, что это реальность, с которой мы сталкиваемся на регулярной основе.
Но времена изменились. Тяжелые требования и ответственность, предъявляемые к веб-разработчикам сегодня, обусловили необходимость разработки инструментов для разработчиков во всех современных браузерах.
Выпустив бета-версию IE9 и встроенные средства разработчика F12 , команда IE взяла на себя обязательство помогать разработчикам быстро отлаживать свой интерфейсный код и повышать производительность сайта.
В этой статье я расскажу вам о некоторых наиболее важных функциях IE9 F12 Developer Tools с особым акцентом на том, что нового и что наиболее практично:
Вкладка «Сеть», новая для IE9, позволяет отслеживать и оптимизировать производительность сайта.
Чтобы просмотреть сетевые ресурсы (как показано выше в SitePoint ), нажмите F12, чтобы открыть Инструменты разработчика (в качестве альтернативы вы можете выбрать опцию «Инструменты разработчика F12» в меню «Инструменты» IE9); затем нажмите вкладку Сеть.
Для повышения производительности вкладка «Сеть» по умолчанию не сразу начинает захват ресурсов. Чтобы начать просмотр ресурсов, загружаемых на текущую страницу, нажмите кнопку « Начать захват» , а затем обновите страницу. Ресурсы будут продолжать отображаться только на текущей вкладке и остановятся, когда вы нажмете кнопку « Остановить захват» или закроете вкладку.
На приведенном выше снимке экрана показана сводка загружаемых ресурсов. Он включает информацию о запрошенных URL-адресах, файлах, загружаемых с помощью HTML или CSS, запросах на основе Ajax и ресурсах, загружаемых динамически с помощью JavaScript (например, если атрибут src элемента изображения изменяется).
Данные, отображаемые в детальном представлении, можно экспортировать в формате CSV или XML. Эта опция доступна с помощью значка Сохранить , который открывает диалоговое окно сохранения, показанное ниже:
Чтобы протестировать новую вкладку «Сеть» в бета-версии IE9, вы можете посетить демонстрацию «Мониторинг сети» на сайте тестового диска IE9 или узнать больше о функции вкладки «Сеть» в IEDNlog MSDN.
Проверка HTML и CSS
Элементы и стили DOM также легко найти, открыв Инструменты разработчика F12 и щелкнув по значку Выбрать элемент .
Эта опция (которая также доступна в меню « Найти» или нажатием Ctrl-B) дает вам возможность выбрать любой элемент и вызвать связанные с ним HTML и CSS. Вот пример, показывающий логотип SitePoint с эквивалентным HTML-кодом, отображаемым в структуре дерева-узла:
После выбора параметра « Выбрать элемент по клику» любой элемент на веб-странице, на который вы наведете курсор, получит синюю рамку (как показано на логотипе SitePoint выше). Это позволяет вам конкретно выбирать, какую область страницы вы хотите исследовать.
Панель DOM позволяет редактировать HTML на лету и сразу же видеть изменения в окне. Для этого просто нажмите значок « Редактировать» и отредактируйте HTML-код, как в обычном текстовом редакторе. Когда вы закончите редактирование, нажмите кнопку Edit , и изменения будут видны в окне просмотра.
Рядом с деревом DOM вы увидите все стили CSS, связанные с выбранным элементом, как показано ниже:
Инструменты разработчика IE9 F12 позволяют на лету изменять стили для тестирования и отладки выбранного CSS.
Стили, перечисленные для выбранного элемента, отображаются на панели свойств (справа от Инструментов разработчика) в каскадном порядке и в соответствии со спецификой; следовательно, стили, которые появляются внизу, — это те, которые появляются позже в каскаде, или имеют большую специфичность. Переопределенные стили отображаются через линию через них, так что это можно учитывать при попытке отладки проблемы CSS.
В качестве альтернативы вы можете выбрать параметр « Стили трассировки» , который будет отображать примененные свойства в алфавитном порядке без наличия селекторов.
Дополнительную информацию о выбранном элементе можно получить с помощью параметров « Макет и атрибуты» . Более подробное обсуждение этих функций см. В разделе « Отладка HTML и CSS с помощью инструментов разработчика на MSDN».
Вернувшись в основную панель (слева от инструментов), вы можете переключиться с вкладки HTML на вкладку CSS . На вкладке CSS перечислены все свойства и значения, найденные в выбранной таблице стилей, и они полностью доступны для редактирования, и изменения вступают в силу немедленно. Вкладка CSS также имеет селектор таблиц стилей, который позволяет переключаться между таблицами стилей. Это может пригодиться на больших сайтах, которые используют несколько файлов CSS.
Отладка скриптов и использование консоли
Как и ожидается с любыми хорошими инструментами разработчика, IE9 предоставляет мощные возможности отладки скриптов на стороне клиента, которые помогают разработчикам решать проблемы, которые могут возникнуть при работе со сложным кодом. Чтобы начать отладку сценариев на своей странице, откройте Инструменты разработчика F12 и выберите вкладку « Сценарий ».
Отсюда доступно несколько вариантов. Выпадающий список позволяет вам выбрать конкретный скрипт для работы, как показано на скриншоте ниже:
Любые ошибки скрипта, присутствующие на странице (как в примере выше), будут автоматически отображаться в консоли.
В процессе отладки вы можете установить точки останова (с дополнительными условиями), контролировать выполнение скрипта или проверять переменные и стек вызовов.
Когда выбран параметр « Консоль» , вы можете выполнять операторы на лету, вводя их в командную строку консоли. Функция консоли является новой в IE9 F12 Developer Tools и предоставляет ряд бесценных функций для разработчиков.
Любая допустимая строка кода может быть запущена внутри приостановленного сценария (нажав Enter или нажав кнопку Run script рядом с командной строкой консоли), как показано ниже:
При необходимости вы можете изменить командную строку консоли на многострочный, что позволит вам вставлять более сложные команды и сценарии для целей отладки. Естественно, что в многострочном режиме нажатие клавиши Enter на клавиатуре не приведет к выполнению сценария; вместо этого он переместит курсор на новую строку. Чтобы выполнить набранный код в этом режиме, щелкните значок « Выполнить сценарий» .
Командная строка в консоли также позволяет регистрировать ошибки и другую информацию, чтобы помочь в отладке ваших сценариев.
Улучшение производительности скрипта
Отладка ваших сценариев — это только один аспект цикла разработки. В дополнение к уже отлаженным функциям отладки, F12 Developer Tools позволяют тестировать скрипты на производительность с помощью вкладки Profiler .
Функция профилирования сценариев предоставляет данные о времени, которое ваши сценарии тратят на пользовательские методы и встроенные функции сценариев. Кнопка на вкладке « Профилировщик » позволяет запускать и останавливать процесс профилирования, чтобы вы могли контролировать собранные данные.
На приведенном ниже снимке экрана показаны частичные результаты выполнения профиля на домашней странице SitePoint:
Данные можно просматривать либо в представлении функций, либо в виде дерева вызовов , а полученные данные можно сортировать и переупорядочивать, щелкая заголовки столбцов или удаляя заголовки.
Каждый раз, когда вы запускаете и останавливаете профилировщик, записывается другой сеанс профилирования. Все ваши сеансы профилирования доступны в раскрывающемся списке Отчеты и доступны для поиска, как показано на рисунке ниже:
Функция поиска добавляет желтую подсветку к условиям поиска, найденным в выбранном отчете, что упрощает поиск результатов поиска в контексте отчета. Это также дает вам возможность перейти к следующему результату поиска, используя предыдущую и следующую кнопки. Это может пригодиться при попытке отследить конкретные имена методов в длинном отчете.
Наконец, любые полученные данные профиля можно легко экспортировать в формате CSV, щелкнув значок « Экспорт данных» . Это вызовет диалог сохранения, с помощью которого вы можете хранить свои данные локально.
Это всего лишь пример возможностей улучшения и отладки скриптов, доступных разработчикам, использующим IE9 и его интегрированные инструменты разработчика F12. Благодаря буму в веб-приложениях производительность веб-сайта стала еще более важной; Инструменты IE сделали большие шаги, чтобы помочь разработчикам в этой важной области развития.
Функция, недавно добавленная в IE9 F12 Developer Tools, — это возможность изменять строку User Agent (UA), которая читается веб-сервером через заголовки запросов. Хотя это не заставит IE9 имитировать рендеринг другого браузера, он может позволить вам запускать функции и контент, предназначенные для других веб-браузеров (например, предупреждение или другое уведомление для пользователя с более старым браузером или версией браузера). ).
Однако различные режимы рендеринга для предыдущих версий Internet Explorer доступны с использованием улучшенных параметров « Режим браузера» и «Режим документа» . Эти параметры доступны в любое время, когда открыты Инструменты разработчика F12, как показано ниже:
Каждый режим создает раскрывающийся список параметров для изменения способа отображения страницы. Хотя эти параметры точно не имитируют исходные среды визуализации, они предоставляют довольно точный и простой в использовании метод тестирования в различных режимах:
- Режим браузера — IE7, IE8, IE9 и IE9 в представлении совместимости IE7
- Режим документа — режим причуда, стандарты IE7, стандарты IE8 и стандарты IE9
Быстрое тестирование для различных версий и режимов Internet Explorer никогда не было проще, так как разработчики могут получить прямую выгоду. Для получения дополнительной информации о браузере IE и режимах документа, проверьте эти блоги:
В наши дни сайты и веб-приложения создаются с помощью сложных сценариев. Они требуют большего внимания к производительности и требуют более быстрых средств отладки. В этом свете инструменты разработчика IE9 F12 значительно улучшены. По мере того, как мы приближаемся к запуску IE9 в 2011 году ( Platform Preview сейчас в версии 7), и по мере увеличения доли IE9 на рынке эти и другие инструменты, объединяющие поддержку веб-стандартов и оптимизированного кода, станут бесценными для веб-разработчиков.
Испытайте новые инструменты разработчика IE9 F12 для тестирования, чтобы выяснить, могут ли новые и улучшенные функции помочь вашей разработке для современного браузера. Полное руководство можно найти в MSDN Developer Tools .
Почему бы не принять участие в нашей короткой викторине и посмотреть, сколько вы выбрали из этой статьи.
Это руководство стало возможным благодаря поддержке Microsoft. В сотрудничестве с Microsoft и независимо написанные SitePoint, мы стремимся работать вместе, чтобы разработать контент, который будет наиболее полезным и актуальным для вас — наших читателей.
Читайте также: