文章目录

  • Chrome
  • react-native-debugger
    • 1、如何调试接口:
  • react-devtools
  • flipper
  • 对比
  • 参考资料

Chrome

运行 yarn start 的时候会自动打开 http://localhost:8081/debugger-ui

react-native-debugger

社区开源的 debugger 工具,功能强大

brew install --cask react-native-debugger
open "rndebugger://set-debugger-loc?host=localhost&port=8081"


1、如何调试接口:

官方文档 有说明

右键,然后点击这个 enable network inspect,然后 reload 一下,就可以在 network 看到接口信息了~

上面是 第一种方案,还可以定义配置文件

react-devtools

其实是 react-native-debugger 左下角的那个子模块

flipper

Facebook 开源的 debugger 工具,功能强大。

直接官网下载一个 dmg 的安装包。

打开直接用

对比

我觉得 react-native-debugger 比 flipper 好用,原因符合前端开发习惯:

  • 比如点击元素可以直接对应到 dom 节点上
  • network 调试很像 chrome,对于前端开发很友好

但是 flipper 是 Facebook 背书,后续发展的更好也不一定,总之能解决你的问题就行

参考资料

https://www.react-native.cn/docs/debugging
https://github.com/facebook/flipper
https://github.com/jhen0409/react-native-debugger

RN:调试工具Chrome、react-native-debugger、react-devtools、flipper对比相关推荐

  1. React Native之React速学教程

    本文出自<React Native学习笔记>系列文章. React Native是基于React的,在开发React Native过程中少不了的需要用到React方面的知识.虽然官方也有相 ...

  2. 小谈React、React Native、React Web

    React有三个东西,React JS 前端Web框架,React Native 移动终端Hybrid框架,React Web是一个源码转换工具(React Native 转 Web,并之所以特别提出 ...

  3. React Native与React的关系及特点

    一.React.React.js和React Native的关系 React是基础框架,是一套基础设计实现理念,开发者不能直接使用它来开发移动应用或网页. 在React之上发展出了React.js框架 ...

  4. [React Native]升级React Native版本

    React Native正式版本还没发布,但是小版本基本上每个月都更新1-2次.9月11号又更新了0.33版本,其中有两个增强功能正好是项目中用到的. 添加Android6.0权限验证API Add ...

  5. React Native之React Navigation踩坑

    自动重装系统之后,已经很长一段时间没有来写React Native了,今天空闲之余,决定重新配置React Native的开发环境,继续踩坑... React Native的开发环境配置狠简单,只要依 ...

  6. RN:React Native原理以及新架构JSI、Fabric等概念

    说明 RN需要一个JS的运行环境, 在IOS上直接使用内置的javascriptcore, 在Android 则使用webkit.org官方开源的jsc.so. 此外还集成了其他开源组件,如fresc ...

  7. React native RN 开发实例

    多入口加载方式 React Native 混合开发多入口加载方式 - 知乎 initialProperties 官方文档:React Navigation moduleName 案例:GitHub - ...

  8. React Native开发速记

    文章目录 引子 React Native适用场景 React基础 JSX 组件的定义 高阶组件(HOC) 生命周期函数与组件渲染 组件的缺省属性 组件之间的通信 基础API Flex弹性布局 例子: ...

  9. React Native发布重构路线图

    React Native作为时下最热门的跨平台开发方案,在这两年的移动跨平台方案中可谓一枝独秀,在很多的移动产品中都可以看到它们的影子,相比国内的Weex,RN的迭代更加频繁,性能上也无限的接近原生应 ...

最新文章

  1. 安卓学习第36课——PopupWindow
  2. 只需几步,U盘就能变“光驱”
  3. linux查看passwd最后一行,Linux命令总结
  4. Android @id和@+id区别
  5. 普通人如何站在时代风口学好AI?这是我看过最好的答案
  6. matlab图像水印技术研究,动态图像数字水印matlab的实现开题报告.doc
  7. Kubernetes 小白学习笔记(31)--kubernetes云原生应用开发-istio架构和安装
  8. 程序员,代码,理想,老男孩
  9. win10计算机磁盘图标,主编教你win10系统无法正常显示硬盘图标的方法
  10. I have a dream
  11. 超强大的货币汇率实时查询工具
  12. rpm mysql nokey_rpm包时遇到Header V3 DSA signature: NOKEY时解决办法
  13. 判断一个数是否为质数的三种方法
  14. 金融爬虫python网贷_爬虫之爬取网贷之家在档P2P平台基本数据并存入数据库
  15. 华为G9怎么找到云相册_华为G9 Plus图赏:全方位均衡的中端机
  16. 探索Java中empty()与isEmpty()的区别
  17. html5 中心点旋转,html5 canvas围绕中心点旋转
  18. python 如何调试uc浏览器_Python爬虫教程-10-UserAgent和常见浏览器UA值
  19. 在C:\Windows\Fonts下复制自己的字体
  20. 爬取百度贴吧的完整实例

热门文章

  1. 串行口发送子程序C语言,运用C语言对串行口进行操作.pdf
  2. 图片在火狐能显示,在chrome不能正常显示的问题
  3. Configure C/C++ develop environment using eclipse for windows
  4. 大学计算机基础与应用第四章,大学计算机基础I 试题库 第4章
  5. YUVI420 视频 裁剪 缩放 拷贝
  6. 使用栈实现计算器java(括号、加减、乘除)v2.0
  7. ubuntu18 + gnuradio + gr-osmosdr + hackrf one GFSK文本音频传输接收
  8. 吃鸡专用计算机,死得不明不白 推荐你一台吃鸡专用显示器
  9. 高性能猛兽 网御星云发布320G安全网关
  10. 微软蜜罐服务器,搭建蜜罐来保护web服务器 -电脑资料