Интересно, может ли кто-нибудь предложить пошаговое руководство для начинающих о том, как отлаживать приложение React.js? Я довольно новичок в React, сейчас самое неприятное, что в консоли много ошибок, но я понятия не имею, как их отследить.Любой хороший отладочный учебник для React.js
Это трудно описать общую стратегию для отладки «ошибка партии, показанной на», так что я буду ходить вас через процесс отладки ошибок на уровне компонентов:
Установите Реагировать расширение Dev инструменты для вашего браузера выбор:
Найдите компонент
Я рекомендую либо из этих путей:
2.a. Откройте React tab с помощью инструментов вашего браузера и введите нижнюю строку поиска для поиска компонентов по имени.
2.b. Откройте Elements tab, выберите элемент и вернитесь на React. Иерархия компонентов будет расширена до тех пор, пока компонент React не будет соответствовать узлу DOM, выбранному вами в Elements.
Проверьте состояние и опоры компонента, который ведет себя некорректно.
Если по какой-то причине вам не нравится установка расширений браузера, вы можете бросить один или несколько debugger; заявления, чтобы установить контрольные точки, которые будут «пауза» выполнение вашего приложения и позволяют проверить стек вызовов, область , и ошибки в этих точках.
У React есть собственный инструмент для отладки, установленный в инструментах Chrome. Это самый подходящий инструмент на данный момент для отладки реагирующих приложений. Он позволяет добавлять точки останова, редактировать реквизиты в инструментах dev и видеть мгновенные результаты. Хороший учебник - это https://facebook.github.io/react/blog/2014/01/02/react-chrome-developer-tools.html, который является официальным руководством по отладке React. Вы также можете загрузить расширение «React Developer Tools», в котором будут установлены зависимости от ваших инструментов разработчика в хроме.
Вы также можете использовать стандартный хром-отладчик без зависимости от React, который также хорошо работает. Хорошим учебным пособием для отладки в Chrome является следующее: https://developers.google.com/web/tools/javascript/index?hl=en
Основная проблема заключается в том, чтобы узнать, как добавить точку прерывания в свой код с помощью инструментов dev и узнать, как идентифицировать проблемы с помощью ответов, которые вы получаете от них. В последнем уроке вы действительно хорошо знаете, как это сделать.
Надеюсь, это поможет немного и счастливым кодированием!
Спасибо, я установлю этот инструмент. – Kuan
Спасибо Я попытаюсь установить этот инструмент – Kuan
Для проверки состояния и реквизита мы должны выбрать компонент; мы не можем быть на 2.b. –
Одна из проблем с этим решением заключается в том, чтобы «видеть» компонент на вкладке «Реакт», он должен RENDER. Подумайте о том, чтобы сделать что-то чрезвычайно простое, например, тег DIV, и проверить состояние и реквизит после этого. – Vlad