Немногие разработчики слишком углубляются в браузерные «DevTools». Существует пугающий набор сложно выглядящих функций, но наступил момент, когда вы можете использовать Chrome как полноценную среду разработки. Вы вряд ли откажетесь от VS Code или Sublime Text, но использование браузера может быть вариантом, если вы находитесь на чужом ПК или вам нужно отредактировать строку или две.

В следующих разделах описано, как использовать средства редактирования и отладки Chrome. Chromium, Edge, Opera, Vivaldi и Brave используют один и тот же движок и имеют одни и те же инструменты. В зависимости от вашего браузера и ОС вы можете открыть DevTools из меню: нажмите F12 или Ctrl| Cmd + Shift + i. Safari и Firefox имеют разные наборы функций, и они могут не предлагать одни и те же функции редактирования, но у них также есть свои хитрости, помогающие в разработке; например, Firefox указывает, к каким элементам DOM прикреплены обработчики событий.

Быстрые правки на любом сайте

При просмотре страницы на локальном сайте разработки или на работающем сайте панель Элементы позволяет проверять, отключать, включать, добавлять, редактировать или удалять любые селекторы и свойства CSS:

Панель Источники позволяет редактировать любой файл CSS или JavaScript, разместив его на панели Страница.

Нажмите Ctrl | Cmd + S, чтобы сохранить файл, но имейте в виду, что он сохраняется в памяти. Желтый значок предупреждения указывает на то, что изменения не являются постоянными.

Если ваш код определяет исходные карты, вы можете открыть «файлы» (см. папку src выше), но изменения не будут применяться к активной странице. Однако вы можете усовершенствовать минимизированный код в сгенерированных файлах, щелкнув значок {}, а затем отредактировав его.

Вы потеряете все свои обновления, как только перейдете или обновите страницу. К счастью, на панели Изменения отображаются ваши текущие обновления. Он доступен в меню с тремя точками на панели ящика или в разделе Дополнительные инструменты в главном меню:

Невозможно сохранить код с панели Changes, но она позволяет найти все обновленные файлы. Щелкните правой кнопкой мыши любой файл на панели папок и выберите Сохранить как, чтобы загрузить локальную копию и импортировать ее в свой проект.

Переопределить файлы на любом сайте

Вы можете переопределить любой файл на локальном сайте разработки или на рабочем сайте. Для начала выберите панель Переопределения на панели Источник и нажмите + Выбрать папку для переопределений:

Выберите каталог в своей системе, затем нажмите Разрешить, чтобы Chrome мог писать в него.

Вернитесь на панель Страницы, затем щелкните правой кнопкой мыши любой файл и выберите Сохранить для переопределения:

Это сохранит файл в папку overrides. Наложение фиолетового круга указывает на то, что файл находится в локальной системе:

Вы можете нажать {}, чтобы украсить минимизированный код и внести необходимые изменения. Обновления отображаются немедленно, а поскольку файл сохраняется локально, изменения повторно применяются ко всем страницам в домене всякий раз, когда открывается DevTools (это не влияет на сайт ни для кого, кроме вас).

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

Редактирование исходных файлов разработки

Вы можете использовать Chrome в качестве стандартного текстового редактора для локальных исходных файлов независимо от используемой системы сборки. Он предлагает большинство основ редактирования, таких как нумерация строк, отмена / повтор, цветовое кодирование и автозаполнение. Для начала выберите панель Файловая система на панели Источники и нажмите + Добавить папку в рабочую область:

Выберите расположение проекта, затем нажмите Разрешить, чтобы Chrome получил разрешение на чтение и запись в эту папку. Теперь вы можете открывать и редактировать любой файл, как в редакторе:

Отладка с помощью сообщений консоли

Некоторые разработчики утверждают, что вам никогда не следует использовать console.log(): вы изменяете исходный код, и есть лучшие возможности отладки. Это правда... но я не верю никому, кто говорит, что никогда им не пользуется! Объект console предоставляет ряд методов, в том числе:

