Ф12 в браузере что это
Русские Блоги
Краткое введение в функцию F12 в браузере Chrome
С F12 есть Инструмент интерфейса разработчика, поэтому я буду продолжать исследовать, после проверки нескольких блогов и информации я подытожил свое собственное понимание и память, я надеюсь помочь друзьям, которые нужно, хеэ!
Сначала введите три верхние функции в инструменте разработчика Chrome, а также три функциональных страница, которые используют элементы, консоль, исходные коды и сеть (сеть).
1、 Элементы
Просмотр кода элемента : Нажмите, как показано
Стрелка (или используя ярлыки клавиш) Ctrl+Shift+C ） Введите режим элемента выбора, затем выберите элемент, который вы хотите просмотреть со страницы, а затем найдите конкретное местоположение исходного кода элемента в столбце элемента элемента разработчика (элементы).
Просмотр свойств элемента : Вы можете просмотреть деталь от позиционного исходного кода, такого как класс, SRC, вы также можете просматривать все свойства в сторону правой, как показано на следующем представлении изображения
Изменить код и свойства элемента : Вы можете прямо дважды щелкнуть деталь, которую вы хотите изменить, то введите изменения или проверьте щелчок правой кнопкой мыши после того, как вы хотите изменить раздел, как показано ниже
Примечание: Эта модификация также вступает в силу только на текущей рендеринге страницы и не изменяет исходный код сервера, поэтому эта функция также используется в качестве эффекта отладки страницы.
Введение в боковую панель правой стороны: Как показано ниже
2、 Приставка
3、 Исходный код Его основная функция описана ниже
Запросить файл Описание файла Описание
Всего четыре модуля:
Приведенное выше мое резюме, контент немного больше, я надеюсь, что каждый может увидеть пациента. ， Chrome devtools также имеет много очень полезных функций, вы можете продолжать исследовать Я надеюсь, что мое резюме полезно для всех.
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 запрос на сервер и какой ответ пришел, то Вы должны дать мне корректный ответ, а не моргать глазами как «блондинки». 🙂
Данная статья в будущем ещё будет дорабатываться, возможно!
Быстрая отладка с помощью инструментов разработчика F12 в Internet Explorer 9
Можете ли вы представить себе создание и отладку кода веб-сайта без помощи каких-либо интегрированных инструментов разработки и отладки? Тем из нас, кто занимается разработкой сайтов и веб-приложений более нескольких лет, нам не нужно думать, что это реальность, с которой мы сталкиваемся на регулярной основе.
Но времена изменились. Тяжелые требования и ответственность, предъявляемые к веб-разработчикам сегодня, обусловили необходимость разработки инструментов для разработчиков во всех современных браузерах.
В этой статье я расскажу вам о некоторых наиболее важных функциях IE9 F12 Developer Tools с особым акцентом на том, что нового и что наиболее практично:
Вкладка «Сеть», новая для IE9, позволяет отслеживать и оптимизировать производительность сайта.
Чтобы просмотреть сетевые ресурсы (как показано выше в SitePoint ), нажмите F12, чтобы открыть Инструменты разработчика (в качестве альтернативы вы можете выбрать опцию «Инструменты разработчика F12» в меню «Инструменты» IE9); затем нажмите вкладку Сеть.
На приведенном выше снимке экрана показана сводка загружаемых ресурсов. Он включает информацию о запрошенных URL-адресах, файлах, загружаемых с помощью HTML или CSS, запросах на основе Ajax и ресурсах, загружаемых динамически с помощью JavaScript (например, если атрибут src элемента изображения изменяется).
В сводном представлении любой элемент можно дважды щелкнуть, чтобы открыть подробный вид этого конкретного элемента. Подробное представление включает заголовки запросов, заголовки ответов, файлы cookie и временные параметры.
Чтобы протестировать новую вкладку «Сеть» в бета-версии IE9, вы можете посетить демонстрацию «Мониторинг сети» на сайте тестового диска IE9 или узнать больше о функции вкладки «Сеть» в IEDNlog MSDN.
Проверка HTML и CSS
Эта опция (которая также доступна в меню « Найти» или нажатием Ctrl-B) дает вам возможность выбрать любой элемент и вызвать связанные с ним HTML и CSS. Вот пример, показывающий логотип SitePoint с эквивалентным HTML-кодом, отображаемым в структуре дерева-узла:
После выбора параметра « Выбрать элемент по клику» любой элемент на веб-странице, на который вы наведете курсор, получит синюю рамку (как показано на логотипе SitePoint выше). Это позволяет вам конкретно выбирать, какую область страницы вы хотите исследовать.
Рядом с деревом DOM вы увидите все стили CSS, связанные с выбранным элементом, как показано ниже:
Инструменты разработчика IE9 F12 позволяют на лету изменять стили для тестирования и отладки выбранного CSS.
Стили, перечисленные для выбранного элемента, отображаются на панели свойств (справа от Инструментов разработчика) в каскадном порядке и в соответствии со спецификой; следовательно, стили, которые появляются внизу, — это те, которые появляются позже в каскаде, или имеют большую специфичность. Переопределенные стили отображаются через линию через них, так что это можно учитывать при попытке отладки проблемы CSS.
Как и ожидается с любыми хорошими инструментами разработчика, IE9 предоставляет мощные возможности отладки скриптов на стороне клиента, которые помогают разработчикам решать проблемы, которые могут возникнуть при работе со сложным кодом. Чтобы начать отладку сценариев на своей странице, откройте Инструменты разработчика F12 и выберите вкладку « Сценарий ».
Отсюда доступно несколько вариантов. Выпадающий список позволяет вам выбрать конкретный скрипт для работы, как показано на скриншоте ниже:
Нажмите кнопку « Начать отладку» для отладки выбранного сценария. Это откроет F12 Developer Tools из окна браузера, и содержимое скрипта появится вместе с консолью справа, как показано ниже:
Любые ошибки скрипта, присутствующие на странице (как в примере выше), будут автоматически отображаться в консоли.
В процессе отладки вы можете установить точки останова (с дополнительными условиями), контролировать выполнение скрипта или проверять переменные и стек вызовов.
Любая допустимая строка кода может быть запущена внутри приостановленного сценария (нажав Enter или нажав кнопку Run script рядом с командной строкой консоли), как показано ниже:
Командная строка в консоли также позволяет регистрировать ошибки и другую информацию, чтобы помочь в отладке ваших сценариев.
Улучшение производительности скрипта
Функция профилирования сценариев предоставляет данные о времени, которое ваши сценарии тратят на пользовательские методы и встроенные функции сценариев. Кнопка на вкладке « Профилировщик » позволяет запускать и останавливать процесс профилирования, чтобы вы могли контролировать собранные данные.
На приведенном ниже снимке экрана показаны частичные результаты выполнения профиля на домашней странице SitePoint:
Каждый раз, когда вы запускаете и останавливаете профилировщик, записывается другой сеанс профилирования. Все ваши сеансы профилирования доступны в раскрывающемся списке Отчеты и доступны для поиска, как показано на рисунке ниже:
Функция поиска добавляет желтую подсветку к условиям поиска, найденным в выбранном отчете, что упрощает поиск результатов поиска в контексте отчета. Это также дает вам возможность перейти к следующему результату поиска, используя предыдущую и следующую кнопки. Это может пригодиться при попытке отследить конкретные имена методов в длинном отчете.
Это всего лишь пример возможностей улучшения и отладки скриптов, доступных разработчикам, использующим IE9 и его интегрированные инструменты разработчика F12. Благодаря буму в веб-приложениях производительность веб-сайта стала еще более важной; Инструменты IE сделали большие шаги, чтобы помочь разработчикам в этой важной области развития.
Функция, недавно добавленная в IE9 F12 Developer Tools, — это возможность изменять строку User Agent (UA), которая читается веб-сервером через заголовки запросов. Хотя это не заставит IE9 имитировать рендеринг другого браузера, он может позволить вам запускать функции и контент, предназначенные для других веб-браузеров (например, предупреждение или другое уведомление для пользователя с более старым браузером или версией браузера). ).
Каждый режим создает раскрывающийся список параметров для изменения способа отображения страницы. Хотя эти параметры точно не имитируют исходные среды визуализации, они предоставляют довольно точный и простой в использовании метод тестирования в различных режимах:
Быстрое тестирование для различных версий и режимов Internet Explorer никогда не было проще, так как разработчики могут получить прямую выгоду. Для получения дополнительной информации о браузере IE и режимах документа, проверьте эти блоги:
В наши дни сайты и веб-приложения создаются с помощью сложных сценариев. Они требуют большего внимания к производительности и требуют более быстрых средств отладки. В этом свете инструменты разработчика IE9 F12 значительно улучшены. По мере того, как мы приближаемся к запуску IE9 в 2011 году ( Platform Preview сейчас в версии 7), и по мере увеличения доли IE9 на рынке эти и другие инструменты, объединяющие поддержку веб-стандартов и оптимизированного кода, станут бесценными для веб-разработчиков.
Почему бы не принять участие в нашей короткой викторине и посмотреть, сколько вы выбрали из этой статьи.
Это руководство стало возможным благодаря поддержке Microsoft. В сотрудничестве с Microsoft и независимо написанные SitePoint, мы стремимся работать вместе, чтобы разработать контент, который будет наиболее полезным и актуальным для вас — наших читателей.
Как использовать консоль браузера для выявления ошибок на сайте
Каждый браузер оснащен консольной панелью, с помощью которой разработчики проводят тестирование веб-сайта. Вкладка 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 отображает информацию о безопасном протоколе. Если его нет, то будет сообщено, что данная страница является небезопасной. Кроме того, можно получить еще некоторые сведения о:
Lighthouse
Последний раздел представляет собой инструмент аудита с открытым исходным кодом. Благодаря ему разработчики могут повысить производительность и доступность своих веб-сайтов.
Выявление основных ошибок
При возникновении возможных ошибок мы сразу будем об этом уведомлены во вкладке Console – в ней отобразится информация с красной строкой текста. Рассмотрим самые распространенные ошибки, которые могут возникать в Google Chrome, Safari и Internet Explorer:
Устранение основных и прочих ошибок может быть проблематично. Если вы считаете, что они сильно мешают производительности вашего сайта, то рекомендуем поискать информацию о них в официальной документации браузера либо на тематических форумах.
Заключение
Иногда консоль пригождается не только верстальщикам – она бывает полезна для самых простых действий. Например, чтобы посмотреть мобильную версию, скачать картинку либо узнать используемый шрифт на сайте. В общем, применять консольное окно можно в различных ситуациях – как для просмотра содержимого сайта, так и для анализа потребления памяти.
Изучайте и находите свои применения этому инструменту – он может многое. Удачи!