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

Интегрированные наборы инструментов для веб-дизайнеров, разработчиков и тестеров

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

Прошли те времена, когда единственные инструменты программирования и тестирования, доступные в браузере, позволяли вам просматривать исходный код страницы и ничего более. Современные браузеры позволяют вам гораздо глубже погружаться, выполняя такие вещи, как выполнение и отладка фрагментов 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, как показано на снимке экрана с примерами. В зависимости от вашей версии Chrome, первоначальный макет, который вы видите, может немного отличаться от представленного здесь. Основной центр инструментов разработчика, обычно расположенный в нижней или правой части экрана, содержит следующие вкладки.

   • Элементы . Предоставляет возможность проверять код CSS и HTML, а также редактировать CSS на лету, наблюдая за изменениями в реальном времени.
   • Консоль: консоль JavaScript в Chrome допускает прямой ввод команд, а также диагностическую отладку.
   • Источники . Позволяет отлаживать код JavaScript через мощный графический интерфейс.
   • Сеть: классифицирует и отображает подробную информацию о каждой связанной операции в активном приложении или странице, включая полные заголовки запросов и ответов, а также расширенные метрики синхронизации.
   • Производительность: проверьте производительность сайта, отслеживая время загрузки. Вы также можете моделировать различные обстоятельства, например, возможности мобильного процессора.

5. В дополнение к этим разделам вы также можете получить доступ к следующим инструментам с помощью значка >> , расположенного справа от вкладки Эффективность .

   

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

6. Режим устройства позволяет просматривать активную страницу в симуляторе, который отображает ее почти точно так, как она выглядит на одном из более чем дюжины устройств, включая несколько известных моделей Android и iOS, таких как iPad, iPhone и Samsung Galaxy. Вам также предоставляется возможность эмулировать пользовательские разрешения экрана в соответствии с вашими потребностями при разработке или тестировании.

   Чтобы включить или выключить Режим устройства , выберите значок мобильного телефона , расположенный слева от вкладки Элементы .

   

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

   

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

Mozilla Firefox

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

1. Выберите главное меню Firefox, представленное тремя горизонтальными линиями и расположенное в верхнем правом углу окна браузера.

   

2. Когда появится раскрывающееся меню, выберите Веб-разработчик . Теперь должно появиться Меню веб-разработчика , содержащее следующие параметры. Вы заметите, что с большинством пунктов меню связаны сочетания клавиш.

   

• Инструменты переключения . Отображает или скрывает интерфейс инструментов разработчика, обычно расположенный в нижней части окна браузера. Сочетание клавиш: Mac OS X ( ALT (ОПЦИЯ) + КОМАНДА + I ), Windows ( CTRL + SHIFT + I )
• Инспектор . Позволяет проверять и/или настраивать код CSS и HTML на активной странице, а также на переносном устройстве с помощью удаленной отладки. Сочетание клавиш: Mac OS X ( ALT (ОПЦИЯ) + КОМАНДА + C ), Windows ( CTRL + SHIFT + C )
• Веб-консоль . Позволяет выполнять выражения JavaScript на активной странице, а также просматривать разнообразный набор регистрируемых данных, включая предупреждения безопасности, сетевые запросы, сообщения CSS и многое другое. Сочетание клавиш: Mac OS X ( ALT (ОПЦИЯ) + КОМАНДА + K ), Windows ( CTRL + SHIFT + K )
• Отладчик: JavaScript Debugger позволяет точно определять и исправлять дефекты, устанавливая точки останова, проверяя DOM-узлы, внешние источники чёрного ящика и многое другое. Как и в случае с Inspector , эта функция также поддерживает удаленную отладку. Сочетание клавиш: Mac OS X ( ALT (ОПЦИЯ) + КОМАНДА + S ), Windows ( CTRL + SHIFT + S )
• Редактор стилей . Позволяет создавать новые таблицы стилей и включать их в активную веб-страницу, а также редактировать существующие таблицы и проверять, как ваши изменения отображаются в браузере одним щелчком мыши. Сочетание клавиш: Mac OS X, Windows ( SHIFT + F7 )

• Производительность . Предоставляет подробное описание производительности сети активной страницы, данных о частоте кадров, времени и состоянии выполнения JavaScript, мигания краски и многого другого. Сочетание клавиш: Mac OS X, Windows ( SHIFT + F5 )
• Сеть . Отображает каждый сетевой запрос, инициированный браузером, а также соответствующий метод, исходный домен, тип, размер и прошедшее время. Сочетание клавиш: Mac OS X ( ALT (ОПЦИЯ) + КОМАНДА + Q ), Windows ( CTRL + SHIFT + Q )
• Инспектор хранилища . Посмотрите на кэш и файлы cookie, которые хранятся на веб-сайте. Сочетание клавиш: (SHIFT + F9)
• Панель инструментов разработчика . Открывает интерактивный интерпретатор командной строки. Введите help в интерпретатор, чтобы получить список всех доступных команд и их правильный синтаксис. Сочетание клавиш: Mac OS X, Windows ( SHIFT + F2 )
• WebIDE: . Предоставляет возможность создавать и запускать веб-приложения через реальное устройство под управлением Firefox OS или с помощью Firefox OS Simulator. Сочетание клавиш: Mac OS X, Windows ( SHIFT + F8 )
• Консоль браузера . Предоставляет те же функции, что и Веб-консоль (см. выше). Однако все возвращаемые данные относятся ко всему приложению Firefox (включая расширения и функции уровня браузера), а не только к активной веб-странице. Сочетание клавиш: Mac OS X ( SHIFT + COMMAND + J ), Windows ( CTRL + SHIFT + J )

