Question

我正在尝试使用Javascript ES6和visual studio代码，使用chrome debugger extension。我的代码在chrome中运行，甚至在vscode的调试器扩展中运行，但没有源映射。使用源图时，我有一个错误：

Breakpoint ignored because generated code not found (source map problem?).

这可能是路径问题，vscode无法找到原始文件。

我的项目结构是：

testjs/
├── src/
│   ├── modules.css
|   |   └── person.js
│   └── index.js
├── dist/
│   ├── modules
|   |   ├── person.js
|   |   └── person.js.map
|   ├── index.js 
│   └── index.js.map

所有configs文件和index.html都在根目录（testjs文件夹）中。以下命令使用src中的文件并输出dist中的文件。 index.html包含dist / index.js

browserify src/index.js -t [ babelify ] -d | exorcist dist/index.js.map > dist/index.js

源映射路径如下：

index.js.map

"sources": [
"../../AppData/Roaming/npm/node_modules/browserify/node_modules/browser-pack/_prelude.js",
"src\\index.js",
"src\\modules\\person.js"
],
"sourceRoot": ""

person.js.map

"sources": [
"../../AppData/Roaming/npm/node_modules/browserify/node_modules/browser-pack/_prelude.js",
"src\\modules\\person.js"
],
"sourceRoot": "",

我的launch.js文件：

{
"version": "0.1.0",
"configurations": [
    {
        "name": "Attach",
        "type": "chrome",
        "request": "attach",
        "port": 9222,
        "url": "file:///C:/<PATH_TO_testjs_FOLDER>/index.html",
        "webRoot": "${workspaceRoot}",
        "sourceMaps": true,
        "trace": true
    }
]

}

更改

"webRoot": "${workspaceRoot}"

到

"webRoot": "${workspaceRoot}"

似乎有效，但出于某种原因，我必须点击重启3次才能使其正常工作。所以我认为还有一些问题。

VSCODE断点被忽略，因为找不到生成的代码

0 个答案: