Все, что вы хотели знать, но боялись спросить о DevTools

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

1. Используйте режим инкогнито

В режиме инкогнито или приватном режиме используется отдельный профиль пользователя и не сохраняются такие данные, как файлы cookie, localStorage или кэшированные файлы, между перезапусками браузера. Каждый сеанс начинается в чистом состоянии, поэтому он идеально подходит для тестирования систем входа в систему, производительности при первой загрузке и прогрессивных веб-приложений (PWA). Есть небольшие ограничения, такие как блокировка установки PWA, но они вряд ли вызовут серьезные проблемы при разработке.

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

2. Автозапуск DevTools

Чтобы начать разработку, обычно нужно запустить браузер (возможно, в режиме инкогнито), открыть DevTools и перейти по локальному URL-адресу. Весь процесс можно автоматизировать в один клик, добавив опции в команду запуска браузера.

Лучше всего создать новый ярлык или скрипт для запуска в режиме разработки, а затем для Google Chrome добавить:

  • --incognito для запуска в режиме инкогнито
  • --auto-open-devtools-for-tabs для запуска DevTools
  • и поместите URL-адрес тестирования в конце, например. http://localhost:8000/

Таким образом, на устройствах Windows ярлык может указывать на:

"C:\Program Files\Google\Chrome\Application\chrome.exe" --incognito --auto-open-devtools-for-tabs http://localhost:8000

Другие полезные переключатели Chrome включают в себя:

  • --allow-insecure-localhost чтобы игнорировать ошибки SSL в доменах localhost
  • --disable-extentions для запуска без расширений, которые могут повлиять на рендеринг, например. блокировщики рекламы
  • --window-size=<width>,<height> для установки начального размера окна
  • --window-position=<x>,<y> для установки начальной позиции окна
  • --user-data-dir="<dir>" для установки каталога профиля пользователя. Поэтому разные экземпляры Chrome могут использовать разные профили пользователей. Каталог можно удалить, чтобы стереть все предыдущие данные.

Доступно множество других опций Chrome.

Аналогичные переключатели можно добавить в ярлык запуска Firefox:

  • -private для запуска в приватном режиме
  • -devtools для запуска DevTools
  • и поместите тестовый URL в конце или после параметра -url.

3. Используйте палитру команд

DevTools Chrome предоставляет палитру команд, похожую на редактор. На любой панели DevTools нажмите Ctrl | Cmd + Shift + P, затем найдите параметр по имени:

Удалите приглашение > для поиска загруженного файла по его имени.

4. Найдите неиспользуемый JavaScript

Панель Chrome Coverage позволяет быстро найти код JavaScript (и CSS), который — и не использовался — использовался. Для начала откройте Coverage в подменю Дополнительные инструменты в меню DevTools. Перезагрузите страницу, и панель покажет процент неиспользуемого кода в виде гистограммы:

Щелкните любой файл JavaScript, и неиспользуемый код будет выделен красной полосой в поле номера строки.

Если вы тестируете одностраничное приложение, вы можете перемещаться и использовать функции для обновления индикаторов неиспользуемого кода. Однако помните, что информация о покрытии сбрасывается при перезагрузке или переходе на новую страницу. Это отличный инструмент, чтобы понять, сколько внешних зависимостей вы используете в своем коде. Если вы импортируете библиотеку размером 100 КБ и используете только 1%, вы также ясно увидите это здесь.

5. Найдите код изменения DOM

Может быть сложно определить, какая функция отвечает за обновление определенного элемента HTML DOM при возникновении события. Чтобы найти процесс, щелкните правой кнопкой мыши любой элемент HTML на панели Элементы и выберите один из вариантов в подменю Разбить:

Выбирать:

  • модификации поддерева для отслеживания изменений элемента или любого дочернего элемента.
  • изменения атрибутов для отслеживания изменений атрибутов элемента, таких как class, или
  • удаление узла для отслеживания удаления элемента из модели DOM.

Точка останова автоматически активируется на панели Источники при возникновении такого события.

Инструменты разработчика Firefox предлагают аналогичную функцию на панели Инспектор. Кроме того, Firefox указывает, к каким узлам DOM подключены обработчики, с помощью значка события. Это можно щелкнуть, чтобы просмотреть дополнительную информацию, развернуть функцию обработчика или открыть ее в отладчике:

6. Дроссельная скорость сети

Тестирование вашего сайта на высокопроизводительном ПК в быстрой и надежной сети может не соответствовать реальному использованию. У ваших пользователей может быть ненадежное мобильное соединение или подключение к перегруженному Wi-Fi в аэропорту.

Вкладка Сеть предлагает параметр регулирования, который может искусственно снизить скорость загрузки HTTP, скорость загрузки и задержку (дополнительную задержку соединения или ответа). Это может помочь определить причину узких мест производительности:

Браузеры на базе Chrome позволяют добавлять собственные Пользовательские сетевые профили.

7. Фильтровать сетевые запросы

Панель DevTools Сеть предлагает несколько фильтров, включая кнопку JS для отображения только запросов JavaScript. Окно поиска с фильтром может находить запросы, когда вы вводите часть URL-адреса, но оно также принимает специальные команды, в том числе:

  • фильтровать кешированные запросы с помощью is:cached
  • фильтровать неполные запросы с помощью is:running
  • определить большие запросы, введя larger-than:<S>, где <S> – размер в байтах (1000000), килобайтах (1000k) или мегабайтах (1M), или
  • идентифицировать сторонние ресурсы, введя -domain:<yourdomain>. В вашем домене можно использовать символы подстановки, такие как *.

8. Скрипты и строки Blackbox

Иногда нет необходимости точно знать, как, когда и где возникает ошибка JavaScript. Обычно бесполезно пытаться отладить проблемы в библиотеках (React, Vue.js, jQuery и т. д.) или сторонних скриптах (аналитика, виджеты социальных сетей, чат-боты и т. д.), которые вы не можете легко изменить.

DevTools позволяет помещать сценарии в черный ящик, поэтому они никогда не будут открываться в отладчике, даже если вы решите перейти к одной из его функций. Чтобы заблокировать файл в Firefox, откройте файл на панели Отладчик и щелкните значок глаза игнорировать источник:

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

Либо щелкните значок шестеренки настроек или нажмите F1, чтобы открыть Настройки, а затем переключитесь на вкладку Список игнорирования. Установите флажок Добавить сценарии содержимого в список игнорирования и введите любое количество шаблонов имен файлов, используя регулярное выражение, например jquery.*\.js:

9. Используйте логи

Заманчиво вставлять console.log() операторов отладки в свои файлы, но logpoints позволяют получить ту же информацию без написания кода.

Чтобы добавить точку журнала, откройте скрипт на панели Источники (или панели Отладчик в Firefox), щелкните правой кнопкой мыши любой номер строки и выберите Добавить точку журнала. …. Введите выражение, подобное тому, которое вы использовали бы в команде console, например.

"The value of x is", x

Сообщение будет отображаться в консоли DevTools при каждом выполнении этой строки. Точки журнала обычно сохраняются между обновлениями страницы.

10. Используйте условные точки останова

Щелчок по номеру строки файла, открытого на панели Источники (или панели Отладчик в Firefox), добавляет точку останова. Он останавливает скрипт в этот момент во время выполнения, чтобы вы могли пошагово выполнить код для проверки переменных, стека вызовов и т. д.

Точки останова не всегда практичны, например. если ошибка возникает во время последней итерации цикла, который выполняется 1000 раз. Однако можно установить условную точку останова, чтобы она срабатывала только при выполнении определенного условия, например. i > 999. Чтобы установить его, щелкните правой кнопкой мыши номер строки, выберите Добавить условную точку останова... и введите выражение условия.

11. Остановить бесконечные циклы

Легко запустить бесконечный цикл, который приводит к перегрузке процессов браузера. Несмотря на многолетний опыт, я недавно вызвал один из них, случайно поменяв местами выражения в цикле JavaScript for, так что он никогда не заканчивался!

Чтобы остановить бесконечный цикл в Chrome DevTools, откройте панель Источники и щелкните значок отладки пауза, чтобы остановить скрипт. Удерживая тот же значок, выберите квадратный значок стоп, чтобы прекратить обработку скрипта.

12. Перезапустите Ajax-запросы

Вызов браузера JavaScript Ajax запрашивает данные с удаленного сервера, обычно используя API Fetch ​​или XMLHttpRequest. Они отображаются на панели Сеть DevTools и могут быть отфильтрованы с помощью кнопки XHR.

