说到前端,我现在选择的武器是 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👍

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

启动服务器

yarn startnpm 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 示例非常相似。

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

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

name

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

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

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

1588237889 debuganything 06 05 breakpoint bound

如果遇到 “Breakpoint set but not yet bound” 问题,请检查你的 pathMapping

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

查找 map name

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

使用 React + TypeScript 调试器

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

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

1588237903 debuganything 06 08 breakp

现在,我们可以重新启动调试器(而不是服务器!),并在首次安装组件时检查 hook 的行为:

img

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

img

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