TypeScript 文件中的 Vscode 断点在 React Native 中未命中-解网

问：

我有一个 React Native 0.61 项目、TypeScript 3.6.2 和 Vscode 1.38.1。

这是我的启动配置：

{
    "name": "Debug iOS",
    "cwd": "${workspaceFolder}",
    "type": "reactnative",
    "request": "launch",
    "platform": "ios"  
},

tsconfig.json:

  {
    "compilerOptions": {
      // Target latest version of ECMAScript.
      "target": "esnext",
      // Search under node_modules for non-relative imports.
      "moduleResolution": "node",
      // Process & infer types from .js files.
      "allowJs": true,
      // Don't emit; allow Babel to transform files.
      "noEmit": true,
      // Enable strictest settings like strictNullChecks & noImplicitAny.
      "strict": true,
      // Disallow features that require cross-file information for emit.
      "isolatedModules": true,
      // Import non-ES modules as default imports.
      "esModuleInterop": true,
      "baseUrl": "./src",
      "jsx": "react-native",
    }
  }

babel.config.js:

module.exports = {
  presets: ['module:metro-react-native-babel-preset'],
};

我在 Vscode 中开始调试，我看到以下输出：

Starting debugger app worker.
Established a connection with the Proxy (Packager) to the React Native application
Debugger worker loaded runtime on port 4021

但是，我的断点不会被击中。当我开始调试时，它们在 Vscode 中保留为空白、灰色、“未经验证的断点”。如果我将任何语句放入代码本身，它会在生成/转译的文件中命中：debugger.bundle

以下是我尝试过的一些事情（它们都不起作用）：

添加到我的启动配置"sourceMaps": true,
添加到我的启动配置中（即使它说“不允许属性outDir”，我也尝试过了”"outDir": "${workspaceRoot}/.vscode/.react"
添加到我的tsconfig"sourceMap": true
添加到我的tsconfig"outDir": "build"
添加到我的tsconfig"module": "commonjs"
添加到我的tsconfig"inlineSourceMap": true

显然，我已经一个接一个地尝试了它们，一次添加一个，而不是一次添加。我还关闭了 Vscode，删除了所有 Metro 缓存文件（匆忙模块映射等），并在每个步骤中重新打开 Vscode。

我已经在以下位置阅读了可能相关的问题和答案：

另外，这是我的输出，如果有帮助的话：react-native info

System:
    OS: macOS 10.15
    CPU: (8) x64 Intel(R) Core(TM) i7-7920HQ CPU @ 3.10GHz
    Memory: 3.69 GB / 16.00 GB
    Shell: 5.7.1 - /bin/zsh
  Binaries:
    Node: 12.10.0 - /usr/local/bin/node
    Yarn: 1.19.0 - /usr/local/bin/yarn
    npm: 6.11.3 - /usr/local/bin/npm
    Watchman: 4.9.0 - /usr/local/bin/watchman
  SDKs:
    iOS SDK:
      Platforms: iOS 13.1, DriverKit 19.0, macOS 10.15, tvOS 13.0, watchOS 6.0
    Android SDK:
      Android NDK: 17.2.4988734
  IDEs:
    Android Studio: 3.4 AI-183.6156.11.34.5522156
    Xcode: 11.1/11A1027 - /usr/bin/xcodebuild
  npmPackages:
    react: 16.9.0 => 16.9.0 
    react-native: ^0.61.1 => 0.61.1 
  npmGlobalPackages:
    react-native-cli: 2.0.1
    react-native-gesture-handler: 1.0.16

我做错了什么？

TypeScript React-Native 调试 visual-studio-code babeljs

TypeScript 文件中的 Vscode 断点在 React Native 中未命中

Vscode breakpoints in TypeScript files not hit in React Native

评论