react native调试相关技巧

标签：VsCode app react https 调试 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         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变化的调试工具）  

标签：VsCode,app,react,https,调试,native
From： https://www.cnblogs.com/saaspeter/p/18136997