React-native 一款很不错的调试工具

这个调试工具可以调试 模拟器或者真机 和 web端上运行的项目,

在上面可以看到树形组件结构,并且可以在上面修改样式, 查看结构, 查看props 和 state, style等 使用很方便

直接修改样式, 模拟器上就会相应修改

安装

1: 安装依赖

npm install --save-dev react-devtools

**注意: **安装时间较长, 请耐心等待, 如果执行到这里时, 其实还没有结束, 需要在等待个几分钟

Paste_Image.png

2: 修改package.json, 添加devtools

  "scripts": {
    // ...
    "devtools": "react-devtools"
  }

3: 运行

npm run devtools

启动App, app启动后不用管它, 重新打开一个cmd, 在模拟器或真机上运行自己的项目

4: 运行项目,

运行你的启动项目的命令, 我这里是在android上运行 所以: 

react-native run-android

项目启动后, App自动加载组件树形结构, 并在右侧显示 style, props, state等对应的信息,

想了解web调试可看官方教程