乐趣区

ReactNative-调试

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 信息
退出移动版