VS代碼：「斷點被忽略，因爲生成的代碼沒有找到」錯誤

Question

我已經找遍了，我仍然有問題在VS代碼中調試TypeScript。我已經閱讀this線程，但仍然無法打到放置在TypeScript文件中的斷點，點擊.js文件中的斷點都可以正常工作。

所以這裏是我設置的最簡單的「hello world」項目。

• app.ts：

  var message: string = "Hello World"; 
  
  console.log(message); 
  

• tsconfig.json

  { 
      "compilerOptions": { 
       "target": "es5", 
       "sourceMap": true 
      } 
  } 
  

• launch.json

  { 
      "version": "0.2.0", 
      "configurations": [ 
       { 
        "name": "Launch", 
        "type": "node", 
        "request": "launch", 
        "program": "${workspaceRoot}/app.js", 
        "stopOnEntry": false, 
        "args": [], 
        "cwd": "${workspaceRoot}", 
        "preLaunchTask": null, 
        "runtimeExecutable": null, 
        "runtimeArgs": [ 
         "--nolazy" 
        ], 
        "env": { 
         "NODE_ENV": "development" 
        }, 
        "externalConsole": false, 
        "sourceMaps": true, 
        "outDir": null 
       } 
      ] 
  } 
  

我通過運行tsc --sourcemap app.ts命令生成了js.map文件。

當我在console.log(message);行上設置一個斷點並從「調試」選項卡啓動程序（F5）時，斷點呈灰色顯示「由於生成的代碼未找到而忽略斷點（源圖問題？ ）「。我重視我所觀察的截圖：

我缺少什麼？

編輯：

嗨，我仍然堅持這一點。我設法制作了一個樣例項目，但是在我試圖將該項目複製到硬盤上的其他位置之後，中斷點再次變成灰色，未被擊中。我在這個測試項目中所做的不同之處是通過編譯TypeScript文件並使用tsc app.ts --inlinesourcemap

我將上述示例項目上傳到GitHub，因此您可以看看它here。

Answer 1

我認爲問題可能出現在launch.json的「程序」部分。試着這樣說：

{ 
    // Name of configuration; appears in the launch configuration drop down menu. 
    "name": "Launch", 
    // Type of configuration. 
    "type": "node", 
    "request": "launch", 
    // Workspace relative or absolute path to the program. 
    "program": "${workspaceRoot}/app.ts", 
    // Automatically stop program after launch. 
    "stopOnEntry": false, 
    // Command line arguments passed to the program. 
    "args": [], 
    // Workspace relative or absolute path to the working directory of the program being debugged. Default is the current workspace. 
    "cwd": "${workspaceRoot}", 
    // Workspace relative or absolute path to the runtime executable to be used. Default is the runtime executable on the PATH. 
    "runtimeExecutable": null, 
    // Optional arguments passed to the runtime executable. 
    "runtimeArgs": ["--nolazy"], 
    // Environment variables passed to the program. 
    "env": { 
     "NODE_ENV": "development" 
    }, 
    // Use JavaScript source maps (if they exist). 
    "sourceMaps": true, 
    // If JavaScript source maps are enabled, the generated code is expected in this directory. 
    "outDir": "${workspaceRoot}" 
} 

Answer 2

如果切換到Visual Studio腳本類型的項目，你可以調試TS文件通常 我覺得在app.js.map代文件 這裏的問題是視覺工作室應用程序樣本.js.map

{「version」：3，「file」：「app.js」，「sourceRoot」：「」，「sources」：[「app.ts」]，「names」： [ 「的HelloWorld」， 「HelloWorld.constructor」]， 「映射」：「AAAA; IACIA，oBAAmBA，OAAcA; QAAdC，YAAOA，GAAPA，OAAOA，CAAOA; IAEjCA，CAACA; IACLD，iBAACA; AAADA，CAACA，AAJD，IAIC ; AAED，IAAI，KAAK，GAAG，IAAI，UAAU，CAAC，kBAAkB，CAAC，CAAC; AAC/C，OAA O，CAAC，GAAG，CAAC，KAAK，CAAC，OAAO，CAAC，CAAC 「}

VS Visual Studio代碼 app.js.map

{」 版本 「：3」，文件「：」應用程序。JS 「 」sourceRoot「： 」「， 」源「：[」 ../ app.ts 「]，」 名稱 「：[]，」 映射 「：」 AACA; IACI，oBAAmB，OAAc; QAAd，亞奧，會計，OAAO，CAAO; IAEjC，CAAC; IACL，iBAAC; AAAD，CAAC，AAJD，IAIC; AACD，IAAI，KAAK，GAAC，IAAI，UAAU，CAAC，AAAA，CAAC，CAAC; AACxC，OAAO，CAAC，GAAG，CAAC ，KAAK，民航總局，OAAO，中國民航總局，民航總局; AAC3B，OAAO，中國民航總局，GAAG，中國民航總局，OAAO，中國民航總局，民航總局「}

