Как использовать инструменты для разработчиков веб-браузера

В дополнение к большинству разработчиков браузеров, ориентирующихся на повседневного пользователя, который ищет веб-серфинга, они также обслуживают веб-разработчиков, дизайнеров и специалистов по обеспечению качества, которые помогают создавать приложения и сайты, к которым эти пользователи обращаются, путем интеграции мощных инструментов прямо в браузеры самих себя.

Прошли те времена, когда единственные инструменты программирования и тестирования, найденные в браузере, позволяли вам просматривать исходный код страницы и ничего больше. Сегодняшние браузеры позволяют проводить гораздо более глубокое погружение, выполняя такие функции, как выполнение и отладку фрагментов кода JavaScript, проверка и редактирование элементов DOM, мониторинг сетевого трафика в режиме реального времени, когда ваше приложение или страница загружаются для выявления узких мест, анализа производительности CSS, гарантируя, что ваш код не используя слишком много памяти или слишком много циклов процессора, и многое другое. С точки зрения тестирования вы можете воспроизвести, как приложение или веб-страница будет отображаться в разных браузерах, а также на разных устройствах и платформах с помощью магии отзывчивого дизайна и встроенных симуляторов. Самое приятное то, что вы можете сделать все это, не выходя из своего браузера!

В приведенных ниже учебниках вы узнаете, как получить доступ к этим инструментам разработчика в нескольких популярных веб-браузерах.

Гугл Хром

Инструменты разработчика Chrome позволяют редактировать и отлаживать код, проверять отдельные компоненты, чтобы выявлять проблемы с производительностью, имитировать различные экраны устройств, включая те, которые работают под управлением Android или iOS, и выполнять несколько других полезных функций.

1. Нажмите кнопку главного меню Chrome, отмеченную тремя горизонтальными линиями и расположенную в правом верхнем углу браузера.
2. Когда появится раскрывающееся меню, наведите указатель мыши на Другие инструменты вариант.
3. Теперь должно появиться подменю. Выберите опцию, помеченную Инструменты разработчика , Вы также можете использовать следующую комбинацию клавиш вместо этого пункта меню: Chrome OS / Windows ( CTRL + SHIFT + I ), Mac OS X ( ALT (OPTION) + COMMAND + I )
4. Теперь должен отображаться интерфейс Chrome Developer Tools, как показано в этом скриншоте. В зависимости от вашей версии Chrome исходный макет, который вы видите, может немного отличаться от представленного здесь. Основной центр инструментов разработчика, обычно расположенный на нижней или правой стороне экрана, содержит следующие вкладки.Элементы: Предоставляет возможность проверять CSS и HTML-код, а также редактировать CSS на лету, видя эффекты ваших изменений в реальном времени.Приставка: Консоль JavaScript для Chrome позволяет выполнять прямую ввод команд, а также диагностическую отладку.Источники: Позволяет отлаживать код JavaScript через мощный графический интерфейс.Сеть: Классифицирует и отображает подробную информацию о каждой связанной операции с активным приложением или страницей, включая полные заголовки запросов и ответов, а также расширенные метрики времени.График: Позволяет проводить углубленный анализ всех действий, которые происходят в браузере, как только начинается запрос на загрузку страницы или приложения.
5. В дополнение к этим разделам вы также можете получить доступ к следующим инструментам через >> значок, расположенный справа от График Вкладка.Профиль: Разбиты на Профайлер процессора а также Профилировщик кучи разделов, обеспечивает исчерпывающее использование памяти и общее время выполнения активного приложения или страницы.Безопасность: Выделяет проблемы с сертификатами и другие проблемы, связанные с безопасностью, с активной страницей или приложением.Ресурсы: Здесь вы можете проверить файлы cookie, локальное хранилище, кеш приложения и другие локальные источники данных, используемые текущей веб-страницей или приложением.Ревизии: Предлагает способы оптимизации времени загрузки страницы и приложения и общей производительности.
6. Режим устройства позволяет просматривать активную страницу в симуляторе, которая отображает ее почти так же, как она появится на одном из более чем дюжины устройств, включая несколько известных моделей Android и iOS, таких как iPad, iPhone и Samsung Galaxy. Вам также предоставляется возможность эмулировать пользовательские разрешения экрана в соответствии с вашими конкретными потребностями в разработке или тестировании. Переключить Режим устройства вкл. и выкл., выберите значок мобильного телефона, расположенный непосредственно слева от элементы Вкладка.
7. Вы также можете настроить внешний вид своих инструментов разработчика, щелкнув по кнопке меню, представленной тремя вертикально расположенными точками и расположенными на правой стороне вышеупомянутых вкладок. Из этого раскрывающегося меню вы можете переместить док-станцию, показать или скрыть различные инструменты, а также запустить более продвинутые элементы, такие как инспектор устройств. Вы обнаружите, что интерфейс самого инструмента разработчика очень настраивается с помощью настроек, найденных в этом разделе.

