Intro для отладки приложений REVENTJS

Автор оригинала: Bartosz Szczeciński.

Одним из самых важных вещей разработчик должен учиться, является как (правильно) отладка приложения на его языке выбора. Зная, что не только позволяет вам легко найти источники ошибок в вашем коде, но также учит вас о внутренней работе языка, который предотвращает вас принять ту же ошибку в будущем.

Я охвачу пару методов и инструментов, которые вы найдете полезные при разработке приложений ReactJS. Ради этой статьи я буду использовать Chrome Browser, но большинство методов универсальны, а инструменты также существуют для разных браузеров.

Пожалуйста, имейте в виду, что некоторые описанные сценарии предполагают, что у вас есть исходные карты, включенные в вашей сборке. При отладке приложения без включенных SourceMaps возможно, это намного сложнее.

Шаг 0 – Познакомьтесь с вашим браузером

Большинство нужных вам инструментов уже доступны для вас, интегрированы с браузером – я говорю о инструментах разработчика браузера. В большинстве случаев вы можете открыть их, нажав F12 или щелкнув правой кнопкой мыши и выбрав «Осмотреть»:

Инструменты Chrome Developer с темной темой, проверяя страницу DiscoDapp.com

Две самые важные части devtools, вы должны быть знакомы с «консолью» и «сетью». Я охвачу те, кто в дальнейших разделах.

Код льминал

В то время как лговик не может помочь вам отладить свое приложение, это может помешать вам представить ошибку в первую очередь. Если вы не хотите тратить время настроить и тонкую настройку вашего Eslint (Я рекомендую Eslint здесь, так как это один из самых популярных и мощных) вы можете использовать React-App предустановка.

Консоль – ваш первый и самый мощный друг

Окно консоли является одним из самые важные инструменты в вашем распоряжении. Он не только показывает все сообщения, которые ваша приложение является журнал, используя console.log Он также показывает большинство сообщений об ошибках в браузере, вызванном вашим приложением. Кроме того, это rep-среда, в которую вы можете ввести любой действительный код JS и выполнял его сразу.

Консоль Объект в JS имеет много функций – если вы хотите прочитать их, я настоятельно рекомендую Страница в MDN Отказ

Консоль Также ваш «основной» способ отладки приложения. Хотите увидеть, если определенная часть вашего кода будет достигнута? Это OnClick обработчик называется? Какова ценность этой переменной? console.log Это – в большинстве случаев отпуск (или его отсутствие) позволит вам быстро оценить, что не так с вашим приложением.

Имейте в виду : console.log При использовании с объектом/массивом в качестве параметра можно обмануть. Рассмотрим следующий код:

const myObject = { name: 'BTM' }console.log(myObject);myObject.name = 'John';

Что вы ожидаете увидеть на выходе журнала?

Смотри хорошо, верно?

«Да,« BTM », только то, что я думал!» Это?

БТМ (нет, не на самом деле …)

ОК …. что тут происходит? console.log Использует ссылку, когда мы расширим ее со стрелкой вниз, но значение в ручной версии. Держите это в виду, когда пытаясь отладить приложение React Application – это может выглядеть как действительные данные передаются на дочерний компонент, пока на самом деле он мутируется в родительском виде!

Сетевая вкладка

Существует очень высокая вероятность того, что ваша заявка использует некоторую форму связи с сервером, и когда вы получите то, что вы получите неправильные данные или данные придут в форме, которую вы не ожидали. Вкладка «Сетевой» – это «перейти к» здесь. Он будет отслеживать все запросы HTTP и Websocket, которые произошли с тех пор, как вы открыли инструмент (это, к сожалению, не верно для Websockets – это будет только показать связь, происходящее по сокетам, которые были открытыми после Вы открыли инструменты разработчика, поэтому, если вам нужно Шпион на WS не забыть, чтобы инструмент открылся заранее):

Детальный вид на ответ от раздора

Важные вещи, которые нужно помнить:

