React Native 调试最佳实践

洛竹 等级 455 0 0

本文翻译自 How To Debug React Native Apps Like A Pro? (Tools And Best Practices)

本文首发于 洛竹的官方网站

人非圣贤孰能无过。

这句话还(更确切地说:尤其是...)适用于软件开发者。

这就是为什么在每一个开发者的职业生涯中最重要的是知道如何处理这些失误。作为一个 React Native 开发者,我经常想要写出没有 BUG 的代码,但是当出现问题时,我需要确保我能够追踪并解决问题。

React Native 调试最佳实践

在这篇文章中,我想讨论一些日常用于移动应用程序开发的工具和技术。我希望你可以发现一些对你的项目有帮助的东西。

静态检测,类型检查和格式化

静态检测

Linting 是执行程序的过程,用于分析潜在的语法程序错误。JavaScript 中最著名的 Linting 插件有:

  • ESLint - JavaScript 类型检查和格式化工具
  • Google's Closure Compiler – 一个 JavaScript 优化器,可以更快速,更简洁地重写代码并检查本机 JavaScript 函数的使用。
  • JSLint – JavaScript 语法检查器和验证器

现在 ESLint 处于一统江湖的地位,也是 TypeScript 官方的 Linting 插件。

类型检查

我使用 TypeScript(TS)或者 Flow 来做 类型检查。两者最主要的区别是前者是编程语言,而 Flow 是类型检查器。在我看来,TS 是更优的选择,因为大量类似于自动导入、自我证明和使用下一代 JavaScript 的能力。

原文中说 TS 是编程语言,我不完全赞同。毕竟官方的定位也只是 JavaScript 的超集。

格式化代码

程序员大部分时间都在阅读代码,因此重点不是更快地阅读代码,而是快速理解代码。

为了做到快读理解代码,我们需要最有效的视觉表示。这就是为什么我们需要很好地格式化代码。

比较一下下面的代码片段:

React Native 调试最佳实践

React Native 调试最佳实践

我建议大家使用 Prettier 格式化代码 - 它很容易集成和配置。你也可以通过 eslint-config-prettiereslint-plugin-prettier 这两个插件和 ESLint 配合使用。

如何调试 React Native 应用

React Native 具有开发人员友好的环境,会告诉我们我们在警告或错误方面做错了什么:

React Native 调试最佳实践

内置调试模式

首先,您可以使用浏览器的内置调试模式(例如 Chrome 或 Safari)调试应用程序。

在 Chrome 中使用,你需要安装 react-devtools

npm install -g react-devtools

在开发模式下,您可以打开开发人员菜单并从那里开始调试您的应用程序。只需激活 debug 选项:

React Native 调试最佳实践

它将打开带有 http://localhost8081/debugger-ui 路径的 Chrome 浏览器标签。

在您的 Chrome 浏览器中,您应该看到以下屏幕:

React Native 调试最佳实践

您也可以在 Safari 中调试应用的 iOS 版本,而不必启用 Debug JS Remotely

怎么做?在 Safari 浏览器中,只需打开:

Preferences → Advanced → Select "Show Develop menu in menu bar

并选择 App 的 JSContext:

Develop → Simulator → JSContext

Safari 的 Web 检查器应打开,并应显示一个 Console 和一个 Debugger。每次重新加载应用程序时(使用实时 live reloadfast refresh 或通过手动重新加载),一个新的 JSContext 将被创建。只需选择 Automatically Show Web Inspectors for JSContexts,就可以避免手动选择最新的 JSContext。

Reactotron

如果您习惯将 Redux 用于 React Native 或 ReactJS 的状态管理,Reactotron 是调试状态的绝佳工具:

  • 查看应用状态
  • 显示 API 请求和响应
  • 执行快速的性能压测
  • 订阅应用的部分状态
  • 显示类似于 console.log 的消息
  • 使用 source-mapped 堆栈跟踪(包括 saga 堆栈跟踪)跟踪全局错误!
  • dispatch actions like a government-run mind control experiment
  • 使用 Redux 或 mobx-state-tree 热交换您应用的状态
  • 追踪你的 saga
  • 在 React Native 中显示图像浮层
  • 在 React Native 中跟踪您的异步存储

React Native 调试最佳实践

React Native Debugger

react-native-debugger 这是一个桌面应用程序,具有许多可调试应用程序的功能。至于应该提到的最重要的优点:

  • 它基于官方的 Remote Debugger 并提供更多功能。
  • 它包括来自 react-devtools-core 的 React Inspector。
  • 它包括 Redux DevTools,并使用 redux-devtools-extension 制作了相同的 API。

注意: 如果你使用了 0.62 版本以上的 React Native,请使用 React Native Debugger v0.11

React Native 调试最佳实践

Native Logs

根据官方的 React Native 文档,您可以轻松记录两种平台的报告:

$ npx react-native log-ios
$ npx react-native log-android

如果您需要进一步研究,可以使用特定于平台的 IDE(例如 XCodeAndroid Studio)来分析应用程序的本机代码并解决问题。

Flipper

Flipper 是用于调试 iOS、Android 和 React Native 应用程序的下一代平台。这是一个桌面应用程序,可让您灵活地检查、可视化和控制应用程序开发调试。这里很酷的功能是您可以通过扩展来更新 Flipper 的功能,例如:

