Вы когда-нибудь пытались отладить проблему, используя только журналы консоли? у вас болела голова до и после этого? долго ли выяснялось, что в объекте отсутствует свойство? Посмотрим правде в глаза ... почти всем приходилось прибегать к этому методу, включая меня.
console.log не является и никогда не будет серебряной пулей для отладки
Отладчики - это инструменты, которые были с нами годами, но по какой-то причине люди перестают использовать их в мире NodeJS. Наши друзья из NodeJS, VSCode и Jetbrains создали множество инструментов, которые помогают нам «остановить» приложение и получить текущее состояние приложения в данный момент времени.
NuxtJS, с другой стороны, был головной болью, пытаясь запустить и запустить отладчик, ~ было так сложно понять, что люди склонны просто бросать гонку и начинать используйте 1_.
Что ж, не бойся, друг мой! На самом деле у меня есть быстрое, безопасное и красивое решение для всех ваших проблем! На самом деле отладка NuxtJS проще, чем все думают, и я хочу, чтобы вы знали об этом, поскольку документации по этому вопросу почти НЕТ, и вы хотите облегчить себе жизнь.
Конфигурация проекта
Откройте свой nuxt.config.js и перейдите к свойству build, потому что мы собираемся изменить метод extend.
Нам нужно добавить только одну строку кода, но это очень важно для включения отладки:
Что для нас значит эта линия?
config.devtool - это свойство Webpack, которое позволяет нам настроить способ создания SourceMap для этого JS (Ссылка).
eval-source-map - это SourceMap, который точно соответствует номеру строки, и это помогает нам отлаживать в клиенте. ("Больше информации")
inline-source-map очень похож на предыдущий, но за исключением того, что он добавлен как DataUrl в пакет. Это помогает нам отлаживать наше приложение NuxtJS на сервере. ("Больше информации")
Примечание. Попробуйте добавить проверку среды разработки. Не рекомендуется использовать это в производственной среде.
Запуск отладчика NodeJS с помощью nodemon
Мы будем использовать отличный инструмент для разработки под названием nodemon, который в основном позволяет нам отслеживать любые изменения в нашем проекте и перезапускать сервер автоматически.
Чтобы запустить отладчик NodeJS с помощью nodemon, просто добавьте флаг --inspector и готово !!
WebStorm
Откройте свой проект с помощью WebStorm и дождитесь, пока все проиндексируется.
Настроить отладку на стороне сервера
- Нажмите «Добавить конфигурацию».
2. Щелкните знак плюс, а затем npm.
3. В команде используйте run, а в скриптах используйте dev и сохраните!
Настроить отладку на стороне клиента
- Перейдите в то же место Добавить конфигурацию
2. Щелкните значок плюс и выберите Отладка Javascript.
3. Присвойте этому имя; URL-адрес должен быть URL-адресом, по которому будет запускаться Nuxt, браузер может быть вашим любимым, но я бы порекомендовал использовать Chrome, включить опцию «Убедитесь, что точки останова обнаруживаются при загрузке скриптов» и сохраните!
Как заставить работать оба
Сначала запустите отладчик на стороне сервера, выбрав параметр запуска, а затем запустите ошибку
После правильной загрузки проекта выберите конфигурацию запуска на стороне клиента и щелкните тот же значок. Он должен открыть новый экземпляр Chrome.
И мы полностью готовы к отладке нашего приложения! 🎉
Демо-видео!
Удачной охоты, Охотник за ошибками! Желаю вам, чтобы эта статья помогла вам в работе!
