vscode http post_VS Code 调试完全攻略（5）：基于浏览器的 React 应用

最新推荐文章于 2024-08-16 08:21:24 发布

weixin_39552204

最新推荐文章于 2024-08-16 08:21:24 发布

阅读量457

点赞数

文章标签： vscode http post vscode打包成app vscode断点不触发 vscode断点调试 vscode无法配置launch vscode浏览器查看jsp

每日前端夜话第344篇

翻译：疯狂的技术宅

作者：Charles Szilagyi

来源：charlesagile

正文共：1750 字

预计阅读时间：7 分钟

这次我们来研究怎样把调试器连接到用 Create React App 生成的 React 程序。你将看到如何从 VS Code 启动浏览器并检查远程异步 API 调用。它超级强大，同时又很容易，所以在调试 CRA 和 React 程序时没有理由不这样做。

VS Code 调试完全攻略系列目录

基础知识(点击直达)
步进逐行调试(点击直达)
编辑变量并重新执行函数(点击直达)
launch.json 和调试控制台(点击直达)
基于浏览器的 React 应用(? 本文)
调试用 TypeScript 开发并打包的 React ?

代码设置

为了加快速度，我准备了一个简单的 React 应用，你要做的就是检出代码并启动 CRA 开发服务器：

1git clone git@github.com:thekarel/debug-anything.git
2cd debug-anything/react-cra
3yarn # npm i
4yarn start # npm start

应该能在控制台中看到启动成功的消息：

1Compiled successfully!
2
3You can now view react-cra in the browser.
4
5  Local:            http://localhost:3000
6  On Your Network:  http://192.168.0.4:3000
7
8Note that the development build is not optimized.
9To create a production build, use yarn build.

创建 launch.json

我们需要为这个小项目创建一个 launch.json。请参阅 [VS Code 调试完全攻略(4)：launch.json 和调试控制台](https://charlesagile.com/vscode-launch-json-and-the-debug-console)获取更多详细信息。

代码中已经包含了这个配置文件。尽管非常简单，但还是逐行介绍一下，确保你能够了解它都做了些什么事。打开 .vscode/launch.json：

launch.json

看一下第 8 至 12 行：

1{
2    "type": "chrome",
3    "request": "launch",
4    "name": "Debug CRA web app in Chrome",
5    "url": "http://localhost:3000",
6    "webRoot": "${workspaceFolder}/react-cra"
7}

type：把调试器类型设置为 chrome，这意味着我们将在此配置中使用 Chrome 浏览器。我们之前用过的另一种类型是 node，通过安装扩展可以得到更多其他类型。顺便说一下，还有一个为 Firefox? 准备的插件

每个调试器 type 都有其特定的配置，所以请试着用 VS Code 随附的便捷自动完成功能。

request：被设置的 launch 选项意味着我们将会启动浏览器进行调试，并将加载下面指定的地址。它与你手动执行的操作并没有太大区别，但是会自动为你执行代码。另一种可能性是 attach 到已经运行的调试服务器，这在当前的配置下是不可能的。最后，当你停止调试会话时，VS Code 会负责关闭 Chrome。

name：你喜欢的任何名称，它将显示在调试工具栏中：