.log(msg) — вывести сообщение в консоль
.log('%j', obj) — вывести объект в виде компактной строки JSON< br /> .dir(obj,opt) — красиво отображать объекты и свойства
.table(obj) — выводит массивы и объекты в табличном формате
.error(msg) — выводит сообщение об ошибке
.count(label) — именованный счетчик, который сообщает, сколько раз выполняется строка
.countReset[label] — сбрасывает именованный счетчик
.group(label) — устанавливает отступ для группы сообщений журнала
. groupEnd(label) — завершает группу с отступом
.time(label) — запускает таймер для расчета продолжительности операции
.timeLog( label) — сообщает время, прошедшее с момента запуска таймера
.timeEnd(label) — останавливает таймер и сообщает общую продолжительность
.trace( ) — выводит трассировку стека (список всех вызывающих функций)
.clear() — очищает консоль

console.log() также принимает список значений, разделенных запятыми. Например:

let x = 321;
console.log('x:', x);
// x: 321

Деструктуризация ES6 предлагает аналогичный вывод с немного меньшим набором текста:

console.log({ x });
// { x: 321 }

console.dir() может выводить сложные объекты с любой глубиной свойства с цветовым кодированием или без него:

console.dir(obj, { depth: null, color: true });

Отладка клиентских приложений

Вы можете открыть файл JavaScript на панели Источники и щелкнуть любой номер строки, чтобы установить точку останова (обозначена синим маркером). Обратите внимание, что вы также можете выбирать файлы и добавлять точки останова в исходные карты, что может быть проще.

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

Запустите свой код — возможно, обновив страницу или активировав обработчик событий — и код остановится в точке останова:

Правые панели включают в себя:

  • панель Наблюдение, где вы можете отслеживать определенные переменные, щелкнув значок + и введя их имя.
  • панель Точки останова со всеми точками останова и позволяет включать и отключать любые
  • панель Scope отображает состояние всех локальных и глобальных переменных, а также
  • панель Call Stack содержит список функций, вызываемых для достижения этой точки кода.

Над сообщением Приостановлено в точке останова появляется ряд значков:

Слева направо значки выполняют следующие действия:

  1. возобновить выполнение: продолжить обработку до следующей точки останова или завершения кода.
  2. перешагнуть: выполнить следующую команду, но остаться в пределах текущей функции — не переходить ни к одной функции, которую она вызывает.
  3. вступить: выполнить следующую команду и перейти к любой функции, которую она вызывает.
  4. выйти: продолжить обработку до конца функции и вернуться к вызывающему оператору.
  5. шаг: аналогичен шагу внутрь, за исключением того, что он не переходит в функцию async.
  6. деактивировать все точки останова — полезно, если вы хотите временно запустить код без прерываний, но не хотите терять точки останова.
  7. пауза в исключениях: останавливать обработку при возникновении ошибки.

DevTools предлагает еще несколько вариантов отладки. Помимо определения точек останова вручную, вы можете добавить в свой код оператор debugger. Это активирует отладчик, когда DevTools открыт, поэтому его следует удалить из производственного кода.

Условные точки останова проверяют значение перед остановкой выполнения. Представьте, что у вас есть цикл, работающий от 0 до 999, и вам нужно увидеть состояние на последней итерации. Вместо того, чтобы добавлять стандартную точку останова и нажимать возобновить 999 раз, вы можете щелкнуть правой кнопкой мыши строку, выбрать Добавить условную точку останова, а затем ввести выражение, например loopValue === 999.

Точки журнала действуют console.log() без кода! Щелкните правой кнопкой мыши любую строку, выберите Добавить точку журнала, затем добавьте выражение:

Точки останова DOM активируются всякий раз, когда код JavaScript изменяет узел DOM или его дочерние элементы. Активируйте их на панели Элементы, щелкнув правой кнопкой мыши любой узел, выбрав Разбить и выбрав соответствующий параметр.

Точки останова Ajax активируются всякий раз, когда JavaScript выполняет вызов или XMLHttpRequest для извлечения данных из URL-адреса. На панели Источники откройте панель Точки останова XHR/выборки справа, нажмите + и введите полный или частичный адрес, чтобы включить точку останова. .

