使用 iOS 模拟器（和 WebStorm）时如何在 React Native 中设置断点？

Question

我使用

npx react-native init MyAppName

初始化一个新的 React Native 项目并让各种依赖项正常工作，这样我就可以在 iOS 模拟器、Android 模拟器和物理 Android 手机上运行该应用程序。

我似乎无法弄清楚如何设置断点。就上下文而言，我正在使用 WebStorm，在 IDE 中设置断点会很棒，但我会选择通过检查器（例如，Chrome 本身或 Electron 变体）设置断点。

我能做的就是添加“调试器；”在代码中，它会被击中（虽然不在 WebStorm 中），但之后似乎每次都会被击中（所以我不能像普通断点一样禁用它）。我在网上看到各种帖子说启用“JS 调试器”，但该选项似乎不再出现在开发菜单中（也许在某个时候已被删除/重命名）。

一些额外的背景是我修改了我的

package.json

，如下所示：

"start": "react-native start --experimental-debugger",

也就是说，我添加了

--experimental-debugger

标志，因为我在某处读到这是前进的方式。

我想也许显示元素检查器将允许我选择和元素，也许它会突出显示该元素的代码，但当我尝试这样做时，我收到错误：

我也尝试了

npx react-devtools

并打开了这个电子窗口：

但是，我没有看到任何允许我在 TypeScript 中设置断点的内容。

当我在终端中输入“j”以打开实验 Hermes 专用调试器时，我看到了以下内容：

这似乎不允许我浏览代码来设置断点（“源”选项卡中没有太多可做的事情）。当我添加我提到的

debugger;

行时，这就是它打开的位置（但同样，这是一种尴尬的体验，因为我在主动调试时无法轻松删除该行）。

这是我的全部

package.json

供参考：

{
  "name": "NameRedacted",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "android": "react-native run-android",
    "ios": "react-native run-ios",
    "lint": "eslint .",
    "start": "react-native start --experimental-debugger",
    "test": "jest"
  },
  "dependencies": {
    "react": "18.2.0",
    "react-native": "0.73.6"
  },
  "devDependencies": {
    "@babel/core": "^7.20.0",
    "@babel/preset-env": "^7.20.0",
    "@babel/runtime": "^7.20.0",
    "@react-native/babel-preset": "0.73.21",
    "@react-native/eslint-config": "0.73.2",
    "@react-native/metro-config": "0.73.5",
    "@react-native/typescript-config": "0.73.1",
    "@react-navigation/native": "^6.1.17",
    "@react-navigation/native-stack": "^6.9.26",
    "@types/react": "^18.2.6",
    "@types/react-test-renderer": "^18.0.0",
    "babel-jest": "^29.6.3",
    "eslint": "^8.19.0",
    "jest": "^29.6.3",
    "prettier": "2.8.8",
    "react-native-safe-area-context": "^4.9.0",
    "react-native-screens": "^3.29.0",
    "react-test-renderer": "18.2.0",
    "typescript": "5.0.4"
  },
  "engines": {
    "node": ">=18"
  }
}

版本信息：

• 节点 v20.11.1.
• 配备 Apple Silicon (M3 Pro) 的 MacBook 上的 macOS Sonoma 14.3.1。

虽然 React Native 的大部分内容都是声明式的，但我仍然想在大量命令式代码上设置断点。有人知道我如何能以比我的古怪解决方法更直接的方式做到这一点吗？

Answer 1

世博会选项

我会用次优的答案来回答我自己的问题，因为否则我什么也没听到。

该视频讨论了使用 Expo 进行调试的选项：https://www.youtube.com/watch?v=sRLunWEzwHI&t=525s

你可以运行

npx expo start --dev-client

，这会给你一些类似 Chrome 检查器的东西，你可以在其中设置断点等。

他们还为那些想要使用 Visual Studio Code 的人谈论了一个名为 vscode-expo 的工具：https://github.com/expo/vscode-expo

他在这里谈论了这一点：https://www.youtube.com/watch?v=sRLunWEzwHI&t=793s

这几乎正是我所追求的，但我正在使用 WebStorm 并且并不特别想使用 Expo，所以我仍然愿意接受特定于 WebStorm 的答案（希望不需要 Expo）。

令人讨厌的“调试器；”解决方法

我还有一个相当棘手的解决方法：

本质上，我确保断点只被击中一次，以便让自己有机会单击“退出”按钮并设置我想要的真正断点。这有点奇怪，因为我必须确保在调试器打开之前我不会这样做，否则事情会完全崩溃。每次我想再次触发它时，我都会手动编辑一个字符串参数。

这是

Debugging.ts

文件：

export default (key: string) => {
  const debugged = (global as any)[key];
  if (debugged === 'true') {
    return;
  }
  (global as any)[key] = 'true';
  debugger;
};

我的使用方法如下：

import BreakOnce from './Debugging';

function ThingIWantToDebug() {
  BreakOnce('debug7');
  var test = 'This is the actual line I want to breakpoint on.';
}

尽管这很恶心，但在我听到更好的选择之前，这是我最好的选择。