Mozilla Firefox

В разделе веб-разработчиков Firefox содержатся инструменты для дизайнеров, разработчиков и тестеров, такие как редактор стилей и пипетка-указатель eyedropper.

Рекомендованное чтение Lifewire:Лучшие 25 пользовательских скриптов Greasemonkey и Tampermonkey

1. Нажмите кнопку главного меню Firefox, представленную тремя горизонтальными линиями и расположенную в правом верхнем углу окна браузера.
2. Когда появится раскрывающееся меню, выберите значок с надписью разработчик , Веб-разработчик теперь должно отображаться меню, содержащее следующие параметры.Вы заметите, что в большинстве пунктов меню есть сочетания клавиш, связанные с ними.Инструменты Toggle: Отображает или скрывает интерфейс инструментов разработчика, обычно расположенный в нижней части окна браузера. Комбинация клавиш: Mac OS X ( ALT (OPTION) + COMMAND + I ), Windows ( CTRL + SHIFT + I )Инспектор: Позволяет вам проверять и / или настраивать CSS и HTML-код на активной странице, а также на переносном устройстве с помощью удаленной отладки. Комбинация клавиш: Mac OS X ( Alt (Option) + Command + C, ), Windows ( CTRL + SHIFT + C )Веб-консоль: Позволяет выполнять JavaScript-выражения на активной странице, а также просматривать разнообразный набор зарегистрированных данных, включая предупреждения о безопасности, сетевые запросы, сообщения CSS и т. Д. Комбинация клавиш: Mac OS X ( Alt (Option) + Command + K ), Windows ( CTRL + SHIFT + K )Debugger: Отладчик JavaScript позволяет точно определять и устранять дефекты, устанавливая точки останова, проверяя узлы DOM, внешние источники черного бокса и многое другое. Как и в случае с Инспектор , эта функция также поддерживает удаленное отладки. Комбинация клавиш: Mac OS X ( Alt (Option) + Command + S, ), Windows ( CTRL + SHIFT + S) Редактор стиля: Позволяет создавать новые таблицы стилей и включать их с активной веб-страницей или редактировать существующие листы и проверять, как ваши изменения отображаются в браузере одним щелчком мыши. Комбинация клавиш: Mac OS X, Windows ( SHIFT + F7 )Спектакль: Предоставляет подробную разбивку производительности сети на странице, данные о частоте кадров, время выполнения JavaScript и состояние, мигание краски и многое другое. Комбинация клавиш: Mac OS X, Windows ( SHIFT + F5 )Сеть: Перечисляет каждый сетевой запрос, инициированный браузером, вместе с соответствующим методом, исходным доменом, типом, размером и временем. Комбинация клавиш: Mac OS X ( Alt (Option) + Command + Q ), Windows ( CTRL + SHIFT + Q )Панель инструментов разработчика: Открывает интерактивный интерпретатор командной строки. Войти Помогите в интерпретатор для списка всех доступных команд и их правильного синтаксиса. Комбинация клавиш: Mac OS X, Windows ( SHIFT + F2 )WebIDE: Предоставляет возможность создавать и выполнять веб-приложения через фактическое устройство, работающее под управлением ОС Firefox или с помощью симулятора Firefox OS. Комбинация клавиш: Mac OS X, Windows ( SHIFT + F8 )Консоль браузера: Обеспечивает ту же функциональность, что и Веб-консоль (см. выше). Однако все данные возвращаются для всего приложения Firefox (включая расширения и функции уровня браузера), а не только для активной веб-страницы. Комбинация клавиш: Mac OS X ( Shift + Ctrl + J, ), Windows ( CTRL + SHIFT + J )Отзывчивый дизайн: Позволяет мгновенно просматривать веб-страницу в разных разрешениях, макетах и ​​размерах экрана, чтобы имитировать несколько устройств, включая планшеты и смартфоны. Комбинация клавиш: Mac OS X ( Alt (Option) + Command + М ), Windows ( CTRL + SHIFT + M )Пипетка: Отображает шестнадцатеричный цветовой код для отдельных выбранных пикселей.Scratchpad: Позволяет писать, редактировать, интегрировать и выполнять фрагменты кода JavaScript из всплывающего окна Firefox. Комбинация клавиш: Mac OS X, Windows ( SHIFT + F4 )Исходный текст страницы: Первоначальный инструмент разработчика на основе браузера, этот параметр просто отображает доступный исходный код для активной страницы. Комбинация клавиш: Mac OS X ( COMMAND + U ), Windows ( CTRL + U )Получить дополнительные инструменты: Открывает Панель инструментов веб-разработчиков на сайте официальных дополнений Mozilla, где представлено около десятка популярных расширений, таких как Firebug и Greasemonkey.

