如何使用 VS 代码编辑器在 REACT 中逐行调试？答案

【问题标题】：How to debug line by line in REACT using VS code editor?如何使用 VS 代码编辑器在 REACT 中逐行调试？
【发布时间】：2021-03-11 19:24:51
【问题描述】：

我正在学习 REACT，想知道如何为我的代码设置逐行调试器以进行调试。我一直在使用 ASP.net 进行后端开发，最近开始通过另一个开发人员启动的项目学习 REACT。不幸的是，我在 VS 代码中为 REACT 设置逐行调试功能时遇到问题。我按照教程 here 进行操作，但它不会在我设置的断点处停止。

以下是我设置断点的代码（这是 apps.ts 的一部分） - 断点是左侧的圆圈。

这是我的 Launch.json 文件：

请您帮我正确设置一下好吗？我需要逐行调试才能完全理解 REACT 的流程，因为这对我来说是新的。

这里还缺少什么来启用逐行调试？

谢谢， PG

【问题讨论】：

你添加的代码不是 React！
是的，它是 NodeJS 后端 :)

标签： reactjs debugging visual-studio-code

【解决方案1】：

我认为你的 Launch.json 没问题。与 ASP.Net 唯一不同的是，您首先必须使用 npm start 或 yarn start 启动您的应用程序，然后点击 Debugger 来启动调试器。圈子显示您的应用程序当前未运行，这就是它们不会被击中的原因。是的，最重要的是，您当前的代码不是 React 前端。它是 NodeJS 后端，所以请按照 this guide 调试该代码。

【讨论】：

我设法让它工作并且启动脚本在我的回答中。

【解决方案2】：

这是我的工作启动脚本。这启用了使用断点逐行调试我的代码。此外，这与 Edge chromium-browser 一起使用。（最新的 VS 代码编辑器）

{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Launch localhost in Microsoft Edge",
            "type": "edge",
            "request": "launch",
            "url": "http://localhost:3000/api",
            "webRoot": "${workspaceFolder}/ABC-MVP/backend/src",
            "sourceMapPathOverrides": {
                "webpack:///*": "*",
                "webpack:///./*": "${webRoot}/*",
                "webpack:///src/*": "${webRoot}/*",
                "webpack:///./~/*": "${webRoot}/node_modules/*"
            }
        },
        {
            "name": "Launch index.html in Microsoft Edge",
            "type": "edge",
            "request": "launch",
            "port": 3000,
            "file": "${workspaceFolder}/index.html"
        },
        {
            "type": "node",
            "name": "Debug CRA Tests",
            "request": "launch",
            "args": [
              "app.ts",
              "--runInBand",
              "--no-cache",
              "--env=jsdom"
            ],
            "cwd": "${workspaceFolder}",
            "console": "internalConsole",
            //"console": "integratedTerminal",
            "internalConsoleOptions": "openOnSessionStart",
            "disableOptimisticBPs": true,
            "runtimeExecutable":
              "${workspaceFolder}/ABC-MVP/backend/node_modules/.bin/react-scripts",
              //"${workspaceFolder}/ABC-MVP/backend/src/models",
              "protocol": "inspector"
          }
    ]
}

【讨论】：