• Адаптивное представление дизайна . Позволяет мгновенно просматривать веб-страницы в разных разрешениях, макетах и ​​размерах экрана для имитации нескольких устройств, включая планшеты и смартфоны.Сочетание клавиш: Mac OS X ( ALT (ОПЦИЯ) + КОМАНДА + M ), Windows ( CTRL + SHIFT + M )
• Пипетка: . Отображает шестнадцатеричный код цвета для индивидуально выбранных пикселей. Блокнот: позволяет писать, редактировать, интегрировать и выполнять фрагменты кода JavaScript из всплывающего окна Firefox.
• Scratchpad . Откройте интерактивный документ JavaScript, который позволяет писать код и тестировать его на веб-сайте. Сочетание клавиш: (SHIFT + F4)
• Сервисные работники . Отладка сервисных работников для вашего веб-приложения. Получите подробную информацию об их производительности и ошибках.
• Источник страницы . Исходный инструмент разработчика на основе браузера. Этот параметр просто отображает доступный исходный код активной страницы. Сочетание клавиш: Mac OS X ( КОМАНДА + U ), Windows ( CTRL + U )
• Получить дополнительные инструменты . Открывает коллекцию Инструментария веб-разработчика на официальном сайте дополнений Mozilla, содержащую около десятка популярных расширений, таких как Firebug и Грязная обезьяна.

Microsoft Edge/Internet Explorer

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

1. Выберите Дополнительные действия , обозначенные тремя точками и расположенные в верхнем правом углу окна браузера. Когда появится раскрывающееся меню, выберите параметр с меткой Инструменты разработчика .

   

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

   

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

3. Чтобы отобразить Консоль , находясь в любом из других инструментов, нажмите квадратную кнопку с правой скобкой внутри нее, расположенной в верхнем правом углу интерфейса инструментов разработки. ,

   

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

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

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

1. Выберите Safari в меню браузера, расположенного в верхней части экрана. Когда появится раскрывающееся меню, выберите Настройки . Вместо этого пункта меню можно также использовать следующую комбинацию клавиш: КОМАНДА + КОММА (,)

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

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

4. Закройте интерфейс Настройки , нажав на красный значок x в верхнем левом углу.

5. Теперь вы должны заметить новый параметр в меню браузера под названием Разработка , расположенный между закладками и окном . Нажмите на этот пункт меню. Теперь должно появиться раскрывающееся меню, содержащее следующие параметры.

• Открыть страницу с помощью . Позволяет открыть активную веб-страницу в одном из других браузеров, установленных на вашем Mac.
• Пользовательский агент . Позволяет выбрать из более чем десятка предварительно определенных значений пользовательских агентов, включая несколько версий Chrome, Firefox и Internet Explorer, а также определить собственную строку.
• Войдите в режим адаптивного дизайна . Отображает текущую страницу так, как она выглядит на разных устройствах и с разным разрешением экрана.
• Показать веб-инспектор : запускает основной интерфейс для инструментов разработчика Safari, который обычно располагается в нижней части экрана браузера и содержит следующие разделы: Элементы , Сеть , Ресурсы , Временные шкалы , Отладчик , Хранилище , Консоль .
• Показать консоль ошибок . Также запускает интерфейс инструментов разработчика непосредственно на вкладке Консоль , где отображаются ошибки, предупреждения и другие данные журнала, доступные для поиска.
• Показать источник страницы . Открывает вкладку Ресурсы , в которой отображается исходный код активной страницы, классифицированной по документу.
• Показать ресурсы страницы: выполняет ту же функцию, что и опция Показать источник страницы .

• Показать редактор фрагментов . Открывает новое окно, в котором можно ввести код CSS и HTML, предварительно просматривая его результаты на лету.
• Показать построитель расширений . Предоставляет возможность создавать или редактировать расширения Safari с помощью CSS, HTML и JavaScript.
• Показать запись временной шкалы. Открывает вкладку Временные шкалы и начинает отображать сетевые запросы, информацию о макете и рендеринге, а также выполнение JavaScript в режиме реального времени.
• Пустые кеши . Удаляет весь кеш, хранящийся на вашем жестком диске.
• Отключить кеширование . Запрещает Safari кэшировать, чтобы при каждой загрузке страницы весь контент извлекался с сервера.
• Отключить изображения . Запрещает отображение изображений на всех веб-страницах.
• Отключить стили . Игнорирует свойства CSS при загрузке страницы.
• Отключить JavaScript . Ограничивает выполнение JavaScript на всех страницах.
• Отключить расширения . Запрещает запуск всех установленных расширений в браузере.
• Отключить хаки, специфичные для сайта. Если Safari был изменен для явного решения проблем, связанных с активной веб-страницей, этот параметр заблокирует эти изменения, так что страница загружается так, как это было до них. вносимые модификации.

• Отключить локальные ограничения на файлы . Позволяет браузеру иметь доступ к файлам на локальных дисках. Это действие по умолчанию ограничено по соображениям безопасности.
• Отключить ограничения перекрестного происхождения . Эти ограничения установлены по умолчанию для предотвращения XSS и других потенциальных опасностей. Однако их часто необходимо временно отключить в целях разработки.
• Разрешить JavaScript из поля интеллектуального поиска . Если этот параметр включен, он позволяет вводить URL-адреса с помощью javascript: , встроенного непосредственно в адресную строку.
• Считайте сертификаты SHA-1 небезопасными: сертификаты SSL, использующие алгоритм SHA-1, широко считаются устаревшими и уязвимыми.