Как / где установить точки останова в приложении NextJS?

Question

Я использую nextjs, но не могу понять, как и где устанавливать точки останова в браузере.

Используя инструменты разработчика Chrome, когда я раскрываю sv.moxne.net (мой домен разработчиков), я вижу, что выглядит как скомпилированные ресурсы, а не исходные ресурсы.

Когда я смотрю под webpack://, я вижу структуру папок, которая похожа на мое дерево исходных текстов, однако при его расширении выявляются 2 каждого файла. У каждого есть разные хэши в имени.

Это совершенно чуждо мне. В прошлом я никогда не сталкивался с такими приложениями реагирования с поддержкой SSR.

Как узнать, где установить точки останова?

Answer 1

у вас есть два варианта:

1. На панели «Источники» devtools нажмите CTRL-P и введите имя файла, который вы хотите отладить, если у вас есть две версии, выберите одну с [sm] в конце, чтобы увидеть исходный код, который вы написал. Добавьте точку останова и обновите страницу

2. Внутри вашего файла добавьте ключевое слово debugger перед строкой, которую вы хотите отладить

someCode(); debugger theCodeIWantToDebug();