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

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

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

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

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

Google Chrome

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

Выберите Chrome Главное меню, отмеченный тремя горизонтальными линиями и расположенный в верхнем правом углу браузера.
Когда появится раскрывающееся меню, наведите курсор мыши на Дополнительные инструменты вариант.
Должно появиться подменю. Выберите вариант с надписью Инструменты разработчика. Вы также можете использовать следующее сочетание клавиш вместо этого пункта меню: Chrome OS / Windows (CTRL + SHIFT + I), Mac OS X (ALT (ОПЦИЯ) + КОМАНДА + I)
Теперь должен отобразиться интерфейс инструментов разработчика Chrome, как показано на этом примере снимка экрана. В зависимости от вашей версии Chrome исходный макет, который вы видите, может немного отличаться от представленного здесь. Главный центр инструментов разработчика, обычно расположенный в нижней или правой части экрана, содержит следующие вкладки.
В дополнение к этим разделам вы также можете получить доступ к следующим инструментам через >> значок, расположенный справа от Производительность Tab.
- Память: Отслеживайте и записывайте использование памяти на веб-странице. Вы можете увидеть, насколько тяжелым является JavaScript на вашем сайте.
- Безопасность: Выделяет проблемы с сертификатами и другие проблемы, связанные с безопасностью, с активной страницей или приложением.
- Применение: Проверьте ресурсы, используемые веб-приложением. Получите полное представление о том, что используется.
- Аудиты: Предлагает способы оптимизации времени загрузки страницы или приложения и общей производительности.
Режим устройства позволяет просматривать активную страницу в симуляторе, который отображает ее почти так же, как на одном из более чем дюжины устройств, включая несколько известных моделей Android и iOS, таких как iPad, iPhone и Samsung Galaxy. Вам также предоставляется возможность эмулировать настраиваемые разрешения экрана в соответствии с вашими конкретными потребностями в разработке или тестировании.

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

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

Mozilla Firefox

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

Выберите Firefox Главное меню, представлена три горизонтальные линии и расположен в верхнем правом углу окна браузера.
Когда появится раскрывающееся меню, выберите Web Developer.
Это Меню веб-разработчика теперь должен отображаться, содержащий следующие параметры. Вы заметите, что с большинством пунктов меню связаны сочетания клавиш.
- Переключить инструменты: Отображает или скрывает интерфейс инструментов разработчика, обычно расположенный в нижней части окна браузера. Сочетание клавиш: Mac OS X (ALT (ОПЦИЯ) + КОМАНДА + I), Windows (CTRL + SHIFT + I)
- Инспектор: Позволяет проверять и / или настраивать код CSS и HTML на активной странице, а также на портативном устройстве посредством удаленной отладки. Сочетание клавиш: Mac OS X (ALT (ОПЦИЯ) + КОМАНДА + C), Windows (CTRL + SHIFT + C)
- Web Console: Позволяет выполнять выражения JavaScript на активной странице, а также просматривать разнообразный набор регистрируемых данных, включая предупреждения системы безопасности, сетевые запросы, сообщения CSS и многое другое. Сочетание клавиш: Mac OS X (ALT (ОПЦИЯ) + КОМАНДА + K), Windows (CTRL + SHIFT + K)
- Отладчик: Отладчик JavaScript позволяет выявлять и исправлять дефекты, устанавливая точки останова, проверяя узлы 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)
- Панель инструментов разработчика: Открывает интерактивный интерпретатор командной строки. Войти помощь в интерпретатор для получения списка всех доступных команд и их правильного синтаксиса. Сочетание клавиш: Mac OS X, Windows (SHIFT + F2)
- WebIDE: Предоставляет возможность создавать и запускать веб-приложения на реальном устройстве под управлением Firefox OS или через Firefox OS Simulator. Сочетание клавиш: Mac OS X, Windows (SHIFT + F8)
- Консоль браузера: Обеспечивает те же функции, что и веб-консоль (см. Выше). Однако все возвращаемые данные относятся ко всему приложению Firefox (включая расширения и функции уровня браузера), а не только к активной веб-странице. Сочетание клавиш: Mac OS X (SHIFT + КОМАНДА + J), Windows (CTRL + SHIFT + J)
- Отзывчивый дизайн: Позволяет мгновенно просматривать веб-страницу в различных разрешениях, макетах и размерах экрана для имитации нескольких устройств, включая планшеты и смартфоны. Сочетание клавиш: Mac OS X (ALT (ОПЦИЯ) + КОМАНДА + M), Windows (CTRL + SHIFT + M)
- глазная пипетка: Отображает шестнадцатеричный цветовой код для индивидуально выбранных пикселей.
- Блокнот: Scratchpad позволяет писать, редактировать, интегрировать и выполнять фрагменты кода JavaScript из всплывающего окна Firefox. Откройте интерактивный документ JavaScript, который позволяет писать код и тестировать его на веб-сайте. Сочетание клавиш: (SHIFT + F4)
- Рабочие службы: Отладка рабочих служб вашего веб-приложения. Получите подробную информацию об их работе и ошибках.
- Исходный текст страницы: Исходный инструмент разработчика на основе браузера, этот параметр просто отображает доступный исходный код для активной страницы. Сочетание клавиш: Mac OS X (КОМАНДА + U), Windows (CTRL + U)
- Получите больше инструментов: Открывает Панель инструментов веб-разработчика Коллекция на официальном сайте дополнений Mozilla, включающая около десятка популярных расширений, таких как Firebug и Greasemonkey.

Microsoft Edge / Internet Explorer

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

Выбрать сафари в меню браузера, расположенном в верхней части экрана. Когда появится раскрывающееся меню, выберите Настройки. Вы также можете использовать следующее сочетание клавиш вместо этого пункта меню: КОМАНДА + ЗАПЯТАЯ(,)
Сафари Настройки Интерфейс должен теперь отображаться, перекрывая окно вашего браузера. Выберите Расширенный значок, расположенный в дальней правой части заголовка.
Это РАСШИРЕННЫЙ предпочтения теперь должны быть видны. Внизу экрана есть опция с надписью Показать меню разработки в строке меню вместе с флажком. Если в поле нет галочки, щелкните по нему один раз, чтобы поставить отметку.
Закрой Настройки интерфейс.
Теперь вы должны заметить новую опцию в меню браузера под названием развивать, расположенный между Закладки и окно. Щелкните по этому пункту меню. Теперь должно появиться раскрывающееся меню, содержащее следующие параметры.
- Открыть страницу с: Позволяет вам открывать активную веб-страницу в одном из других браузеров, установленных на вашем 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, считаются устаревшими и уязвимыми.

#goog-gt-tt {display:none !important;}.goog-te-banner-frame {display:none !important;}.goog-te-menu-value:hover {text-decoration:none !important;}body {top:0 !important;}#gtranslate_element {display:none!important;}

var gt_not_translated_list = [«), Mac OS X («,»), Windows («,»DOM Explorer»,»(,)»];
document.cookie = «googtrans=/auto/ru; domain=.balogs.xyz»;
document.cookie = «googtrans=/auto/ru»;
function GTranslateElementInit() {new google.translate.TranslateElement({pageLanguage: ‘auto’,layout: google.translate.TranslateElement.InlineLayout.SIMPLE,autoDisplay: false,multilanguagePage: true}, ‘gtranslate_element’);}