React-Native 调试

https://reactnative.cn/docs/d...

安卓环境

chrome调试

• 使用方式

  1. Android 模拟器开启 ctrl + M

  2. 在菜单中选择Debug JS Remotely

     • 会自动打开http://localhost:8081/debugger-ui
     • 若没有自动开启,需手动开启
  3. Chrome 中并不能直接看到 App 的用户界面，而只能提供 console 的输出，以及在 sources 项中断点调试 js 脚本。

• 注意

  1. React 的 Chrome 插件，这一插件目前并不支持 React Native
  2. 使用 Chrome 调试目前无法观测到 React Native 中的网络请求

react-devtool

https://github.com/jhen0409/r...

• 安装

  • 全局安装

    • yarn global add react-devtools

    • npm install -g react-devtools

      • react-devtools 依赖于 electron，而 electron 需要到国外服务器下载二进制包，所以国内用户这一步很可能会卡住。此时请在环境变量中添加 electron 专用的国内镜像源：ELECTRON_MIRROR="https://npm.taobao.org/mirrors/electron/"，然后再尝试安装 react-devtools。

  • 项目内安装

    1. 根据不同的RN版本，你可能需要不同版本的react-devtool,您可以在本地项目中安装不同的版本
    2. npm install --save-dev react-devtools
    3. 将"react-devtools": "react-devtools"添加到package.json中的script中
    4. 命令行执行npm run react-devtools

• 调试

  1. 启动react-devtools

     • 全局安装,则在命令行输入:react-devtools
     • 项目内,则在对应项目根目录启动命令行输入:npm run react-devtools

  2. 另开一个命令行启动项目

     • 等待数秒后会自动链接到你的模拟器

     • 可能会出现连接不上

       1. 出现提示栏。按照提示继续即可。
       2. 按下ctrl+M,在浮框中选择reload,尝试重新加载
  3. 选中模拟器,按下 ctrl+M

  4. 点击 Toggle Inspector

     • 会唤起一个覆盖在app上的浮层
     • 同时react-devtools窗体内,会展示对应DOM信息