試着更換它，然後再試一次不要忘記考慮的目錄層次結構來源

Answer 3

更新：打字稿調試現在被添加在0.3.0更新：總是很清楚你的斷點，然後附加，再加入斷點這是一個錯誤，並已上報

Answer 4

我碰到這個questio來了。同時尋找我遇到的類似問題的解決方案。儘管與OP的問題不同，它可能會幫助其他人。

背景：我跟着Visual Studio Code HelloWorld example，發現自己無法停在休息點。

我通過更改.vscode/launch.json解決了我的問題，因此啓動配置下的"sourceMaps": true屬性已設置（默認爲false時啓動）。

Answer 5

面對相同的問題，並通過更正文件的路徑來解決它。
我的項目包含src和dist目錄，問題是生成的.map文件沒有到目錄src的正確路徑。

的修復 - tsconfig.json：

{ 
    "compilerOptions": { 
     "target": "es5", 
     "module": "commonjs", 
     "sourceMap": true, 
     "outDir": "dist", 
     "sourceRoot": "../src" 
    } 
} 

起初，我sourceRoot指着src並沒有src目錄內dist。

此外，sourceMaps應設置爲true內部launch.json。

Answer 6

設置"outFiles": ["${workspaceRoot}/compiled/**/*.js"],解決了我的問題。

"outFiles"值應該與tsconfig.json爲outDir一組和mapRoot這是你的情況${workspaceRoot}，所以儘量"outFiles": "${workspaceRoot}/**/*.js"

這裏是我的tsconfig.json

{ 
    "compilerOptions": { 
     "module": "commonjs", 
     "noImplicitAny": true, 
     "removeComments": true, 
     "preserveConstEnums": true, 
     "sourceMap": true, 
     "target": "es6", 
     "outFiles": ["${workspaceRoot}/compiled/**/*.js"], 
     "mapRoot": "compiled" 
    }, 
    "include": [ 
     "app/**/*", 
     "typings/index.d.ts" 
    ], 
    "exclude": [ 
     "node_modules", 
     "**/*.spec.ts" 
    ] 
} 

和launch.json

{ 
    "version": "0.2.0", 
    "configurations": [ 
     { 
      "type": "node", 
      "request": "launch", 
      "name": "Launch Program", 
      "program": "${workspaceRoot}/compiled/app.js", 
      "cwd": "${workspaceRoot}", 
      "outDir": "${workspaceRoot}/compiled", 
      "sourceMaps": true 
     } 
    ] 
} 

Answer 7

面對相同的問題，並通過在launch.json中更正"webRoot" config解決它。 Here's my workspace's explorer view.

由於編譯結果main.js and main.js.map在"./project/www/build"目錄，我改變"webRoot"進入"${workspaceRoot}/project/www/build"從"${workspaceRoot}"，和它的工作！

發射。json文件如下：

{ 
    "version": "0.2.0", 
    "configurations": [ 
     { 
      "name": "Launch Chrome against localhost", 
      "type": "chrome", 
      "request": "launch", 
      "url": "http://localhost:8100", 
      "sourceMaps": true, 
      "webRoot": "${workspaceRoot}/project/www/build" 
     }, 
     { 
      "name": "Attach to Chrome", 
      "type": "chrome", 
      "request": "attach", 
      "port": 9222, 
      "url": "http://localhost:8100", 
      "sourceMaps": true, 
      "webRoot": "${workspaceRoot}/project/www/build" 
     } 
    ] 
} 

Answer 8

實際上只有一種方法可以解決這個問題，那就是查看實際使用的源映射路徑。

以下行添加到launch.json：

"diagnosticLogging": true, 

在很多其他的東西，你的控制檯將有這樣的詩句：

SourceMap: mapping webpack:///./src/main.ts => C:\Whatever\The\Path\main.ts, via sourceMapPathOverrides entry - "webpack:///./*": "C:/Whatever/The/Path/*" 

然後你只需調整你的sourceMapPathOverrides使路徑匹配到您的實際源路徑。我發現我需要對不同項目進行稍微不同的配置，因此瞭解如何進行調試確實有幫助。

Answer 9

整天把我的頭髮扯掉後，我終於找到了工作。

問題是有三個文件擺弄 - launch.json，tsconfig.json和webpack.config.js，所以它都是組合。

diagnosticslogging是幫助我弄明白的關鍵。

微軟請讓這更容易...真的，vscode可能已經弄清楚了這一點，或者至少引導了我更多關於這個過程。

反正這裏就是終於在我的launch.json工作：

"url": "http://localhost:8080/", 
"sourceMaps": true, 
"webRoot": "${workspaceRoot}", 
"diagnosticLogging": true, 
"sourceMapPathOverrides": { "webpack:///src/*": "${workspaceRoot}/src/*" } 

我tsconfig.json：

"outDir": "dist", 
"sourceMap": true 

我webpack.config.js：

