用于反应原生的 Chrome 调试工具：多个问题答案

【问题标题】：Chrome debug tools for react native: multiple issues用于反应原生的 Chrome 调试工具：多个问题
【发布时间】：2018-08-26 15:53:05
【问题描述】：

提前感谢您的帮助；我宁愿是 RN 和 Android 的新手（我使用 create-native init 来创建项目）。

问题 1：当我第一次 ctrl+M 并选择“远程调试 JS”时，它会尝试 [http://10.0.2.2:8081/debugger-ui] 但无限期挂起。

问题 2. 当我最终放弃并手动访问 [http://localhost:8081/debugger-ui/] 时，我无法从“白屏死机”恢复 AVD..我尝试了“停止远程 JS 调试”、“重新加载”等....但是不得不使用“react-native run-android”来刷新

问题 3：一旦我终于有 [http://localhost:8081/debugger-ui/] 显示所需的“调试器会话 #0 活动”，然后我进入开发工具 --> 源 --> 网络 --> debuggerWorker.js .....我没有看到我列出的文件夹/文件。见截图。

RN 已经够难了，不能调试！

【问题讨论】：

为什么没人回答这个问题？
没有回答 #3 让我很生气...我真的希望能够调试。
我会给回答 #3 的人 50 美元
我遇到了与您完全相同的 3 问题，并进行了一些搜索。这是错误，github.com/facebook/react-native/issues/18416

标签： react-native

【解决方案1】：

这是最新版本的 react-native (0.54) 的问题。

经过一番调查，我发现有两种方法可以解决此问题。

选项 1. 降级 react 版本，修改你 AwesomeProject 的 package.json 如下

"dependencies": {
  "react": "16.2.0",
  "react-native": "0.52.2"
},

然后运行这些命令：

cd AwesomeProject
rm -rf node_modules android
npm install # this will bring folder node_modules back, with react/react-native of previous version
react-native eject # this will bring folder android back
react-native run-android

选项 2. 关闭 `Use JS Deltas`，如 this issue 中所述

但作者没有提供完整的步骤，这导致我制定了选项 1。

Cmd+m 在你的模拟器中，关闭“Use JS Deltas”。
找到“Metro Bundler”的终端窗口，按 Ctrl+c 将其终止，然后按向上箭头重新运行“Metro Bundler”的命令"，例如/works/StackOverflow/node_modules/react-native/scripts/launchPackager.command ; exit;。（这是重要的一步）。

现在回到 Chrome，您可以在 debuggerWorker.js > localhost:8081 下找到您的源文件。

【讨论】：

我的完整路径显示在 localhost:8081 下的文件/文件夹中。例如。 localhost:8081/C:\Users\xxxxxx\React_native_practical_tutorial\App.js ... 有人遇到这个问题吗？

【解决方案2】：

这个解决方案对我有用：

ctrl+m 在您的模拟器上。
点击Dev Settings。
禁用User JS Delta
重新启动反应本机服务器。（在终端中按 ctrl+c 然后npm run android）

【讨论】：

【解决方案3】：

我遇到了同样的问题，通过设置检查元素并启用javascript来设法解决它

【讨论】：

选项 1. 降级 react 版本，修改你 AwesomeProject 的 package.json 如下

选项 2. 关闭 Use JS Deltas，如 this issue 中所述

选项 2. 关闭 `Use JS Deltas`，如 this issue 中所述