DevTools показывает много информации, но иногда целесообразно повторно запустить вызов Ajax и проанализировать результаты в другом инструменте. Щелкните правой кнопкой мыши любой запрос, затем выберите вариант в подменю Копировать:

Варианты включают копирование в качестве команды для Windows Powershell, cURL и синтаксис JavaScript Fetch (это может быть полезно для вставки в код проекта в качестве отправной точки для дальнейших вызовов Ajax).

12.5. Фронтенд-мониторинг

Отладка веб-приложения в рабочей среде может быть сложной и трудоемкой. Попробуйте использовать инструмент мониторинга внешнего интерфейса, который собирает все, что вам нужно для устранения неполадок, в одном месте. Попробуйте Asayer бесплатно.

Asayer — это инструмент мониторинга внешнего интерфейса, который воспроизводит все, что делают ваши пользователи, и показывает, как ведет себя ваше приложение при каждой проблеме. Это похоже на открытие devTools вашего браузера, когда вы смотрите через плечо вашего пользователя.

Asayer позволяет воспроизводить проблемы, агрегировать ошибки JS и отслеживать производительность вашего приложения. Он предлагает подключаемые модули для регистрации состояния ваших хранилищ Redux, VueX, NgRx или MobX и для проверки запросов GraphQL.

Начните бесплатно отслеживать свое веб-приложение.

13. Включить переопределение локальных файлов

Chrome позволяет любому HTTP-запросу использовать локальный файл на вашем устройстве, а не получать его по сети. Это может позволить вам:

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

Создайте каталог на локальном ПК, где будут храниться файлы переопределений, например. localfiles, затем откройте панель Chrome DevTools Источники. Откройте вкладку Переопределения на панели слева, нажмите + Выбрать папку для переопределений и выберите созданный вами каталог. Вам будет предложено Разрешить сохранение файлов локально, и появится каталог:

Теперь откройте вкладку Страница и найдите любой исходный файл. Есть два способа добавить его в качестве локального переопределения:

  1. щелкните файл правой кнопкой мыши и выберите Сохранить для переопределения или
  2. откройте файл, внесите изменения и сохраните его, нажав Ctrl | Cmd + С.

Значок файла отображается с фиолетовым индикатором переопределения:

Он также будет присутствовать на вкладке Переопределения и в каталоге localfiles. Файл можно редактировать в Chrome или с помощью любого редактора кода — обновленная версия используется всякий раз, когда страница загружается снова.

14. Управление хранилищем на стороне клиента

Веб-страницы могут хранить данные о клиенте с помощью различных методов. Панель Приложение в Chrome DevTools (или панель Хранилище в Firefox) позволяет добавлять, проверять, изменять и удалять значения, хранящиеся в файлах cookie, хранилище кеша, локальном хранилище, сеансовом хранилище, IndexedDB и Web SQL (где поддерживается).

Вкладка Хранилище в Chrome показывает, сколько данных хранится локально, и предоставляет быструю опцию Очистить данные сайта.

15. Эмулируйте мобильное оборудование

Смартфоны и планшеты часто включают в себя такие аппаратные средства, как глобальные системы позиционирования (GPS), гироскопы и акселерометры. Обычно они недоступны на настольных ПК, что может затруднить разработку с использованием таких API, как геолокация.

Chrome может эмулировать аппаратное обеспечение устройства в DevTools — выберите Датчики в меню Дополнительные инструменты:

Доступны несколько вариантов:

  • выберите крупный город или введите пользовательскую широту и долготу. Для местоположения также можно установить значение недоступно, чтобы имитировать реакцию вашего приложения в случае сбоя сигнала GPS.
  • установить ориентацию устройства с помощью предустановленных или пользовательских показателей. Вы можете щелкнуть и перетащить смартфон, чтобы повернуть вокруг x любую ось y, или удерживать нажатой клавишу Shift, чтобы повернуть вокруг оси z.
  • принудительное касание, а не мышь или другие собственные события устройства, и
  • установите состояние ожидания, чтобы проверить, как ваше приложение реагирует на экран блокировки.

Посвящение DevTool

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

Первоначально опубликовано на https://blog.asayer.io 22 марта 2021 г.