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

2024 Автор: Abigail Brown | [email protected]. Последнее изменение: 2024-01-07 19:06

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

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

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

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

Google Chrome

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

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

2. Когда появится раскрывающееся меню, наведите курсор мыши на опцию Дополнительные инструменты.

   

3. Должно появиться подменю. Выберите опцию с надписью Инструменты разработчика. Вы также можете использовать следующую комбинацию клавиш вместо этого пункта меню: Chrome OS/Windows (CTRL+SHIFT+I), Mac OS X (ALT(OPTION) +КОМАНДА+I)

   

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

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

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

   

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

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

   

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

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

   

Mozilla Firefox

Секция веб-разработчика Firefox включает в себя инструменты для дизайнеров, разработчиков и тестировщиков, такие как редактор стилей и пипетка с нацеливанием на пиксели.

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

2. Когда появится раскрывающееся меню, выберите Веб-разработчик.

   

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

   • Toggle Tools: отображает или скрывает интерфейс инструментов разработчика, обычно расположенный в нижней части окна браузера. Сочетание клавиш: Mac OS X (ALT(OPTION)+COMMAND+I), Windows (CTRL+SHIFT+I)
   • Inspector: позволяет проверять и/или настраивать код 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, блокируя внешние источники и многое другое. Как и в случае с Inspector, эта функция также поддерживает удаленную отладку. Сочетание клавиш: Mac OS X (ALT(OPTION)+COMMAND+S), Windows (CTRL+SHIFT+S)
   • Style Editor: позволяет создавать новые таблицы стилей и включать их в активную веб-страницу или редактировать существующие таблицы и проверять, как ваши изменения отображаются в браузере одним щелчком мыши.. Сочетание клавиш: Mac OS X, Windows (SHIFT+F7)
   • Производительность: Предоставляет подробную информацию о производительности сети активной страницы, данные о частоте кадров, времени и состоянии выполнения JavaScript, мигании краски и многом другом. Сочетание клавиш: Mac OS X, Windows (SHIFT+F5)
   • Network: список всех сетевых запросов, инициированных браузером, с указанием соответствующего метода, исходного домена, типа, размера и истекшего времени. Сочетание клавиш: Mac OS X (ALT(OPTION)+COMMAND+Q), Windows (CTRL+SHIFT+Q)
   • Storage Inspector: Посмотрите на кеш и файлы cookie, которые хранятся на веб-сайте. Горячая клавиша: (SHIFT+F9)
   • Панель инструментов разработчика: открывает интерактивный интерпретатор командной строки. Введите help в интерпретатор, чтобы получить список всех доступных команд и их правильный синтаксис. Сочетание клавиш: Mac OS X, Windows (SHIFT+F2)
   • WebIDE: Предоставляет возможность создавать и запускать веб-приложения через реальное устройство под управлением ОС Firefox или с помощью симулятора ОС Firefox. Сочетание клавиш: Mac OS X, Windows (SHIFT+F8)
   • Browser Console: предоставляет те же функции, что и веб-консоль (см. выше). Однако все возвращаемые данные относятся ко всему приложению Firefox (включая расширения и функции на уровне браузера), а не только к активной веб-странице. Сочетание клавиш: Mac OS X (SHIFT+COMMAND+J), Windows (CTRL+SHIFT+J)
   • Responsive Design View: позволяет мгновенно просматривать веб-страницы с различными разрешениями, макетами и размерами экрана, чтобы имитировать различные устройства, включая планшеты и смартфоны. Сочетание клавиш: Mac OS X (ALT(OPTION)+COMMAND+M), Windows (CTRL+SHIFT+M)
   • Пипетка: Отображает шестнадцатеричный код цвета для отдельных выбранных пикселей.
   • Scratchpad: Блокнот позволяет писать, редактировать, интегрировать и выполнять фрагменты кода JavaScript из всплывающего окна Firefox. Откройте интерактивный документ JavaScript, который позволяет вам писать код и тестировать его на веб-сайте. Сочетание клавиш: (SHIFT+F4)
   • Service Workers: Отладьте сервисные работники вашего веб-приложения. Получите подробную информацию об их работе и ошибках.
   • Page Source: Оригинальный браузерный инструмент разработчика, эта опция просто отображает доступный исходный код для активной страницы. Сочетание клавиш: Mac OS X (COMMAND+U), Windows (CTRL+U)
   • Get More Tools: открывает коллекцию Web Developer's Toolbox на официальном сайте дополнений Mozilla, включающую около дюжины популярных расширений, таких как как Firebug и Greasemonkey.

   