如果您想集成 Redux 日志支持。

Flipper 支持 React Native Debugger 所有的功能,但是它也增加了很多。查看官方文档,以确保并可能创建自己的插件并支持社区。

React Native 调试最佳实践

React Native 调试最佳实践

收藏
评论区

相关推荐

为什么 React 源码不用 TypeScript 来写?
周末的,看点轻松的吧,之前看过 React 的源码,比较好奇像 React 这样庞大的工程为什么没有用 TypeScript。 Facebook 工程师 Cat Chen 在知乎上(https://www.zhihu.com/question/378470381/answer/1079675543(https://www.zhihu.com/quest
2020年值得你去试试的10个React开发工具
2020年值得你去试试的10个React开发工具 2020年值得你去试试的10个React开发工具 本文由葡萄城技术团队翻译并首发 转载请注明出处:葡萄城官网(https://www.
25、react入门教程
25、react入门教程 25、react入门教程 0. React介绍 0.1 什么是React? React(有时称为React.js 或ReactJS)是一
Angular vs React 最全面深入对比
Angular vs React 最全面深入对比 Angular vs React 最全面深入对比 本文参考文章:https://www.sitepoint.com/reactvsangul
Create React App
Create React App Create React App Facebook开源了React前端框架(MIT Licence),也同时提供了React脚手架 createreactapp(ht
一起走进React核心团队
当我刚来Facebook的React团队工作时,我不确定接下来的工作会怎么样。表面看,React核心团队似乎很大!但事实证明,像Eli White和Sebastian McKenzie这样的人都在React Native团队。考虑加上那些维护开源库的维护者,比如Chakra UI、Framer Motion,React核心团队人数似乎能填满整个体育场!但事实
Taro 入门教程
简介 Taro 是一个遵循 React 语法规范的开放式跨端跨框架解决方案,支持使用 React/Vue/Nerv 等框架来开发微信/京东/百度/
React的未来:服务端组件
作者 | Donovan So 译者 | 许学文 策划 | 蔡芳芳 服务端组件和 SSR 有哪些不同? 本文最初发布于 Medium 的 Donovan So 专栏,经 InfoQ 翻译并分享。 服务端组件是什么? 截至目前,我们对 React 组件的了解只是客户端组件,仅此而已。 然而,React 团队正在试验一个新的想法,那就是将 Reac
30行代码实现Javascript中的 MVC
从09年左右开始,MVC逐渐在前端领域大放异彩,并终于在刚刚过去的2015年随着React Native的推出而迎来大爆发:AngularJS、EmberJS、Backbone、ReactJS、RiotJS、VueJS…… 一连串的名字走马观花式的出现
给 React Native 库添加 Example
本文翻译自 ,也夹杂了一些私货,如有帮助,请不吝点赞。你为 React Native 制作了一个闪亮的新库,现在该向全世界展示它。但是您需要添加一个示例应用程序,以便人们可以在安装之前进行尝试。有一个示例程序也能让你在开发时测试。这看起来很简单,真的是吗?不幸的是,它不是那么简单,并且可能会非常具有挑战性。我将描述我使用的过程,也许会对您有所帮助。请注意
React Native 调试最佳实践
本文翻译自 本文首发于 人非圣贤孰能无过。这句话还(更确切地说:尤其是...)适用于软件开发者。这就是为什么在每一个开发者的职业生涯中最重要的是知道如何处理这些失误。作为一个 React Native 开发者,我经常想要写出没有 BUG 的代码,但是当出现问题时,我需要确保我能够追踪并解决问题。在这篇文章中,我想讨论一些日常用于移动应用程序开发的工具
Hybrid APP基础篇-_Native、Hybrid、React Native、Web App方案的分析比较
说明 Native、Hybrid、React、Web App方案的分析比较 前言 参考来源 前人栽树,后台乘凉,本文参考了以下来源 对当前主流hybrid app、web app与native app工具的初步比较与分析
面向初学者的 React 路由-React Router的完整指南!
因此,您正在尝试学习React.js。也许您甚至已经在其中构建了几个简单的项目。无论您是新开发人员还是有一定经验的人,都可能会发现自己必须开发具有不同页面和路线的Web应用程序。那就是React Router发挥作用的时候。什么是React Router?React Router提供了一种在React或React Native应用程序中实现路由的简便方法。入
如何在React Native和Expo中掩盖Text和TextInput组件
在本文中,我将向您展示如何在React Native和Expo中使用自定义蒙版,可用于iOS,Android和Web!我们将使用一个名为库,这是一个没有本机代码的完整javascript库,然后您可以在React Native环境的所有CLI中使用。](https://res.cloudinary.com/practicaldev/image/fetch/s
中高级前端-面试秘籍(二)
引言大家知道,React 现在已经在前端开发中占据了主导的地位。优异的性能,强大的生态,让其无法阻挡。博主面的 5 家公司,全部是 React 技术栈。据我所知,大厂也大部分以 React 作为主技术栈。React 也成为了面试中并不可少的一环。 本来是计划只有上下两篇,可是写着写着越写越多,受限于篇幅,也为了有更好的阅读体验,只好拆分出中篇,希望各位童鞋别