Руководство по эффективной отладке JavaScript

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

Мы разрабатываем функции, оптимизируем старый код, исправляем старые проблемы, но каждый раз, когда мы касаемся нашей кодовой базы, это может привести к новой ошибке. И даже если мы осторожны, и у нас есть множество защитных сетей (обзор кода, парное программирование, …), ошибка может произойти в любой момент.

И как только ошибка возникает, и клиент в панике обращается к команде, начинается стресс! Как ее исправить? С чего начать? Сколько времени нам нужно? Как найти источник проблемы?

Поэтому сегодня я хочу поделиться несколькими личными советами и ресурсами, которые вы должны знать для отладки JavaScript, в надежде, что это поможет освоить вашего лучшего союзника: DevTools Console!

Оглавление

  • Процесс
    • Итак, что такое отладка?
    • Основные шаги по отладке
  • Инструменты для отладки Javascript
    • Оповещение
    • API консоли
    • Оператор отладчика
    • Точки останова: типы и использование
    • Стек вызовов
    • Карты источников
    • Локальные переопределения (только в Chrome)
    • Рабочие пространства/файловая система (только в Chrome)
    • Переопределения прокси-сервера

Процесс

Итак, что такое отладка?

«Отладка — это поиск источника проблемы в кодовой базе, выявление возможных причин, проверка гипотез до тех пор, пока не будет найдена окончательная первопричина. А затем, в конечном итоге, устраняете эту причину и добиваетесь того, чтобы она никогда не повторилась.

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

Но одно можно сказать наверняка: отладка — это навык, которому нельзя научить в школе… но им можно овладеть с помощью практики.

Основные шаги по отладке

Напомним, что иногда мы забываем основные шаги отладки, потому что все, чего мы хотим, — это погрузиться в код, чтобы решить проблему как можно скорее!

  1. Воспроизвести — Попытайтесь воспроизвести ошибку на основе предоставленной информации. Если вы не можете увидеть ошибку, вы никогда не сможете ее исправить! И самое главное: убедитесь, что это действительно ошибка!
  2. Анализ — подумайте о возможных причинах и определите как минимум две или три хорошие гипотезы, которые можно проверить. Попытайтесь понять, как работает ваше приложение, чтобы найти место ошибки. Здесь важно знать, что вы ищете и на что обращать внимание.
  3. Тестирование — Разбейте шаги тестирования на небольшие части и изменяйте код по одной строке за раз, чтобы определить точный источник проблемы. Также необходимо подтвердить, не является ли ошибка одним из симптомов более крупной основной проблемы, которую необходимо решить.
  4. Исправьте и проверьте — Если клиента устраивает решение, внедряйте его! И проверьте все возможные сценарии, чтобы предотвратить возвращение проблемы. Хорошим способом является написание модульных тестов или ведение списка известных ошибок/проблем.

И не забывайте: Проблемы не исчезают сами по себе! Если вы не можете понять, как была решена ошибка, значит, вы еще не закончили.


Инструменты для отладки Javascript

Для отладки у вас есть три большие части, которые вы можете использовать: логирование ошибок, отладчик исходников и сопоставление исходников. Я буду объяснять их, начиная с базовой отладки и заканчивая более продвинутой концепцией.

Оповещение

Я хотел бы начать с важного момента: никогда не используйте alert() для отладки вашего кода! Если вы когда-либо использовали его, вы должны знать, что это кошмар в цикле или при отладке JavaScript-приложения, которое повторно рендерит ваш компонент, это большое «нет»!

API Console

API Console содержит множество методов, разработанных для облегчения элементарной отладки.

Ниже я привожу наиболее часто используемые мной методы, но я приглашаю вас обратиться к документации, чтобы проверить остальные: Web API Console (на MDN)

    • Для общего вывода переменных без контекста.
    • Совет: используйте {} (например: console.log({ var1, var2 });) для отображения с контекстом переменной.
    • Для отображения данных массива/объекта в таблице.
    • Совет: Когда таблица появится в вашей консоли, вы можете упорядочить столбцы, щелкая по ним.
    • Перечислить конкретные свойства объекта JavaScript, чтобы изучить его содержимое.
    • Подсчитать, сколько раз выводится строка.
    • Совет: Используйте его, чтобы узнать, сколько раз вызывается обратный вызов или компонент.
    • Отображать трассировку стека, чтобы лучше понять порядок вызова вашего кода.

Заявление отладчика

Одна вещь, которую иногда упускают из виду, — это утверждение «отладчик». Когда оно написано в вашем коде, оно автоматически запускает отладчик вашего браузера (если он открыт) и действует как точка останова.

