21 совет по отладке Chrome DevTools

Переводчик пресса:Chrome DevTools настолько мощен, что может даже заменить IDE!

• оригинал:Art of debugging with Chrome DevTools
• Переводчик:Fundebug

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

Сяобиан рекомендует:FundebugСосредоточьтесь на JavaScript, мини-программах WeChat, мини-играх WeChat, Node.js и онлайн-мониторинге ошибок Java в режиме реального времени. Это действительно очень полезная служба мониторинга ошибок, и многие крупные компании используют ее.

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

Для краткости далее я буду использовать开发者工具ссылаясь на谷歌开发者工具.

Прежде чем мы начнем, вам нужно сделать некоторые подготовительные работы.

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

Если вы хотите использовать последнюю версию и инструменты разработчика от Google, вы можете скачатьКанарская версия, и даже установил его в качестве открытого браузера по умолчанию для разработки. Выпуски Canary предназначены для предоставления последних обновлений ранним пользователям. Он может быть нестабильным, но в большинстве случаев все в порядке. Вы должны привыкнуть к использованию новейшего и лучшего Google Chrome.

1. Включите экспериментальные функции инструментов разработчика

ты можешь пойти вchrome://flagsстраницу, затем откройтеDeveloper Tools experimentsопции.

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

2. Супер экспериментальные функции

Если я использую функцию вExperimentsВ списке нет, то, вероятно, это функция WIP (WIP означает, что она в процессе). Вы можете открыть его так: страница находится вExperimentsинтерфейс, непрерывное нажатиеshiftНажмите клавишу 6 раз, чтобы включить функцию WIP.

Console

При отладке мы тратим большую часть времени на работу с консолью. Мы часто вставляем много журналов консоли в код для отладки, выводя значения переменных. Учитывая, насколько важна для нас консоль, важно понимать связанные API и ярлыки, предоставляемые всеми инструментами разработчика.

3. Всегда печатать объект

Мое первое предложение на самом деле не касается инструментов разработчика, это трюк, который я использую все время. В использованииconsole.log();При выводе не только переменных, но и объектов используйте фигурные скобки ({}), чтобы заключить переменную. Преимущество этого в том, что будет напечатано не только значение переменной, но и имя переменной.

4. Используйте console.table для печати данных с несколькими входами

Если переменная, которую вы печатаете, является массивом, каждый элемент является объектом. Я предлагаю вам использоватьconsole.tableДля печати его табличное представление более красивое и легко читаемое.

5. Добавьте красок в бревно

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

6. $ и ?

Если у вас нет библиотеки под консолью$а также?, то вы можете использовать их отдельно какdocument.querySelector()а такжеdocument.querySelectorAll()Ярлык.

Помимо предоставления более эффективного способа, есть еще одно преимущество,?возвращает массив вместоarray-likeизNodeList, так что вы можете напрямую использоватьmap, reduceа такжеfilterфункция.

вы можете использовать?Проверьте наличие битых ссылок на странице:

Promise
  .all(
    ?('a')
      .map(link => link.href)
      .map(href => fetch(href))
  )
  .then(() => console.log('All links working'))
  .catch(() => console.error('Some links are broken'));

7. $0

Если вы хотите сослаться на элемент DOM, используйте$0.$0Указывает на элемент, который вы в данный момент выбрали в Element. если указано$0,$1Указывает на ранее выбранный элемент. и так далее, пока$4может быть использован.

8. $_

$_Записывает последнее вычисленное в консоли выражение.

9. getEventListeners()

getEventListeners(domElement)Возвращает все события, зарегистрированные в элементе DOM. См. пример ниже:

Вы, наверное, заметили, что когда я ввожу выражение в консоль, результат немедленно оценивается. Вы можете видеть, что я не нажал клавишу Enter, и результаты уже были отображены. Это новая функция канареечной версии под названием «Нетерпеливая оценка».

10. debug(fn)

В приведенном выше примере, если вы хотите приостановить выполнение после нажатия кнопки, вы можете использоватьdebugфункция.debug(fn)Принимает функцию в качестве аргумента, и каждый раз, когда функция вызывается, отладчик прерывает выполнение на первой строке функции.

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

11. copy(obj)

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

ДатьcopyФункция передает неформатированный JSON и возвращает отформатированный результат:

12. Top-level await

async/awaitДелает асинхронные операции проще и читабельнее. Единственная проблема в том, чтоawaitНеобходимо использовать в асинхронных функциях. Если мы хотим использовать его в консоли DevTools, нам нужна специальная обработка, используйтеImmediately Invoked Async Function Eвыражение (ИИАФЭ). Совсем не удобно. К счастью, DevTools уже поддерживает прямое использование await.

