В дополнение к большинству производителей браузеров, ориентирующихся на обычных пользователей, желающих просматривать веб-страницы, они также обслуживают веб-разработчиков, дизайнеров и специалистов по обеспечению качества, которые помогают создавать приложения и сайты, к которым имеют доступ эти пользователи, путем интеграции мощных инструментов прямо в браузеры. самих себя.
Прошли те времена, когда единственные инструменты программирования и тестирования, доступные в браузере, позволяли вам просматривать исходный код страницы и ничего более. Современные браузеры позволяют вам гораздо глубже погружаться, выполняя такие вещи, как выполнение и отладка фрагментов JavaScript , проверка и редактирование элементов DOM, мониторинг сетевого трафика в реальном времени при загрузке приложения или страницы для выявления узких мест, анализ производительности CSS, обеспечение того, чтобы ваш код был не использовать слишком много памяти или слишком много циклов ЦП и многое другое.
С точки зрения тестирования вы можете воспроизвести то, как приложение или веб-страница будут отображаться в разных браузерах, а также на разных устройствах и платформах с помощью магии адаптивного дизайна и встроенных симуляторов. Самое приятное, что вы можете делать все это, не выходя из браузера!
В приведенных ниже руководствах вы узнаете, как получить доступ к этим инструментам разработчика в нескольких популярных веб-браузерах .
Гугл Хром
Инструменты разработчика Chrome позволяют редактировать и отлаживать код, проводить аудит отдельных компонентов для выявления проблем с производительностью, моделировать различные экраны устройств, в том числе под управлением Android или iOS , и выполнять несколько других полезных функций.
-
Выберите главное меню Chrome , помеченное тремя горизонтальными линиями и расположенное в верхнем правом углу браузера.
-
Когда появится раскрывающееся меню, наведите курсор мыши на параметр « Дополнительные инструменты» .
-
Теперь должно появиться подменю. Выберите опцию « Инструменты разработчика» . Вместо этого пункта меню можно также использовать следующую комбинацию клавиш: Chrome OS / Windows ( CTRL + SHIFT + I ), Mac OS X ( ALT (OPTION) + COMMAND + I )
-
Теперь должен отобразиться интерфейс инструментов разработчика Chrome, как показано на снимке экрана с примерами. В зависимости от вашей версии Chrome, первоначальный макет, который вы видите, может немного отличаться от представленного здесь. Основной центр инструментов разработчика, обычно расположенный в нижней или правой части экрана, содержит следующие вкладки.
-
В дополнение к этим разделам вы также можете получить доступ к следующим инструментам через значок >> , расположенный справа от вкладки « Производительность ».
- Память : мониторинг и запись использования памяти на веб-странице. Вы можете увидеть, насколько тяжелым является JavaScript на вашем сайте.
- Безопасность : освещает проблемы с сертификатами и другие проблемы, связанные с безопасностью, с активной страницей или приложением.
- Приложение . Проверьте ресурсы, используемые веб-приложением. Получите полную разбивку того, что используется.
- Аудит : предлагает способы оптимизации времени загрузки страницы или приложения и общей производительности.
-
Режим устройства позволяет просматривать активную страницу в симуляторе, который отображает ее почти точно так, как она выглядит на одном из более чем десятка устройств, включая несколько известных моделей Android и iOS, таких как iPad, iPhone и Samsung Galaxy. Вам также предоставляется возможность эмулировать пользовательские разрешения экрана в соответствии с вашими потребностями при разработке или тестировании.
Чтобы включить или выключить режим устройства , выберите значок мобильного телефона, расположенный слева от вкладки « Элементы ».
-
Вы также можете настроить внешний вид ваших инструментов разработчика, сначала выбрав кнопку меню, представленную тремя вертикально расположенными точками и расположенную в крайней правой части вышеупомянутых вкладок.
Из этого выпадающего меню вы можете изменить положение док-станции, показать или скрыть различные инструменты, а также запустить более сложные элементы, такие как инспектор устройств. Вы обнаружите, что сам интерфейс инструментов разработки инструментов сильно настраивается с помощью настроек, описанных в этом разделе.
Mozilla Firefox
Раздел для веб-разработчиков Firefox содержит инструменты для дизайнеров, разработчиков и тестеров, такие как редактор стилей и пипетка с таргетингом на пиксели.
-
Выберите главное меню Firefox , представленное тремя горизонтальными линиями и расположенное в верхнем правом углу окна браузера.
-
Когда появится раскрывающееся меню, выберите « Веб-разработчик» .
-
Теперь должно появиться меню веб-разработчика , содержащее следующие параметры. Вы заметите, что с большинством пунктов меню связаны сочетания клавиш.
- Инструменты переключения : отображает или скрывает интерфейс инструментов разработчика, обычно расположенный в нижней части окна браузера. Сочетание клавиш: Mac OS X ( ALT (опция) + COMMAND + I ), Windows ( CTRL + SHIFT + I )
- Инспектор : позволяет проверять и / или настраивать код CSS и HTML на активной странице, а также на переносном устройстве с помощью удаленной отладки. Сочетание клавиш: Mac OS X ( ALT (опция) + COMMAND + C ), Windows ( CTRL + SHIFT + C )
- Веб-консоль : позволяет выполнять выражения JavaScript на активной странице, а также просматривать разнообразный набор зарегистрированных данных, включая предупреждения безопасности, сетевые запросы, сообщения CSS и многое другое. Сочетание клавиш: Mac OS X ( ALT (опция) + COMMAND + K ), Windows ( CTRL + SHIFT + K )
- Debugger : JavaScript Debugger позволяет определить и исправить дефекты, установив точки останова, проверки DOM узлов, черный бокс внешних источников, и многое другое. Как и в случае с инспектором , эта функция также поддерживает удаленную отладку. Сочетание клавиш: Mac OS X ( ALT (опция) + COMMAND + S ), Windows ( CTRL + SHIFT + S )
- Редактор стилей : позволяет создавать новые таблицы стилей и включать их в активную веб-страницу, а также редактировать существующие таблицы и проверять, как ваши изменения отображаются в браузере одним щелчком мыши. Сочетание клавиш: Mac OS X, Windows ( SHIFT + F7 )
- Производительность . Предоставляет подробную информацию о производительности сети активной страницы, данных о частоте кадров, времени и состоянии выполнения JavaScript, мигании краски и многом другом. Сочетание клавиш: Mac OS X, Windows ( SHIFT + F5 )
- Сеть : перечисляет каждый сетевой запрос, инициированный браузером, а также соответствующий метод, исходный домен, тип, размер и прошедшее время. Сочетание клавиш: Mac OS X ( ALT (опция) + COMMAND + 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 (опция) + COMMAND + M ), Windows ( CTRL + SHIFT + M )
- Пипетка : отображает шестнадцатеричный код цвета для индивидуально выбранных пикселей.
- Scratchpad : Scratchpad позволяет писать, редактировать, интегрировать и выполнять фрагменты кода JavaScript из всплывающего окна Firefox. Откройте интерактивный документ JavaScript, который позволяет писать в коде и тестировать его на веб-сайте. Сочетание клавиш: (SHIFT + F4)
- Сервисные работники : отлаживайте сервисные работники в вашем веб-приложении. Получите подробную информацию об их производительности и ошибках.
- Источник страницы : исходный инструмент разработчика на основе браузера, эта опция просто отображает доступный исходный код для активной страницы. Сочетание клавиш: Mac OS X ( COMMAND + U ), Windows ( CTRL + U )
- Получить дополнительные инструменты : открывает коллекцию инструментов веб-разработчика на официальном сайте дополнений Mozilla, где представлено около десятка популярных расширений, таких как Firebug и Greasemonkey .
Microsoft Edge / Internet Explorer
Обычно называемый F12 Developer Tools , дань уважения сочетанию клавиш, который запустил интерфейс с более ранних версий Internet Explorer, набор инструментов dev в IE11 и Microsoft Edge прошел долгий путь с момента своего создания, предлагая очень удобную группу мониторы, отладчики, эмуляторы и компиляторы на лету.
-
Выберите Дополнительные действия , представленные тремя точками и расположенные в верхнем правом углу окна браузера.
-
Когда появится раскрывающееся меню, выберите параметр « Инструменты разработчика» .
-
Теперь интерфейс разработки должен отображаться, как правило, в нижней части окна браузера. Доступны следующие инструменты, каждый из которых доступен путем нажатия на заголовок соответствующей вкладки или с помощью сочетания клавиш.
- DOM Explorer : позволяет редактировать таблицы стилей и HTML на активной странице, отображая измененные результаты по мере продвижения. Использует функциональность IntelliSense для автозаполнения кода, где это применимо. Сочетание клавиш: ( CTRL + 1 )
- Консоль : предоставляет возможность отправлять отладочную информацию, включая счетчики, таймеры, трассировки и настраиваемые сообщения, через встроенный API. Кроме того, позволяет вводить код в активную веб-страницу и изменять значения, назначенные отдельным переменным, в режиме реального времени. Сочетание клавиш: ( CTRL + 2 )
- Отладчик : позволяет устанавливать точки останова и отлаживать код во время его выполнения, строка за строкой, если это необходимо. Сочетание клавиш: ( CTRL + 3 )
- Сеть : перечисляет каждый сетевой запрос, инициированный браузером во время загрузки и выполнения страницы, включая сведения о протоколе, тип контента, использование полосы пропускания и многое другое. Сочетание клавиш: ( CTRL + 4 )
- Производительность : подробные сведения о частоте кадров, загрузке ЦП и других показателях, связанных с производительностью, чтобы помочь вам ускорить загрузку страниц и другие действия. Сочетание клавиш: ( CTRL + 5 )
- Память : помогает изолировать и исправить потенциальные утечки памяти на текущей веб-странице, отображая временную шкалу использования памяти вместе со снимками с разных временных интервалов. Сочетание клавиш: ( CTRL + 6 )
- Эмуляция : показывает, как активная страница отображается при различных разрешениях и размерах экрана, эмулируя смартфоны, планшеты и другие устройства. Он также предоставляет возможность изменять пользовательский агент и ориентацию страницы, а также моделировать различные геолокации, вводя широту и долготу. Сочетание клавиш: ( CTRL + 7 )
-
Чтобы отобразить Консоль, находясь в любом из других инструментов, нажмите квадратную кнопку с правой скобкой внутри нее, расположенную в верхнем правом углу интерфейса инструментов разработки.
-
Для открепления инструментов разработчика интерфейса , так что становится отдельным окном, выберите два каскадных прямоугольник или использовать следующую комбинацию клавиш: CTRL + P . Вы можете поместить инструменты обратно в исходное положение, нажав CTRL + P во второй раз.
Apple Safari (только для OS X)
Разнообразный набор инструментов Safari отражает большое сообщество разработчиков, которые используют Mac для своих нужд проектирования и программирования. В дополнение к мощной консоли и традиционным функциям ведения журналов и отладки, также предоставляется простой в использовании режим адаптивного дизайна и инструмент для создания собственных расширений браузера.
-
Выберите Safari в меню браузера, расположенного в верхней части экрана. Когда появится раскрывающееся меню, выберите « Настройки» . Вместо этого пункта меню вы также можете использовать следующую комбинацию клавиш: КОМАНДА + КОММА (,)
-
Теперь должен отобразиться интерфейс настроек Safari , перекрывающий окно браузера. Выберите значок «Дополнительно» , расположенный в правой части заголовка.
-
В Advanced Теперь предпочтения должны быть видны. В нижней части этого экрана находится опция « Показать меню разработки» в строке меню, сопровождаемая флажком. Если в поле нет галочки, нажмите на нее один раз, чтобы разместить там.
-
Закройте интерфейс настроек .
-
Теперь вы должны заметить новую опцию в меню браузера с именем Develop , расположенную между закладками и окном . Нажмите на этот пункт меню. Теперь должно отобразиться раскрывающееся меню, содержащее следующие параметры.
- Открыть страницу с помощью : позволяет открыть активную веб-страницу в одном из других браузеров, установленных на вашем 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 , широко считаются устаревшими и уязвимыми.