react native学习与实践（3）调试代码

前置准备

确保快捷键工作

确保可以通过快建键打开“开发者菜单”，具体操作如下图所示。（用react-native run-ios启动了模拟器）

打开自动刷新

在MAC下，在IOS模拟器的窗口，按下Command⌘ + D 快捷键。
弹出开发者菜单，打开自动刷新。如下图所示

使用Chrome Developer Tools

在开发者菜单中选择"Debug JS Remotely"选项，即可以开始在 Chrome 中调试 JavaScript 代码。点击这个选项的同时会自动打开调试页面 http://localhost:8081/debugger-ui.(如果地址栏打开的是 ip 地址，则请自行改为 localhost)
在 Chrome 的菜单中选择Tools → Developer Tools可以打开开发者工具，也可以通过键盘快捷键来打开（Mac 上是Command⌘ + Option⌥ + I，Windows 上是Ctrl + Shift + I或是 F12）。打开有异常时暂停（Pause On Caught Exceptions）选项，能够获得更好的开发体验

在chrome的 Inspect窗口，Command⌘ + P 可以搜索文件，如搜索我们的代码文件App.js **，debug的方式与调试正常的JS一致

使用React Developer Tools

# 安装
npm install -g react-devtools
# 运行
react-devtools

注：需要在我们的App.js文件的最前面添加

<script src="http://localhost:8097"></script>

如下所示：

成功打开 React Developer Tools 后的效果如下

参考文档

• 搭建开发环境
• 调试指引文档
• react-devtools的使用指引