• Общее правил правил – «Красные запросы не удалось, белые запросы в порядке»
• Каждый запрос может иметь несколько состояний, следить за «ожидающим» запросами – если статус сохраняется в течение более длительного времени, это может означать, что вы обменяете URL или бэкэн
• Когда вы нажимаете на запрос на подробную вкладку откроется – вкладки «Предварительный просмотр» и «Ответ» покажет ваши данные; Если похоже, что данные в порядке, но вы не можете разобрать его в своем приложении, проверьте вкладки «Входные данные содержимого» в заголовках – иногда серверы отправят вам данные JSON в виде текста или HTML, которые могут сломать некоторые инструменты
• Очень распространенная ошибка, которая приводит к отображению данных в «сетевой» вкладке, но не доступна для вашего приложения, не входит в неисправность Протокол CORS Отказ Следите за тем, чтобы ошибки, как это в разделе «Консоль»:

Прошился запрос CORS

Ошибка CORS особенно сложно, поскольку она покажет как успешный запрос (он будет белым в списке), и все данные, которые вы ожидаете, будет там в вкладке «Предварительный просмотр». Чтобы добраться до CORS «Ограничение», вам нужно либо работать с поставщиком Backenn (для того, чтобы разрешить COR на сервере или настроить его таким образом, чтобы его можно было использовать в вашем приложении) или использовать прокси-решение (CORS влияет на Только Браузеры – любой прокси, написанный на стороне сервера, просто проигнорирует его).

Инструменты разработчика реагирования

Удачающееся небольшое расширение браузера из Facebook будет вашим инструментом GO-To при проверке, в порядке, в порядке в порядке данных и JSX. Вы можете либо загрузить расширение из библиотеки для вашего браузера или захватить Автономная версия Отказ

После установки расширения вы заметите значок RACT на ICONGBAR, который выделяет всякий раз, когда вы посещаете сайт ATT RACT, и вы увидите другую вкладку, добавленную в инструменты разработчика браузера. При открытии вы увидите представление, похожее на HTML-структуру, но вместо узлов HTML вы увидите текущий JSX:

Компонент «Разрешить сообщения», проверенные в инструментах разработчиков реагирования

Нажав на каждый привыковый элемент JSX покажет вам свои важные данные: ключ , Ref его состояние и реквизит. Вы также можете использовать инструмент для изменения некоторых значений (в основном скалярных значений: логические значения, цифры, строки; это не поддерживает меняющиеся объекты на лету).

Вы можете использовать поле «Поиск», чтобы посмотреть ваши компоненты по имени, но другая функция – это автоматический поиск элемента, который вы щелкнули правой кнопкой мыши и выбрали «Проверка» (все, что вам нужно сделать, это изменить из «элементов», чтобы «реагировать» «Вкладка).

Однако одна из наиболее важных функций заключается в обновлении, которые используют инструменты разработчика RACT, добавляют в окно «Консоль Console по умолчанию» (если вы его не видите, когда на вкладке «RACT» нажмите значок трехтота и выберите «Показать консоль выдвижной ящик”). Когда выбран реактивный элемент, вы можете использовать $ R в консоли, которая даст вам это Из выбранного элемента:

