「React Native」调试

一、使用Chrome调试

1. 打开方式

模拟器调试：
Ctrl+m(Windows or Linux)/Command+m(Mac)调出菜单，选择Debug JS Remotely，Chrome浏览器自动弹出，并在http://localhost:8081/debugger-ui下，打开Developer Tools，选择Sources项，找到自己的工程目录，即可打断点了。
真机调试：
(1) react-native run-android或者react-native run-ios（打包到手机）
(2) 摇一摇->Dev Settings（菜单找到开发设置）
(3) Debug server host & port for device(ip+port，端口默认的是8081)

2. 优点

(1) 在运行执行到断点时：

• 可以查看执行到断点变量的值
• 可以按照断点来走
• 可以到断点里的具体实现方法，从而查看完整处理的过程和数据变化。

(2) log更清晰
Chrome上显示的log比直接在终端上通过命令react-native log-android或react-native log-ios打出的log更方便观察

二、VS code(React Native Tools)

1. 前言
若是采用vscode作为开发工具，可以通过集成React Native Tools，直接在Vscode中打断点
2. 使用步骤
(1)在Vscode的扩展中，安装React Native Tools
(2)点击调试图标，选择Attach to packer，点击启动
(3)在模拟器或者真机上，选择Debug JS Remotely，即可在Vscode中直接打断点了。
坑：如果修改了代码，直接reload会出现问题，报错，并且服务停掉。
解决方法：在reload之前，先关掉Vscode中的所有断点，再reload