output: { 
    path: 'dist/dev', 
    filename: '[name].js' 
}, 
... 
module: { 
    loaders: [...], 
    preLoaders: [{ 
     test: /\.js$/, 
     loader: "source-map-loader" 
    }] 
} 
... 
plugins: [ 
    new webpack.SourceMapDevToolPlugin(), 
    ... 
], 
devtool: "cheap-module-eval-source-map", 

Answer 10

下旬至派對，但你可以在github Test globbing support for the outFiles attribute in the launch config #12254上查看這篇文章。

基本上在vscode的新版本中，您現在必須在task.json中使用屬性outFiles的glob模式。

我有一個類似的問題。我通過指示輸出目錄來修復outFiles

Answer 11

沒有其他答案適用於我。

然後我意識到我的launch.json中的program屬性指向.js文件，但我的項目是一個TypeScript項目。

我改變它指向的打字稿（.ts）文件，並設置outFiles屬性指向編譯後的代碼的居住地：

{ 
    "type": "node", 
    "request": "launch", 
    "name": "Launch Program", 
    "program": "${workspaceRoot}/src/server/Server.ts", 
    "cwd": "${workspaceRoot}", 
    "outFiles": ["${workspaceRoot}/dist/**/*.js"] 
} 

這解決了這個問題對我來說！

Answer 12

outFiles": ["${workspaceRoot}/compiled/**/*.js"], 

這節省了我的生命，因爲TS不是在尋找子代。非常感謝

Answer 13

此配置啓動。JSON工作：

{ "type": "node", "request": "launch", "name": "Launch Program - app", "program": "${workspaceRoot}/src/server.ts", "cwd": "${workspaceFolder}", "outFiles": ["${workspaceRoot}/release/**"], "sourceMaps": true }

Answer 14

我想貢獻不遺餘力的頭撞幾個小時。

我用調試器爲Chrome代碼用於VS代碼（你不需要這個用於webstorm），我會推薦花10分鐘閱讀他們的page，它會啓發你的世界。

安裝調試器擴展後，確保源地圖安裝，在我的情況我還需要源地圖加載器。請檢查您的package.json。

我launch.json這是鉻調試器配置（我所有的源文件，其中下SRC）：

{ 
 
    // Use IntelliSense to learn about possible attributes. 
 
    // Hover to view descriptions of existing attributes. 
 
    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387 
 
    "version": "0.2.0", 
 
    "configurations": [{ 
 
     "type": "chrome", 
 
     "request": "attach", 
 
     "name": "Attach to Chrome", 
 
     "port": 9222, 
 
     "webRoot": "${workspaceRoot}/src" 
 
    }, 
 
    { 
 
     "type": "chrome", 
 
     "request": "launch", 
 
     "name": "Launch Chrome against localhost", 
 
     "url": "http://localhost:8080", 
 
     "webRoot": "${workspaceRoot}/", 
 
     "sourceMapPathOverrides": { 
 
     "webpack:///./*": "${webRoot}/*" 
 
     } 
 
    } 
 
    ] 
 
}

添加devtool: 'source-map'您webpack.config.js。 生成映射內聯的其他參數不適用於Chrome調試器（他們在其頁面上提到）。

這是一個例子：

module.exports = { 
 
    entry: "./src/index.js", 
 
    output: { 
 
    path: path.resolve(__dirname, "build"), 
 
    filename: "bundle.js" 
 
    }, 
 
    plugins: [ 
 
    new HtmlWebpackPlugin({ 
 
     title: "Tutorial", 
 
     inject: "body", 
 
     template: "src/html/index.html", 
 
     filename: "index.html" 
 
    }), 
 
    new DashboardPlugin() 
 
    ], 
 
    devtool: 'source-map', 
 
    module: { 
 
    loaders: [ 
 
     { 
 
     test: /\.css$/, 
 
     loader: "style-loader!css-loader" 
 
     }, 
 
     { 
 
     test: /\.js?$/, 
 
     exclude: /(node_modules|bower_components)/, 
 
     loader: "babel-loader", 
 
     query: { 
 
      presets: ["es2017", "react"], 
 
      plugins: ['react-html-attrs']   
 
     } 
 
     } 
 
    ] 
 
    }, 
 
    watch: true 
 
};

然後你運行你的WebPack：`的WebPack-DEV-服務器--devtool源地圖--progress --port 8080，我用webpack-dev-server，但它與webpack具有相同的選項。

當你這樣做時，你必須看到你生成的應用程序的。地圖文件。如果不是，則返回並驗證您的設置。

現在在VS Code切換到調試控制檯並運行.scripts。這是一個非常有用的命令，因爲它顯示了生成的代碼映射到哪個源。

事情是這樣的： - webpack:///./src/stores/friendStore.js (/Users/your_user/Developer/react/tutorial/src/stores/friendStore.js)

如果這是錯誤的，那麼你需要驗證您的sourceMapPathOverrides在launch.json，例子可在extension's page