react native调试相关技巧

  1. React Native的Debug基础：
      调出开发菜单Dev Menu。 cmd+D 或 Device -> Shake
      在Dev Menu上可以选择“Show Element Inspector”，显示UI上的组件，但是这是直接在app上显示，不清楚，最好在Dev Tools上来查看元素。
      
  1.   React DevTools的使用：
        1) 运行命令：npx react-devtools  （要先把app启动，例如：npm run ios）
        2) 如果显示“waiting for connecting”，就在app上打开Dev Menu，然后reload app可自动连接。
 
 
  1. 在VsCode中调试：
        1）下载插件：React Native Tools
        2）进入VsCode的Run菜单，新建launch.json，进行一些配置，参见 https://blog.logrocket.com/debugging-react-native-vs-code/ 
              我选择的是 “Application in direct mode” ，我的配置文件是：
              {
                  "version": "0.2.0",
                  "configurations": [
                      {
                          "name": "My Debug iOS Hermes",
                          "request": "launch",
                          "type": "reactnativedirect",
                          "cwd": "${workspaceFolder}",
                          "platform": "ios",
                          "skipFiles": [
                               "node_modules/**",
                          ],
                     }
                ]
            }
 
       3）在VsCode中启动配置“My Debug IOS Hermes”, 然后调试
 
 
  1. Infinitered调试React Native的工具
           如果VsCode调试达不到目的，可以尝试这个工具。
https://github.com/infinitered/reactotron  （state变化的调试工具）
 
posted @ 2024-04-15 21:55  saaspeter  阅读(102)  评论(0)  编辑  收藏  举报