Microsoft Edge/Internet Explorer

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

Microsoft больше не поддерживает Internet Explorer и рекомендует установить более новый браузер Edge. Перейдите на их сайт, чтобы загрузить новейшую версию.

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

   

2. Когда появится раскрывающееся меню, выберите параметр с надписью Инструменты разработчика.

   

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

   

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

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

   

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

   

Apple Safari (только для Mac)

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

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

   

2. Теперь должен отображаться интерфейс

   Safari Preferences, перекрывающий окно браузера. Выберите значок Дополнительно, расположенный в правой части заголовка.

   

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

   

4. Закройте интерфейс Настройки.

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

   • Открыть страницу с помощью: позволяет открыть активную веб-страницу в одном из других браузеров, установленных на вашем Mac.
   • User Agent: позволяет выбирать из более чем дюжины предопределенных значений пользовательского агента, включая несколько версий Chrome, Firefox и Internet Explorer, а также определять свои собственные строка.
   • Войти в режим адаптивного дизайна: визуализирует текущую страницу так, как она будет отображаться на разных устройствах и при разных разрешениях экрана.
   • Show Web Inspector: Запускает основной интерфейс инструментов разработки Safari, который обычно размещается в нижней части экрана браузера и содержит следующие разделы: Элементы, Сеть, Ресурсы, Временные шкалы., Отладчик, Хранилище, Консоль.
   • Show Error Console: также запускает интерфейс инструментов разработчика непосредственно на вкладке Console, которая отображает ошибки, предупреждения и другие доступные для поиска данные журнала.
   • Показать исходный код страницы: открывает вкладку Ресурсы, на которой отображается исходный код активной страницы, отнесенной к категории документа.
   • Показать ресурсы страницы: Выполняет ту же функцию, что и опция Показать источник страницы.
   • Show Snippet Editor: открывает новое окно, в котором вы можете вводить код CSS и HTML, предварительно просматривая результат на лету.
   • Show Extension Builder: Предоставляет возможность создавать или редактировать расширения Safari с помощью CSS, HTML и JavaScript.
   • Показать запись временной шкалы: открывает вкладку «Временные шкалы» и начинает отображать сетевые запросы, макет и информацию о рендеринге, а также выполнение JavaScript в режиме реального времени.
   • Empty Caches: Удаляет весь кеш, который в данный момент хранится на вашем жестком диске.
   • Отключить кеширование: останавливает кэширование Safari, чтобы весь контент извлекался с сервера при загрузке каждой страницы.
   • Отключить изображения: предотвращает отображение изображений на всех веб-страницах.
   • Отключить стили: игнорирует свойства CSS при загрузке страницы.
   • Отключить JavaScript: Ограничивает выполнение JavaScript на всех страницах.
   • Отключить расширения: запрещает запуск всех установленных расширений в браузере.
   • Отключить взломы, специфичные для сайта: если Safari был изменен для явного решения проблем, характерных для активной веб-страницы, этот параметр заблокирует эти изменения, чтобы страница нагрузки, как это было бы до введения этих модификаций.
   • Disable Local File Restrictions: Позволяет браузеру иметь доступ к файлам на ваших локальных дисках, действие, которое по умолчанию ограничено из соображений безопасности.
   • Disable Cross-Origin Restrictions: Эти ограничения устанавливаются по умолчанию для предотвращения XSS и других потенциальных опасностей. Однако их часто необходимо временно отключать в целях разработки.
   • Разрешить JavaScript из поля интеллектуального поиска: если этот параметр включен, он дает возможность вводить URL-адреса с javascript: встроен непосредственно в адресную строку.
   • Считать сертификаты SHA-1 небезопасными: SSL-сертификаты, использующие алгоритм SHA-1, считаются устаревшими и уязвимыми.