NextJS VSCode Typescript == 断点未绑定

JS

Next.JS 是一个基于 React 的轻量级框架，用于构建高性能的 Web 应用程序。它提供了许多开箱即用的功能，如服务器端渲染（SSR）、静态生成（Static Generation）和动态路由等，极大地简化了开发过程。VSCode 是一款流行的开发工具，提供了丰富的功能和插件，方便开发者进行代码编写和调试。在使用 typescript 开发 Next.JS 应用时，有时会遇到断点未绑定的问题，本文将介绍如何解决这个问题，并提供相关的案例代码。

在使用 VSCode 进行 Next.JS 应用的开发时，我们经常会使用调试功能来查找和解决代码中的问题。但是有时候，在设置断点后，发现断点无法被触发，这就是所谓的“断点未绑定”问题。这个问题通常是由于 typescript 的编译方式导致的。Next.JS 默认使用的是 Babel 进行编译，而 VSCode 默认使用的是 typescript 进行调试。因此，当我们在 VSCode 中设置断点时，由于编译方式的不同，导致断点无法正确绑定到源代码上，从而无法触发断点。

为了解决这个问题，我们需要对 VSCode 进行一些配置。首先，我们需要在项目根目录下创建一个 .vscode 文件夹，并在其中创建一个 launch.JSon 文件。在 launch.JSon 文件中，我们需要添加一些配置来告诉 VSCode 如何正确地进行断点绑定。具体的配置如下所示：

JSon
{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "pwa-node",
      "request": "launch",
      "name": "Next.JS",
      "skipFiles": [
        "<node_internals>/<strong>"
      ],
      "program": "${workspaceFolder}/node_modules/next/dist/bin/next",
      "args": [
        "dev"
      ],
      "cwd": "${workspaceFolder}",
      "outFiles": [
        "${workspaceFolder}/.next/</strong>"
      ],
      "env": {
        "NODE_OPTIONS": "--inspect"
      }
    }
  ]
}

在上述配置中，我们主要关注的是 program、cwd 和 outFiles 这三个字段。program 字段指定了 Next.JS 的入口文件，cwd 字段指定了当前的工作目录，outFiles 字段指定了编译后的文件所在的目录。这样，VSCode 就能够正确地将断点绑定到源代码上了。

除了配置 VSCode，我们还需要在项目的 tsconfig.JSon 文件中进行一些调整。具体的配置如下所示：

JSon
{
  "compilerOptions": {
    "sourceMap": true,
    "inlineSources": true,
    "JSx": "preserve"
  }
}

在上述配置中，我们主要关注的是 sourceMap 和 inlineSources 这两个字段。sourceMap 字段指定了是否生成源代码的映射文件，inlineSources 字段指定了是否将源代码嵌入到映射文件中。这样，VSCode 就能够正确地读取源代码，并进行断点的绑定和触发了。

案例代码

假设我们有一个简单的 Next.JS 应用，其中包含一个页面和一个 API 路由。我们希望在页面和 API 路由中设置断点，并在调试过程中触发这些断点。下面是一个简单的示例代码：

typescript
// pages/index.tsx
import React from "react";
const IndexPage: React.FC = () => {
  const handleClick = () => {
    const message = "Hello, Next.JS!";
    console.log(message); // 设置断点
  };
  return (
    <div>
      <button onClick={handleClick}>Click Me</button>
    </div>
  );
};
export default IndexPage;

typescript
// pages/api/hello.ts
import { NextApiRequest, NextApiResponse } from "next";
export default (req: NextApiRequest, res: NextApiResponse) => {
  const message = "Hello, API!";
  console.log(message); // 设置断点
  res.status(200).JSon({ message });
};

通过以上示例代码，我们在页面和 API 路由中分别设置了一个断点。当我们在 VSCode 中启动调试模式，并点击页面上的按钮或发送 API 请求时，断点将会被正确地触发，我们可以方便地进行调试和定位问题。

使用 VSCode 进行 Next.JS 应用的调试时，遇到断点未绑定的问题可以通过适当的配置来解决。我们需要在 .vscode/launch.JSon 文件中配置正确的启动参数，以及在 tsconfig.JSon 文件中开启源码映射。通过这些调整，我们可以在开发过程中方便地使用断点进行调试，提高开发效率。