React Native 调试最佳实践

洛竹
• 阅读 1441

本文翻译自 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 调试最佳实践

点赞
收藏
评论区
推荐文章
浅梦一笑 浅梦一笑
4个月前
初学 Python 需要安装哪些软件?超级实用,小白必看!
编程这个东西是真的奇妙。对于懂得的人来说,会觉得这个工具是多么的好用、有趣,而对于小白来说,就如同大山一样。其实这个都可以理解,大家都是这样过来的。那么接下来就说一下python相关的东西吧,并说一下我对编程的理解。本人也是小白一名,如有不对的地方,还请各位大神指出01名词解释:如果在编程方面接触的比较少,那么对于软件这一块,有几个名词一定要了解,比如开发环
Jacquelyn38 Jacquelyn38
1年前
2020年前端实用代码段,为你的工作保驾护航
有空的时候,自己总结了几个代码段,在开发中也经常使用,谢谢。1、使用解构获取json数据let jsonData  id: 1,status: "OK",data: 'a', 'b';let  id, status, data: number   jsonData;console.log(id, status, number )
blmius blmius
1年前
MySQL:[Err] 1292 - Incorrect datetime value: ‘0000-00-00 00:00:00‘ for column ‘CREATE_TIME‘ at row 1
文章目录问题用navicat导入数据时,报错:原因这是因为当前的MySQL不支持datetime为0的情况。解决修改sql\mode:sql\mode:SQLMode定义了MySQL应支持的SQL语法、数据校验等,这样可以更容易地在不同的环境中使用MySQL。全局s
小森森 小森森
4个月前
校园表白墙微信小程序V1.0 SayLove -基于微信云开发-一键快速搭建,开箱即用
后续会继续更新,敬请期待2.0全新版本欢迎添加左边的微信一起探讨!项目地址:(https://www.aliyun.com/activity/daily/bestoffer?userCodesskuuw5n)\2.Bug修复更新日历2.情侣脸功能大家不要使用了,现在阿里云的接口已经要收费了(土豪请随意),\\和注意
Stella981 Stella981
1年前
ASMSupport教程4.9 生成三元运算符
<p这节我们介绍如何用ASMSupport生成三元运算符(...?...:...)运算符。我们预计生成如下代码:</p<divid"scid:9D7513F9C04C4721824A2B34F0212519:935e30cc33214e0093ba9834f3a4e044"class"wlWriterEditableS
Wesley13 Wesley13
1年前
Java日期时间API系列36
  十二时辰,古代劳动人民把一昼夜划分成十二个时段,每一个时段叫一个时辰。二十四小时和十二时辰对照表:时辰时间24时制子时深夜11:00凌晨01:0023:0001:00丑时上午01:00上午03:0001:0003:00寅时上午03:00上午0
Wesley13 Wesley13
1年前
MySQL查询按照指定规则排序
1.按照指定(单个)字段排序selectfromtable_nameorderiddesc;2.按照指定(多个)字段排序selectfromtable_nameorderiddesc,statusdesc;3.按照指定字段和规则排序selec
Stella981 Stella981
1年前
Angular material mat
IconIconNamematiconcode_add\_comment_addcommenticon<maticonadd\_comment</maticon_attach\_file_attachfileicon<maticonattach\_file</maticon_attach\
Wesley13 Wesley13
1年前
PHP中的NOW()函数
是否有一个PHP函数以与MySQL函数NOW()相同的格式返回日期和时间?我知道如何使用date()做到这一点,但是我问是否有一个仅用于此的函数。例如,返回:2009120100:00:001楼使用此功能:functiongetDatetimeNow(){
Wesley13 Wesley13
1年前
MySQL部分从库上面因为大量的临时表tmp_table造成慢查询
背景描述Time:20190124T00:08:14.70572408:00User@Host:@Id:Schema:sentrymetaLast_errno:0Killed:0Query_time:0.315758Lock_
helloworld_34035044 helloworld_34035044
7个月前
皕杰报表之UUID
​在我们用皕杰报表工具设计填报报表时,如何在新增行里自动增加id呢?能新增整数排序id吗?目前可以在新增行里自动增加id,但只能用uuid函数增加UUID编码,不能新增整数排序id。uuid函数说明:获取一个UUID,可以在填报表中用来创建数据ID语法:uuid()或uuid(sep)参数说明:sep布尔值,生成的uuid中是否包含分隔符'',缺省为
洛竹
洛竹
Lv1
前端工程化
公众号「洛竹早茶馆」 微信「yang_jun_ning」 GitHub 「youngjuning」
8
文章
4
粉丝
0
获赞