Наконец, иногда вы хотите игнорировать код, который вы используете, но не можете изменить, например, jQuery, фреймворки, такие как React, сторонний JavaScript, такой как аналитика и т. д. Нажмите F1 или щелкните значок шестеренки, чтобы открыть Настройки, выберите вкладку Список игнорирования и добавьте любое количество полных или частичных имен URL/файлов. С этого момента отладчик будет пропускать код в этих файлах и игнорировать любые исключения, которые они выдают.

Повтор сеанса с открытым исходным кодом

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

Начните получать удовольствие от отладки — начните использовать OpenReplay бесплатно.

Отладка приложений Node.js и Deno

Вы также можете отлаживать серверные приложения Node.js и Deno непосредственно в Chrome DevTools, поскольку среды выполнения используют один и тот же движок JavaScript V8. Чтобы запустить инспектор V8, запустите приложение с флагом --inspect. Например, чтобы запустить приложение Node из его файла index.js:

node --inspect index.js

deno и поддерживать идентичный вариант --inspect. Вы также можете использовать --inspect-brk, чтобы остановить обработку в первой строке, чтобы вы могли пройти через приложение по мере его запуска.

Команда запускает отладчик, прослушивающий localhost:9229, к которому может подключиться любой локальный клиент отладки (включая Chrome):

1 Debugger listening on ws://127.0.0.1:9229/301372bc-780a-2051-ceb2-c8d78227092e

Если вы запускаете приложение на другом устройстве или внутри контейнера Docker, убедитесь, что порт 9229 доступен, и укажите 0.0.0.0, чтобы разрешить доступ из любой точки локальной сети:

node --inspect=0.0.0.0:9229 index.js

После запуска приложения откройте Chrome и введите адрес chrome://inspect, чтобы просмотреть все доступные приложения:

Прежде чем приложения появятся в списке Remote Target, может пройти несколько секунд. Если это не так, убедитесь, что установлен флажок Обнаружение сетевых целей, и нажмите Настроить, чтобы добавить IP-адрес и порт устройства, на котором запущено ваше приложение.

Щелкните ссылку проверить целевого приложения, чтобы открыть другое окно DevTools. В нем меньше опций, чем в браузерных DevTools, и вы в основном будете использовать панель Источники для добавления точек останова. Как и раньше, вы можете выбрать панель Файловая система и нажать + Добавить папку в рабочую область, чтобы отредактировать серверный код.

Заключение

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

  • На вкладке Сеть щелкните правой кнопкой мыши любой запрос Fetch/XHR и выберите параметр Копировать. Вы можете сгенерировать правильный код для JavaScript, Node.js, cURL и т. д.
  • Откройте любое изображение на вкладке Источники, затем щелкните его правой кнопкой мыши, чтобы скопировать URL-адрес данных base64.
  • Создавайте фрагменты кода на панели Источники Фрагменты, чтобы вы могли запускать один и тот же код JavaScript на любой странице.
  • Остановите бесконечные циклы, нажав значок пауза/возобновление, чтобы остановить выполнение, затем, удерживая тот же значок, выберите «Остановить».
  • Выполняйте отладку сайта, работающего на телефоне Android, подключенном к компьютеру через USB, с панели chrome://inspect. Вы также можете определить переадресацию портов, чтобы любой локальный или удаленный сайт отображался на устройстве как localhost:<port>.
  • Панель Визуализация предоставляет средства для оценки Основных веб-показателей, эмуляции prefers-color-scheme, удобных для печати таблиц стилей, уменьшения движения и многого другого.
  • Панель Проблемы предлагает предложения и советы по использованию API, которые изменятся в будущих версиях Chrome.

Дополнительные советы по DevTools:

15 секретов DevTool для разработчиков JavaScript

Полное руководство по устранению проблем с производительностью JavaScript в Browser DevTools

12 способов улучшить ведение журнала консоли DevTools

Первоначально опубликовано на https://blog.openreplay.com 4 июня 2022 г.