Вы можете взаимодействовать с элементом, вызовите его методы и обработчики событий, как обычное взаимодействие. Эта функция позволяет изменить сложные структуры, которые мы упоминали ранее (например, вы можете выбрать элемент, вызовите его $ r.setState ({message: 'Hello World!'}) который заставит нормальный процесс примирения.

Важно : Если вы используете производственную сборку, имена компонентов будут запутаны по умолчанию. Вы можете обойти это, установив статическую переменную DisplayName на компоненте. Вы можете использовать Babel-Plugin-Add-React-DisplayNameName упростить процесс.

Серьезная отладка – точки останова

Теперь, когда мы охватывали все «легкие» вещи, давайте переедем в «отладку на реальном мире» – работая с точками останова. А точка останова Это инструкция в коде, которая остановит все выполнения и выстрел отладчика. Есть 2 способа настройки точек останова, которые вы найдете Handy:

• Добавление отладчик; к вашему исходному коду – когда анализатор столкнулся с этой директивой, и инструменты разработчика открываются, он будет вызвать точку останова
• Нахождение точки, на которую мы хотим сломать в инструментах Develooper («Источники» вкладки) и нажав на номер строки – это добавит визуальный маркер и будет действовать точно так же, как указано выше; Точки останова настроен таким образом, сохраняется через браузер обновить

Когда выполнение кода достигает этой точки, вы увидите, что страница находится в состоянии «Пауза», и Devtool теперь имеет несколько дополнительных вариантов:

Точка останова активна

Панель «Источников», на которых точка останова Код остановил (вы можете иметь несколько точек останова в вашем приложении в любой момент времени), а правая сторона показывает некоторую интересную информацию о текущем состоянии приложения, наиболее важно:

• Навигационная панель на вершине – позволяя нам возобновить приложение, шаг назад/вперед в исполнении или отключить все точки останова
• CaultStack – показывает нам, какие функции были вызваны для того, чтобы добраться до текущего состояния приложений
• Область применения – показывает, какие переменные доступны в текущем точке выполнения в каком объеме (локальной, глобальной, закрытой) наряду с их значениями; Вы также можете изменить значения на данный момент, что – при возобновлении – будет отражена в вашем приложении
• Консоль теперь подключен к состоянию приложения, у вас есть доступ ко всем переменным, показанным в «Scope» – это позволяет изменять значения в коде, который находится в других случаях, не доступных из окно пространство имен (например, вы получаете доступ к компонентам это ).

Конкретные инструменты

В то время как вышеописанные инструменты будут пригодны в любом приложении JS/REVENTJS, есть некоторые инструменты, которые вы можете найти полезным при работе со специфическими проблемами/библиотеками, некоторые из которых являются:

Почему вы обновили?

Маленький Библиотека которые интегрируются с вашими компонентами, которые показывают, почему компонент повторно визуализирует; Хотя главная цель состоит в том, чтобы обеспечить способы проверки потенциальных оптимизаций, он обычно полезен при отладке рендеринга

Redux-logger

Еще один маленький Консоль Дополнение На этот раз, когда вы работаете с Redux. Основная цель – это регистрируя изменения состояния и действия, обработанные Redux.

redux-devtools.

Более расширенное расширение полезно при работе с redux. Поставляется в двух ароматах – библиотека Чтобы добавить в свое приложение и расширение браузера. Основная точка продажи redux devtools – это способность экспортировать/импортировать состояние в качестве файла JSON (поэтому ваши тестеры могут делиться состоянием с разработчиком при отчетах об ошибках) и «Time Travel», которое позволяет перемотать и быстро продвинуться через историю редуктора Redux.

Aredux-Immutable-Sast-инвариант

Неизмермость является одним из главных допущений redux, но иногда проскальзывается мутация. Добавление Это промежуточное программное обеспечение поможет вам отслеживать такие ошибки, предоставляя консольные сообщения, когда такая ситуация имеет место.

рекуент-утка отладки

Не на самом деле, услышать меня на этом.

У вас когда-нибудь была ситуация, когда вы начали объяснять странную ошибку коллеге только для того, чтобы один из тех «о FFS, это то, что неверны» моменты? Есть имя для этого Отказ

Кредит: https://en.wikipedia.org/wiki/rubber_duck_debugging#/media/file:ere:rubber_duck_assisting_with_debugging.jpg.jpg.

Знать о любых хороших инструментах или техниках?

Если вы знаете о каком-либо хорошем инструменте или технике, которые стоит поделиться с другими разработчиками реагирования, пожалуйста, дайте мне знать в комментариях ниже

Я хотел бы поблагодарить Ацемарке за его помощь во время написания этого поста.