Знаете ли вы? Когда вы нажимаете на точку останова, консоль получает доступ ко всем переменным, доступным в той области видимости, в которой вы сейчас находитесь.

Точки останова: типы и использование

У вас есть три типа точек останова:

  • Line Of Code: Приостанавливает код, когда сценарий достигает точки останова.
  • Условная строка кода: Приостанавливает код только при выполнении определенного условия.
    • Советы: Используйте его, если вам нужно приостановить код для определенного продукта в цикле (например: data.length > 1, id = 12).
  • Log Point: НЕ приостанавливает код, но позволяет увидеть содержимое определенного значения.
    • Советы: Альтернатива console.log, не требующая модификации/компиляции кода.

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

  • Возобновить: Продолжить выполнение сценария до тех пор, пока он не наткнется на другую точку останова.
  • Перешагнуть: Продолжить выполнение сценария до следующей функции после точки останова, затем снова сделать паузу.
  • Step In & Step Out: Продолжить выполнение сценария и перейти в/из текущей функции, затем снова сделать паузу.
  • Деактивировать: Отключите все точки останова, чтобы иметь возможность выполнять все скрипты без паузы.
  • Пауза при исключении: Выполнить все ваши сценарии, но приостановить выполнение, если в try-catch произошла ошибка.

Здесь важно понять, что шаг осуществляется от функции к функции, а не от строки кода к строке кода.

Знаете ли вы? Браузер предлагает множество точек останова, основанных на определенных взаимодействиях (таких как слушатели событий, XHR, изменение DOM…), которые помогут вам приостановить код для определенного события. Вы также можете добавить выражение JavaScript в свой список наблюдения, чтобы отслеживать любые изменения, происходящие во время выполнения скриптов.

Стек вызовов

Чтение стека вызовов очень полезно, поскольку это трассировка стека от текущей точки останова до самого первого вызова в вашем приложении/странице. Трассировка стека помогает понять порядок вызова вашего кода.

Знаете ли вы? Браузеры позволяют добавлять некоторые файлы в список игнорирования (blackboxing). После игнорирования файл не будет остановлен во время трассировки стека, что позволит вам сосредоточиться на коде, которым вы можете управлять. Очень полезно игнорировать библиотеки и модули узлов.

Карты источников

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

Карты исходников часто отключены на продакшене, хотя на самом деле это то место, где вы должны их активировать. Это то место, где мы хотим знать, что происходит.

Поэтому обязательно включите карты источников для вашего JavaScript, настроив правильную конфигурацию:

## an example in webpack.config.js

## -- for development --
mode: development
devtool : 'inline-source-map'

## -- for production --
mode: production
devtool : 'source-map' ## enable browser sourcemaps for production
output: {
   path: path.resolve(__dirname, './dist'),
   filename: '[name].js',
   sourceMapFilename: '[name].js.map',
},
plugins: [
   ## Be sure to check your plugin configuration if they have sourceMap specific configuration
   new UglifyJsPlugin({ sourceMap: true })
],
Вход в полноэкранный режим Выйти из полноэкранного режима

Знаете ли вы? Карты исходников загружаются только в том случае, если вы открываете DevTools.

Также не забывайте, что безопасность через неизвестность никогда не является хорошей идеей!
Если вы беспокоитесь о безопасности при распространении ваших карт исходников на производственную среду, вы можете добавить правило на ваш производственный сайт, чтобы разрешить доступ к этим файлам .map только людям за определенным IP. Вы также можете изменить URL, на котором будет размещена карта источников с помощью SourceMapDevToolPlugin, чтобы выбрать другой сервер.

Локальные переопределения (только в Chrome)

Локальные переопределения — лучший вариант, когда вы хотите поэкспериментировать, не сопоставляя свои изменения с локальным источником.

Когда функция включена, при сохранении любого файла он появится на панели переопределений с фиолетовой точкой, а его копия будет сохранена в локальной папке. Теперь Chrome будет игнорировать код, поступающий с сервера для переопределенного файла, и вместо этого будет выполнять сохраненный вами код.

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

Знаете ли вы? Изменения, внесенные и сохраненные в Local Overrides, сохраняются при обновлении страницы и перезагрузке браузера.

Рабочие пространства/файловая система (только в Chrome)

Функция Workspaces позволяет напрямую вносить изменения в исходный код локального проекта из Chrome DevTools. Это похоже на использование Chrome DevTools в качестве IDE.

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

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

Переопределения прокси

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

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


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

Оцените статью
devanswers.ru
Добавить комментарий