VS Code 调试完全攻略（6）：调试由 TypeScript 开发的 React

翻译：疯狂的技术宅

作者：Charles Szilagyi

来源：charlesagile

正文共：1808 字

预计阅读时间：7 分钟

‍‍说到前端，我现在选择的武器是 React、TypeScript 和 Parcel trinity。这是一个简单、可靠而且高效的设置，只需最少的配置。本文将向你展示如何在 VS Code 中创建匹配的调试器。

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

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

获取代码

如果你已经有了 React、TypeScript 和 Parcel 项目，则可以跳过本节。如果没有就下载示例代码：

git clone git@github.com:thekarel/debug-anything.git
cd debug-anything/parcel
yarn # or npm i

代码

代码结构

这是一个简单的应用程序：你将看到博客文章标题的列表，单击标题将会获取该文章的正文，并将其显示在列表上方。

像往常一样，这个文件夹中的代码保持尽可能的简单，以便使我们把注意力集中在调试器上。在用于生产的应用程序中，我们将会使用人性化的文件夹结构。入口是 index.html，它引入 index.tsx 并运行基本的 React 程序。

你应该关注以下文件：

Post.ts # The Post interface type
Posts.tsx # The post-list React component
index.html # The entry-point
index.tsx # The React app
postRepository.ts # Data fetching module

总共不到 100 行，所以不要指望有什么实质性的内容?

Parcel

你可能想知道 Webpack 或 Babel 配置文件在哪里。好吧，没有！由于 Parcel 是一个零配置的打包程序，因此我们可以直接告诉它去编译代码，并且始终有效。我发现它比 Create React App 之类的其他解决方案更简单、快速。

在这个例子中，可以通过简单地将 Parcel 指向 index.html 来打包用 TypeScript 编写的整个 React 程序，这就是我们所要做的，无需为太多的事操心。值得你把一颗星星⭐️送给它：GitHub? （https://github.com/parcel-bundler/parcel）

注意：示例代码用的是 Parcel 2 alpha3。

启动服务器

用 yarn start 或 npm start 启动服务器：

$ yarn start
yarn run v1.22.4
$ parcel index.html
ℹ️ Server running at http://localhost:1234
✨ Built in 548ms

确保你可以访问 http://localhost:1234

程序在启动时获取文章列表，然后在单击标题时从服务器获取所选文章的正文。

配置调试器

我们希望在调试时能够在 VS Code 中设置断点、启动调试浏览器、以及逐步调试获取初始列表和后续的远程请求。

为了使它尽可能简单和好用，我们将利用 launch.json 文件的优势。实际上已经为你准备好了?

launch.json

让我们打开 .vscode/launch.json 并关注 React + TS 和 Parcel 部分：

{
    "type": "chrome",
    "request": "launch",
    "name": "Debug React, TS, Parcel app in Chrome",
    "url": "http://localhost:1234/",
    "webRoot": "${workspaceFolder}/parcel",
    "pathMapping": {
        "__parcel_source_root": "${workspaceFolder}/parcel"
    },
        "skipFiles": [
        "${workspaceFolder}/parcel/node_modules/**/*.js",
        "<node_internals>/**/*.js"
    ]
},

顺便说一下，该配置与我们的 Create React App 示例非常相似。

type 和 request 参数告诉 VS Code 在新的 Chrome 窗口中开始调试。

第一次运行后，启动器的 name 将显示在调试工具栏和 IDE 的状态栏中：

name

url 需要与我们的 dev 版本的地址匹配（默认为 http://localhost:1234/）。

webRoot：与开发服务器根目录匹配的文件系统路径。通常是入口点所在的文件夹。在我们的例子中是 index.html 所在的文件夹。要注意，示例代码库中包含多个小项目。在单项目仓库中，"webRoot": "${workspaceFolder}/src" 是一个要想到的路径。

pathMapping：在当前项目的情况下，此选项是必需的，因为 Parcel 提供了一个源映射，使原始文件看起来像在 /__ parcel_source_root 下。没有这个设置，VS Code 会无法将源中的断点位置映射到运行时代码：

breakpoint bound

如果遇到 "Breakpoint set but not yet bound" 问题，请检查你的 pathMapping

你可以在调试浏览器中找到正确的路径。在 Chrome 中，打开开发者控制台，然后转到“Sources”：

查找 map name

最后，我们设置 skipFiles，使调试器永远不会 Step Into 第三方或核心 Node.js 模块。如果你想专注于自己的代码并且对花时间看库代码不感兴趣，那么跳过此类文件非常有用，强烈建议你进行调整。

使用 React + TypeScript 调试器

确保 dev 服务器正在运行，然后启动调试浏览器：

添加两个断点：一个在 fetchBody 函数内部，另一个在 useEffect hook 中：

break point

现在，我们可以重新启动调试器（而不是服务器！），并在首次安装组件时检查 hook 的行为：

‍

接下来，我们可以遵循 fetchBody 的代码流程——注意我们是如何永远都看不到任何核心库或第三方库的（例如 Fetch 或 React 内部）：

希望你能够基于这个模板在 React/TypeScript 应用中实现舒适的调试工作流程✌️

原文链接

https://charlesagile.com/debug-react-typescript