Microsoft Edge / Internet Explorer

Обычно упоминается как Инструменты для разработчиков F12 , уважение к сочетанию клавиш, которое запустило интерфейс с более ранних версий Internet Explorer, набор инструментов dev в IE11 и Microsoft Edge прошел долгий путь с момента его создания, предлагая очень удобную группу мониторов, отладчиков, эмуляторов и компиляторы.

1. Нажми на Больше действий меню, представленное тремя точками и расположенное в верхнем правом углу окна браузера. Когда появится раскрывающееся меню, выберите опцию, помеченную Инструменты для разработчиков F12 , Как я уже упоминал, вы также можете получить доступ к инструментам через F12 Сочетание клавиш.
2. Теперь интерфейс разработки должен отображаться, как правило, в нижней части окна браузера. Доступны следующие инструменты, каждый из которых доступен, нажимая на соответствующий заголовок табуляции или используя сопутствующую комбинацию клавиш.DOM Explorer: Позволяет редактировать таблицы стилей и HTML на активной странице, предоставляя измененные результаты по мере продвижения. Использует функциональность IntelliSense для автоматического заполнения кода, где это применимо. Сочетание клавиш: (CTRL + 1) Приставка: Предоставляет возможность отправлять отладочную информацию, включая счетчики, таймеры, трассировки и настраиваемые сообщения через интегрированный API. Кроме того, вы можете вводить код в активную веб-страницу и изменять значения, назначенные отдельным переменным в режиме реального времени. Сочетание клавиш: (CTRL + 2) Debugger: Позволяет вам устанавливать точки останова и отлаживать код во время его выполнения, если необходимо, по очереди. Сочетание клавиш: (CTRL + 3) Сеть: Перечисляет каждый сетевой запрос, инициированный браузером во время загрузки и исполнения страницы, включая информацию о протоколе, тип содержимого, использование полосы пропускания и многое другое. Сочетание клавиш: (CTRL + 4) Спектакль: Подробная информация о частоте кадров, использовании процессора и других показателях, связанных с производительностью, чтобы ускорить время загрузки страницы и другие действия. Сочетание клавиш: (CTRL + 5) Объем памяти: Помогает вам изолировать и исправлять потенциальные утечки памяти на текущей веб-странице, отображая временную шкалу использования памяти вместе с моментальными снимками с разных временных интервалов. Сочетание клавиш: (CTRL + 6) Эмуляция: Показывает, как будет отображаться активная страница с различными разрешениями и размерами экрана, имитируя смартфоны, планшеты и другие устройства. Также предоставляет возможность изменять пользовательский агент и ориентацию страницы, а также имитировать различные геолокации, введя широту и долготу. Сочетание клавиш: (CTRL + 7)
3. Чтобы отобразить Приставка в то время как в любом другом инструменте щелкните по квадратной кнопке с правой скобкой внутри нее, расположенной в правом верхнем углу интерфейса инструментов разработки.
4. Чтобы открепить, интерфейс инструментов разработчика, чтобы он стал отдельным окном, нажмите кнопку, представленную двумя каскадными прямоугольниками, или используйте следующую комбинацию клавиш: CTRL + P , Вы можете поместить инструменты обратно в исходное положение, нажав CTRL + P второй раз.

