vscode调试应用
使用 VSCode 调试 React 应用安装 Debugger for Chrome Extension我们需要安装一个名为 Debugger for Chrome Extension 的插件，以便 VSCode 与 Chrome 进行交互。 VSCode 通过 Chrome 的 debug protocol 连接到 Chrome。这是 Chrome 开发人员工具使用的调试协议。您可以使用 VSCode 来调试浏览器代码，而不是使用 Chrome 的开发工具。这个时候会自动生成 .vscode 目录到你的工程根目录中，该目录会包含 launch.json 文件，用于配置 VSCode 的调试器，我们需要替换 url 为自己的，react 工程默认是http://localhost:3000。{ // 使用 IntelliSense 了解相关属性。 // 悬停以查看现有属性的描述。 // 欲了解更多信息，请访问: https://go.microsoft.com/fwlink/?linkid=830387 "version": "0.2.0", "configurations": [ { "type": "chrome", "request": "launch", "name": "Launch Chrome against localhost", "url": "http://localhost:3000", "webRoot": "${workspaceRoot}" } ]}到此所有的配置工作已经完成，其他的配置选项可以参考 链接。启动 Debugger我们来测试一下这个功能，按 F5 键开始调试我们的项目。如果成功了的话将会弹出这个工具栏：设置断点现在可以在我们的 react 应用中添加断点，打开 src/App.js 文件，在代码中第 11 行添加断点。启动服务在终端中运行 npm start 启动测试服务，运行调试后会自动启动 chrome 访问到 http://localhost:3000/ （在 launch.json 文件中配置过的）。此时应用会自动停在断点的位置。
页:
[1]