处理 XXX.js 的源映射花费的时间比 YYY 毫秒长，因此我们继续执行而不等待所有断点

Question

[编辑]这实际上也发生在新创建的准系统 React+Typescript 模板 ViteJS 应用程序上，零修改。在 App.tsx 中放置断点会使 VS Code 调试器启动速度慢得难以忍受。原帖如下：

我正在尝试 ViteJS（也许不再使用react-create-app）。我使用 React Typescript 模板创建了一个准系统 Vite 应用程序。然后我引入了 DC.js、Mapbox 和其他一些库。

事情进展顺利几个小时，然后突然（我不知道我做了什么）启动 VS Code 调试器（pwa-chrome在我的启动配置中使用）开始花费很长时间。也就是说，它立即打开 Chrome，但它位于空白屏幕上，直到我的 VS Code 调试控制台写完以下警告：

WARNING: Processing source-maps of http://localhost:5173/node_modules/.vite/deps/chunk-YLBYPMLO.js?v=2e2948d4 took longer than 5679.765125 ms so we continued execution without waiting for all the breakpoints for the script to be set.

WARNING: Processing source-maps of http://localhost:5173/node_modules/.vite/deps/crossfilter2.js?v=2e2948d4 took longer than 1000.451959 ms so we continued execution without waiting for all the breakpoints for the script to be set.

WARNING: Processing source-maps of http://localhost:5173/node_modules/.vite/deps/d3.js?v=2e2948d4 took longer than 999.6403339999999 ms so we continued execution without waiting for all the breakpoints for the script to be set.

WARNING: Processing source-maps of http://localhost:5173/node_modules/.vite/deps/dc.js?v=2e2948d4 took longer than 999.535501 ms so we continued execution without waiting for all the breakpoints for the script to be set.

...and more similar warnings for other libraries like React and MapBox.

我搜索过这个“继续执行而不等待所有断点”警告，但互联网似乎相当安静。它来自 VS Code（参见https://github.com/microsoft/vscode-js-debug/blob/main/src/adapter/threads.ts），但在使用 WebPack 或其他开发之前我没有看到此警告-环境。它是在切换到 ViteJS 后不久出现的，这就是为什么我怀疑它可能是我的 ViteJS 设置中的某些内容。

使用 Chrome Devtools 而不是 VS Code 进行调试效果很好（即立即启动）。我的肌肉记忆是 VS Code 调试器，所以我想继续使用它，但如果每次启动它时我都必须等待 5 秒，那就不行了。

有什么想法可能会导致这种情况吗？

我的 ViteJs 配置很简单，这就是您使用 ViteJS 创建 React Typescript 应用程序时得到的配置：

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    react(),
  ],
})

非常感谢任何帮助，谢谢！

[编辑]

我刚刚从我的应用程序中删除了除 React 之外的所有库，并将代码减少到此（从 ViteJS React Typescript 默认 main.tsx 使用）。

export function App() {
    return (
    <div className="App">
      <h1>Testing Testing!</h1>
    </div>
  );
}

这消除了有关其他库的源映射的大部分警告，仅剩下这两个：

WARNING: Processing source-maps of http://localhost:5173/node_modules/.vite/deps/chunk-YLBYPMLO.js?v=585c1efb took longer than 5728.142083 ms so we continued execution without waiting for all the breakpoints for the script to be set.

WARNING: Processing source-maps of http://localhost:5173/node_modules/.vite/deps/react_jsx-dev-runtime.js?v=585c1efb took longer than 999.2322079999994 ms so we continued execution without waiting for all the breakpoints for the script to be set.

不确定这是否超级有帮助，只是表明这个问题发生在我身上并不是因为我添加了 DC.js、Mapbox 等。

FWIW，我可以添加"pauseForSourceMap": false到我的启动配置中。这消除了问题（调试器快速启动），除了我进入内置/生成的 javascript 文件作为断点，并且仅几秒钟后就开始能够单步执行我的实际打字稿。

Answer 1

我在寻找 Angular 上出现的相同错误时发现了这篇文章，并在这里找到了解决方案：Why am Ilenting getting "Could not read source map" in VSCode using Angular with NodeJS 17 and above? - 特别是 sourceMapPathOverrides 和启动脚本更新

使它起作用的是将标志“--host=127.0.0.1”添加到启动脚本中。例如在package.json：

"scripts": {
    "ng": "ng",
    "start": "ng serve --host=127.0.0.1",

我的启动 json：

"version": "0.2.0",
"configurations": [

{
  "name": "Debug Frontend",
  "type": "pwa-chrome",
  "request": "launch",
  "preLaunchTask": "Serve Frontend",
  "url": "http://localhost:4200/#",
  "webRoot": "${workspaceFolder}",
  "sourceMaps": true,
  "sourceMapPathOverrides": {
    "webpack:/*": "${webRoot}/*",
    "/./*": "${webRoot}/*",
    "/src/*": "${webRoot}/src/*",
    "/*": "*",
    "/./~/*": "${workspaceFolder}/node_modules/*"
  }
}

围绕该问题的更多 vscode 讨论：https ://github.com/microsoft/vscode/issues/167353