Как отлаживать приложения NextJS React с помощью WebStorm?
Я пытаюсь использовать отладчик WebStorm IDE для отладки приложения NextJS React. Я пытался использовать конфигурацию JavaScript, но это, похоже, не сработало — ни когда я использовал конфигурацию Node.
Какова правильная процедура отладки приложений NextJS React с помощью WebStorm?
Ответы 3
Следующие шаги работают для меня:
- запустите приложение с помощью следующего (
npm run devили как выглядит ваш стартовый скрипт) - добавить точки останова, создать конфигурацию запуска Отладка JavaScript, указать URL
http://localhost:3000 - отлаживать
Если вам нравится отлаживать код, который выполняется на стороне сервера, я бы предложил использовать конфигурацию запуска Node.js с node_modules\next\dist\bin\next, указанным как Файл Javascript:.
Затем вы можете отлаживать обе конфигурации запуска Node.js и Отладка Javascript, чтобы отлаживать код как на стороне сервера, так и на стороне клиента.
В моем случае не было файла .next/dist/bin/next, независимо от производственного или деплоймента. Нажатие режима отладки в сценарии package.jsonnext, казалось, работало для отладки на стороне сервера.
Я подтвердил, что команда next в сценариях package.json только начинает отладку с Node 12.14.1, а v13.3.0 не может подключить отладчик.
Я обнаружил, что нажатие кнопки воспроизведения рядом с dev на package.json и выбор параметра отладки работает для отладки моего API, обслуживаемого Next.js.
Это автоматически создает конфигурацию запуска. Однако точки останова ненадежны, я думаю, потому что я использую TypeScript. Мне нужно отредактировать файл после добавления точки останова, чтобы они работали.
Он не останавливается на точках останова, даже если я редактирую файл. Хотя я использую профессиональную версию PyCharm, а не WebStorm.
для внешнего интерфейса next.js:
Начните отладку своего приложения прямо из окна инструмента «Выполнить» под ↓. Просто удерживайте Ctrl+Shift / ⌘⇧ и щелкните URL-адрес, по которому запущено приложение. WebStorm запускает автоматически сгенерированную конфигурацию запуска/отладки приложения отладки, браузер открывается по адресу http://localhost:3000/, и появляется окно инструмента отладки, показывающее стек вызовов и переменные.
https://blog.jetbrains.com/webstorm/2017/01/debugging-react-apps/#launch_a_debugging_session
Спасибо, похоже, это работает с простыми проектами, но в проекте, над которым я работаю, каталог «pages» находится не в корне проекта, а на несколько уровней ниже, «/src/common/pages» и когда я запускаю отладчик Я получаю сообщение об ошибке "Отладчик подключен. > Не удалось найти каталог
pages. Создайте его в корневом каталоге проекта". В данный момент я пытаюсь отладить модуль узла, поэтому я не хочу устанавливать корень проекта в «общий» каталог...