react native调试相关技巧

1. React Native的Debug基础：

https://reactnative.dev/docs/next/debugging

      调出开发菜单Dev Menu。 cmd+D 或 Device -> Shake

      在Dev Menu上可以选择“Show Element Inspector”，显示UI上的组件，但是这是直接在app上显示，不清楚，最好在Dev Tools上来查看元素。

      

2.   React DevTools的使用：

     https://reactnative.dev/docs/next/react-devtool
     https://github.com/facebook/react/tree/main/packages/react-devtools

        1) 运行命令：npx react-devtools  （要先把app启动，例如：npm run ios）

        2) 如果显示“waiting for connecting”，就在app上打开Dev Menu，然后reload app可自动连接。

 

 

3. 在VsCode中调试：

https://blog.logrocket.com/debugging-react-native-vs-code/  （vsCode中如何调试）

https://marketplace.visualstudio.com/items?itemName=msjsdiag.vscode-react-native  （VSCode中调试tool的插件）

        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”, 然后调试

 

 

4. Infinitered调试React Native的工具

           如果VsCode调试达不到目的，可以尝试这个工具。

https://github.com/infinitered/reactotron  （state变化的调试工具）