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

最新推荐文章于 2024-08-22 08:00:00 发布

weixin_39902870

最新推荐文章于 2024-08-22 08:00:00 发布

阅读量842

点赞数

文章标签： vscode http post

译者：疯狂的技术宅

作者：Charles Szilagyi

原文链接：https://charlesagile.com/debug-create-react-app

转发链接：https://mp.weixin.qq.com/s/uaozQJ9WOvqL9rZbX-Remw

前言

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

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

VS Code 调试完全攻略系列「基础知识」
VS Code 调试完全攻略系列「步进逐行调试」
VS Code 调试完全攻略系列「编辑变量并重新执行函数」
VS Code 调试完全攻略系列：launch.json 和调试控制台
基于浏览器的 React 应用( 本文)
调试用 TypeScript 开发并打包的 React

代码设置

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

git clone git@github.com:thekarel/debug-anything.gitcd debug-anything/react-crayarn # npm iyarn start # npm start

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

Compiled successfully!You can now view react-cra in the browser. Local:            http://localhost:3000On Your Network:  http://192.168.0.4:3000Note that the development build is not optimized.To 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 行：

{    "type": "chrome",   "request": "launch",    "name": "Debug CRA web app in Chrome",   "url": "http://localhost:3000",    "webRoot": "${workspaceFolder}/react-cra"}

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

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

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

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