Apple Safari (только для OS X)

Разнообразный набор инструментов для Safari отражает большое сообщество разработчиков, которое использует Mac для своих потребностей в дизайне и программировании. В дополнение к мощной консоли и традиционным функциям регистрации и отладки также предоставляется простой в использовании режим гибкого дизайна и инструмент для создания собственных расширений браузера.

1. Нажмите на Сафари в меню браузера, расположенном в верхней части экрана. Когда появится раскрывающееся меню, выберите предпочтения , Вы также можете использовать следующую комбинацию клавиш вместо этого пункта меню: Command + запятая (,)
2. Сафари предпочтения интерфейс должен теперь отображаться, накладываясь на окно вашего браузера. Нажми на продвинутый значок, расположенный в правой части заголовка.
3. продвинутый предпочтения должны быть теперь видны. В нижней части этого экрана указан вариант с надписью Показать меню «Разработка» в строке меню , а также флажок. Если в поле не указан флажок, нажмите один раз, чтобы поместить его туда.
4. Закрой предпочтения интерфейс, нажав на красный 'x', расположенный в верхнем левом углу.
5. Теперь вы должны заметить новую опцию в меню браузера с именем развивать , расположенный между закладки а также Окно , Нажмите на этот пункт меню. Появится раскрывающееся меню, содержащее следующие параметры.Открытая страница с: Позволяет открывать активную веб-страницу в одном из других браузеров, установленных на вашем Mac.Пользовательский агент: Позволяет выбрать из более чем дюжины предопределенных значений пользовательского агента, включая несколько версий Chrome, Firefox и Internet Explorer, а также определить собственную собственную строку.Войдите в режим адаптивного дизайна: Отображает текущую страницу так, как она будет отображаться на разных устройствах и при разных разрешениях экрана.Показать веб-инспектора: Запускает основной интерфейс для инструментов разработчика Safari, обычно размещаемый в нижней части экрана вашего браузера и содержащий следующие разделы: элементы , сеть , Ресурсы , Хронологические , дебаггер , Место хранения , Приставка .Показать консоль ошибок: Также запускает интерфейс инструментов разработчика, непосредственно Приставка которая отображает ошибки, предупреждения и другие данные журнала поиска.Показать страницу Источник: Открывает Ресурсы которая отображает исходный код для активной страницы, классифицированной по документу.Показать ресурсы страницы: Выполняет ту же функцию, что и Показать источник страницы вариант.Показать редактор фрагмента: Открывает новое окно, в котором вы можете ввести CSS и HTML-код, предварительно просматривая его вывод «на лету».Показать расширение: Предоставляет возможность создавать или редактировать расширения Safari с помощью CSS, HTML и JavaScript.Показать хронологию записи: Открывает Хронологические и начинает отображать сетевые запросы, информацию о макете и рендеринге, а также выполнение JavaScript в режиме реального времени.Пустые кеши: Удаляет весь кеш, хранящийся на вашем жестком диске.Отключить кеши: Останавливает Safari от кеширования, чтобы весь контент извлекался с сервера при каждой загрузке страницы.Отключить изображения: Предотвращает показ изображений на всех веб-страницах.Отключить стили: Игнорирует свойства CSS при загрузке страницы.Отключить JavaScript: Ограничивает выполнение JavaScript на всех страницах.Отключить расширения: Запрещает запуск всех установленных расширений в браузере.Отключить хаки для сайтов: Если Safari был изменен, чтобы явно обрабатывать проблемы, специфичные для активной веб-страницы, этот параметр блокирует эти изменения, чтобы страница загружалась так же, как и до внесения этих изменений.Отключить локальные ограничения файлов: Позволяет браузеру иметь доступ к файлам на ваших локальных дисках, действие по умолчанию ограничено по соображениям безопасности.Отключить ограничения перекрестного происхождения: Эти ограничения устанавливаются по умолчанию для предотвращения XSS и других потенциальных опасностей. Тем не менее, они часто должны быть временно отключены для целей развития.Разрешить JavaScript из Smart Search Field: Когда включено, предоставляется возможность вводить URL-адреса с JavaScript: включен непосредственно в адресную строку.Относитесь к сертификатам SHA-1 как к небезопасным: Сертификаты SSL, использующие алгоритм SHA-1, широко считаются устаревшими и уязвимыми.