Debugging in the Sources panel

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

13. Включить автоматическую печать

В экспериментальном режиме канареечной версии можно включить режим автоматического кодового благоустройства.

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

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

В производственной среде мне нравится использовать условные точки останова для внедрения console.log, поскольку я не могу изменять исходный код. Если моей точкой останова является просто console.log, DevTools не сломается, потому что console.log возвращает значение undefined, что является ложным значением. Но он выполняет введенное мной выражение, и я вижу результат.

Почему бы просто не использовать обычные точки останова и не посмотреть на переменные? Иногда я не хочу этого делать. Например, когда я анализирую часто выполняемые действия, такие как касания или смахивания. Я не хочу, чтобы отладчик каждый раз вызывал прерывание программы, но я хочу видеть результаты вывода программы.

15. Пауза отображения результатов пользовательского интерфейса в состоянии Hover

Трудно проверить элемент, который отображается только в состоянии Hover. Например, как проверить всплывающую подсказку? Если вы щелкните правой кнопкой мыши и выберите «Проверить», элемент исчезнет. Так есть способ?

Я делаю это так:

1. Откройте панель источников
2. показать всплывающую подсказку
3. Используйте сочетания клавиш, чтобы приостановить выполнение скрипта (наведите указатель мыши на значок паузы, чтобы увидеть сочетания клавиш)
4. Вернитесь на панель «Элементы» и осмотрите элемент, как обычно.

16. XHR breakpoints

Если вы хотите понять, как выполняется запрос, вы можете использовать контрольные точки XHR на панели источников.

17. Использование DevTools в качестве IDE

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

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

Если у вас есть одно использованиеcreate-react-appилиvue-cliДля построенного проекта вы можете напрямую перетащить всю папку на панель «Источники». DevTools автоматически сопоставит все файлы. Таким образом, вы можете изменить файл в DevTools и сразу просмотреть его. Таким образом, вся эффективность разработки, особенно эффективность отладки, определенно повышается.

18. Используйте сетевые переопределения для легкой отладки производственного кода

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

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

В производственной среде легко отлаживать и выполнять некоторые тесты производительности.

19. Nodejs debugging

Если вы хотите использовать отладчик DevTools для отладки приложений Node.js, вы можете использовать--inspect-brkфлаг для включения:

node --inspect-brk script.js

перенаправить наchrome://inspectстраница, вRemote TargetОпции вы можете увидеть в программе Node.

Кроме того, в DevTools вы увидите зеленый значок узла, щелчок по которому откроет отладчик Chrome для узла.

Если вы хотите использовать DevTools Debugger для отладки модульных тестов, вам нужно вызвать:

node --inspect-brk ./node_modules/.bin/jest

Однако на самом деле это очень хлопотно, и нам нужно самим найти соответствующий путь. GoogleChromeLabs недавно выпустила новый очень полезный инструмент под названием:ndb. С ndb вам просто нужно:

ndb npx jest

Если у вас есть собственный скрипт, вы можете вызвать его так:

ndb npm run unit

Еще лучше, если вы находитесь в конфигурации, которая имеетpackage.jsonназывается по проектуndb, он даже автоматически проанализирует сценарии в package.json, поэтому вы можете напрямую использовать DevTools.

20. Используйте сниппеты для помощи в отладке

DevTools предоставляет инструмент для создания и сохранения небольших фрагментов кода, и мне нравится использовать их для ускорения работы. Например, lodashify —  может быстро добавить lodash в любое приложение.

(function () {
    'use strict';

    var element = document.createElement('script');
    element.src = "https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.15.0/lodash.min.js";
    element.type = "text/javascript";
    document.head.appendChild(element);
})();

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

const traceProperty = (object, property) => {
  let value = object[property];
  Object.defineProperty(object, property, {
    get () {
      console.trace(`${property} requested`);
      return value;
    },
    set (newValue) {
      console.trace(`setting ${property} to `, newValue);
      value = newValue;
    },
  })
};

Есть много очень полезныхфрагмент кода devtools, вы можете использовать его напрямую.

О Фундебаге

FundebugСосредоточьтесь на JavaScript, мини-программах WeChat, мини-играх WeChat, мини-программах Alipay, React Native, Node.js и мониторинге ошибок Java в режиме реального времени. С момента официального запуска Double Eleven в 2016 году Fundebug обработал более 600 миллионов ошибок и был признан многими известными пользователями, такими как Google, 360 и Kingsoft. Бесплатная пробная версия приветствуется!

Ваши пользователи сталкиваются с ошибками?

Демонстрация опыта Бесплатное использование