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

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

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

   
   




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

   
   

• Инструменты переключения: Отображает или скрывает интерфейс инструментов разработчика, обычно расположенный в нижней части окна браузера. Сочетание клавиш: 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)
• Инспектор хранения: Посмотрите на кеш и куки, которые хранятся на сайте. Сочетание клавиш: (SHIFT + F9)
• Панель инструментов разработчика: Открывает интерактивный интерпретатор командной строки. Войти Помогите в интерпретатор для списка всех доступных команд и их правильный синтаксис. Сочетание клавиш: Mac OS X, Windows (SHIFT + F2)
• WebIDE: Предоставляет возможность создавать и запускать веб-приложения через реальное устройство под управлением Firefox OS или через симулятор 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.
• Scratchpad: Откройте интерактивный документ JavaScript, который позволяет писать в коде и тестировать его на веб-сайте. Сочетание клавиш: (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. Выбрать Больше действий, представлена три точки и расположен в верхнем правом углу окна браузера. Когда появится раскрывающееся меню, выберите параметр с меткой Инструменты разработчика.

   
   




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 + COMMA(,)




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




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




4. Закрой предпочтения интерфейс, нажав на красныйИкс‘найдено в верхнем левом углу.




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, считаются устаревшими и уязвимыми.