Question

我的VSCode（1.24.0）中存在问题，调试器用于Chrome扩展（4.5.0），并且调试应用程序捆绑在保险丝盒捆绑器上。

tsconfig.json：

{
  "compilerOptions": {
    "lib": ["es2015", "dom"],
    "moduleResolution": "node",
    "module": "commonjs",
    "jsx": "react",
    "outDir": "dist",
    "noUnusedLocals": true,
    "experimentalDecorators": true,
    "allowSyntheticDefaultImports": true,
    "esModuleInterop": true,
    "sourceMap": true,
    "target": "es2015"
  },
  "include": ["src"]
}

fuse.ts：

import { FuseBox, WebIndexPlugin, CSSPlugin } from "fuse-box";
import { task } from "fuse-box/sparky";
import path from "path";

const isProduction = false;

task("default", async () => {
  const fuse = FuseBox.init({
    homeDir: path.resolve(__dirname, "src"),
    output: "public/$name.js",
    target: "browser",
    log: true,
    sourceMaps: { vendor: false },
    tsConfig: "tsconfig.json",
    plugins: [
      CSSPlugin(),
      WebIndexPlugin({
        template: "src/index.html",
        appendBundles: true
      })
    ]
  });

  if (!isProduction) {
    fuse.dev({ port: 4545 });
  }

  const bundle = fuse
    .bundle("app")
    .target("browser")
    .instructions("> index.tsx");

  if (!isProduction) {
    bundle.watch("src**").hmr();
  }

  await fuse.run();
});

的package.json

"ts-node": "^6.1.0",
"typescript": "^2.9.1"
"fuse-box": "^3.2.2",

脚本：

  "scripts": {
    "start": "node -r ts-node/register ./fuse.ts"
   }

我的文件夹结构是：

public/index.html
public/app.js
public/app.js.ap

src/index.html
src/index.tsx
src/Sidebar.tsx
...

./fuse.ts
./tsconfig.json
./package.json

最后我的launch.json：

  ....
  "type": "chrome",
  "request": "launch",
  "name": "debug-client",
  "url": "http://localhost:4545",
  "sourceMaps": true,
  "webRoot": "${workspaceRoot}",
  "sourceMapPathOverrides": {
    "/*": "${webRoot}/*"
  }

问题很简单，当我从vscode运行调试时，chrome启动，应用程序启动，但vscode返回发出断点（断点为灰色）。

.scripts（调试控制台）返回正确的路径，调试在浏览器中工作。

我错过了什么？

由于

Fuse-Box，VSCode，React，Typescript和调试

0 个答案: