Лучший инструмент, который вы можете использовать для отладки приложения React, – это использовать инструменты разработчика React . Это расширения для браузера, которые упрощают проверку и анализ приложений React.
Я написал сообщение в блоге, полностью посвященное им, посмотрите его: Инструменты разработчика React.
В дополнение к инструментам разработчика React, которые необходимы для создания Next.js приложение, я хочу подчеркнуть 2 способа отладки Next.js приложения.
Первый, очевидно, console.log() и все другие инструменты консольного API . То, как работают приложения Next, заставит инструкцию журнала работать в консоли браузера ИЛИ в терминале, с которого вы начали следующий запуск, используя npm run dev .
В частности, если страница загружается с сервера, когда вы указываете на нее URL-адрес или нажимаете кнопку обновить (cmd/ctrl-R), в терминале происходит любое ведение журнала консоли.
Последующие переходы страниц, которые происходят щелчком мыши, приведут к тому, что все записи в консоли будут выполняться внутри браузера.
Просто помните, если вас удивит отсутствие регистрации.
Еще одним важным инструментом является инструкция debugger . Добавление этого оператора в компонент приведет к приостановке отображения страницы браузером:
Мой лучший совет научиться использовать эти инструменты содержится в моем окончательном руководстве по отладке JavaScript.
Действительно потрясающе, потому что теперь вы можете использовать отладчик браузера для проверки значений и запуска вашего приложения по одной строке за раз.
Если вы используете Next.js , вы также можете использовать отладчик VS Code для отладки кода на стороне сервера. Я упоминаю эту технику и этот учебник для ее настройки.
Оригинал: “https://flaviocopes.com/react-debugging/”