Автор: Луо Чжу из @Da Ning, эта статья была впервые опубликована вОфициальный сайт Луожу, разрешил эксклюзивное использование общедоступной учетной записи сообщества разработчиков Nuggets, включая, помимо прочего, редактирование, пометку оригинальности и другие права.
Люди не могут избежать делать неправильно.
Эта фраза также (точнее: особенно...) относится к разработчикам программного обеспечения.
Вот почему самое важное в карьере каждого разработчика — знать, как справляться с этими ошибками. Как разработчик React Native, я часто хочу писать код без ошибок, но когда что-то идет не так, мне нужно убедиться, что я могу отследить это и исправить.
В этом посте я хотел бы обсудить некоторые инструменты и методы, которые ежедневно используются для разработки мобильных приложений. Надеюсь, вы сможете найти что-то полезное для своего проекта.
Статическое обнаружение, проверка типов и форматирование
Статическое обнаружение
Линтинг — это процесс выполнения программы для анализа потенциальных грамматических ошибок программы. Самые известные плагины Linting в JavaScript:
- ESLint — инструмент проверки и форматирования типов JavaScript.
- Google Closure Compiler — оптимизатор JavaScript, который быстрее и точнее переписывает код и проверяет использование встроенных функций JavaScript.
- JSLint — средство проверки и проверки синтаксиса JavaScript
Теперь ESLint может объединить реки и озера, а также является официальным плагином Linting для TypeScript.
проверка типов
Я использую TypeScript (TS) или Flow для проверки типов. Основное различие между ними заключается в том, что первый — это язык программирования, а Flow — средство проверки типов. На мой взгляд, TS — лучший выбор из-за многих вещей, таких как автоматический импорт, самосертификация и возможность использовать JavaScript следующего поколения.
В исходном тексте сказано, что TS — это язык программирования, с чем я не совсем согласен. Ведь официальное позиционирование — это просто надстройка над JavaScript.
код формата
Программисты проводят большую часть своего времени за чтением кода, поэтому задача не в том, чтобы быстрее прочитать код, а в том, чтобы быстро понять код.
Чтобы быстро читать и понимать код, нам нужно наиболее эффективное визуальное представление. Вот почему нам нужно хорошо отформатировать код.
Сравните следующий фрагмент кода:
Я рекомендую всем использовать Prettier для форматирования кода — его легко интегрировать и настроить. Вы также можете пройтиeslint-config-prettierа такжеeslint-plugin-prettierЭти два плагина работают с ESLint.
Как отлаживать приложения React Native
React Native имеет удобную среду для разработчиков, которая сообщает нам, что мы делаем неправильно, с помощью предупреждений или ошибок:
Встроенный режим отладки
Во-первых, вы можете отлаживать свое приложение, используя встроенный режим отладки вашего браузера, например Chrome или Safari.
Для использования в Chrome необходимо установитьreact-devtools:
npm install -g react-devtools
В режиме разработки вы можете открыть меню разработчика и оттуда начать отладку своего приложения. просто активируйdebugОпции:
он откроется сhttp://localhost8081/debugger-uiПуть к вкладке браузера Chrome.
В браузере Chrome вы должны увидеть следующий экран:
Вы также можете отлаживать iOS-версию своего приложения в Safari без включенияDebug JS Remotely.
Как это сделать? В Safari просто откройте:
«Настройки» → «Дополнительно» → «Показать меню «Разработка» в строке меню.
и выберите JContext приложения:
Разработка → Симулятор → JSContext
Веб-инспектор Safari должен открыться иConsoleс однимDebugger. каждый раз, когда приложение перезагружается (используя в реальном времениlive reload,fast refreshили через ручную перезагрузку) будет создан новый JContext. просто выберитеAutomatically Show Web Inspectors for JSContexts, вы можете избежать ручного выбора последней версии JContext.
Reactotron
Если вы привыкли использовать Redux для управления состоянием в React Native или ReactJS,Reactotronотличный инструмент для отладки состояний:
- Посмотреть статус заявки
- Отображение запросов и ответов API
- Выполнение быстрых стресс-тестов производительности
- Подписка на часть состояния приложения
- дисплей похож на
console.logНовости - использовать
source-mappedТрассировка стека (включая трассировку стека саги) отслеживает глобальные ошибки! - dispatch actions like a government-run mind control experiment
- Горячая замена состояния вашего приложения с помощью Redux или mobx-state-tree
- отследить свою сагу
- Отображение наложения изображения в React Native
- Отслеживайте свое асинхронное хранилище в React Native
React Native Debugger
react-native-debuggerЭто настольное приложение со многими функциями отлаживаемых приложений. Что касается наиболее важных преимуществ, которые следует упомянуть:
- Он основан на официальном удаленном отладчике и предлагает больше возможностей.
- Он включает в себя React Inspector из ядра react-devtools-core.
- Он включает в себя Redux DevTools и использует расширение redux-devtools-extension для создания того же API.
Примечание. Если вы используете React Native версии 0.62+, используйте React Native Debugger v0.11.
Native Logs
согласно софициальныйВ документации React Native вы можете легко регистрировать отчеты для обеих платформ:
$ npx react-native log-ios
$ npx react-native log-android
Если вам нужны дополнительные исследования, вы можете использовать IDE для конкретной платформы (например,XCodeилиAndroid Studio) для анализа нативного кода приложения и устранения проблемы.
Flipper
Flipper— это платформа следующего поколения для отладки приложений iOS, Android и React Native. Это настольное приложение, которое дает вам возможность проверять, визуализировать и контролировать отладку разработки приложений. Крутая особенность заключается в том, что вы можете обновить функциональность Flipper, расширив, например:
Если вы хотите интегрировать поддержку ведения журналов Redux.
Flipper поддерживает все функции React Native Debugger, но также многое добавляет. Проверитьофициальная документацияЧтобы убедиться, что вы можете создать свой собственный плагин и поддержать сообщество.
Эта статья переведена сHow To Debug React Native Apps Like A Pro? (Tools And Best Practices)
У Tuya Smart большое количество качественных НС, присоединяться могут все желающие, вам нужно добавить меня в WeChat yang_jun_ning, или отправить свое резюме прямо на почтуyoungjuning@aliyun.com