如何在VS 2017中調試webpacked TypeScript

我正在使用帶有ts-loader的webpack來轉換和捆綁各種TypeScript文件。這裏是我的CONFIGS：如何在VS 2017中調試webpacked TypeScript

tsconfig.json

{ 
    "compileOnSave": false, 
    "compilerOptions": { 
    "noImplicitAny": true, 
    "noEmitOnError": true, 
    "removeComments": false, 
    "sourceMap": true, 
    "target": "es5", 
    "module": "es2015", 
    "lib": [ "dom", "es2015", "es2016" ], 
    "allowSyntheticDefaultImports": true, 
    "moduleResolution": "node", 
    "preserveConstEnums": true, 
    "skipLibCheck": true 
    }, 
    "include": [ 
    "node_modules/@types/**/*.d.ts", 
    "src/**/*.ts" 
    ] 
}

webpack.config.js

var path = require('path'); 

module.exports = { 
    context: path.join(__dirname, 'src'), 
    entry: { 
     app: './app' 
    }, 
    output: { 
     path: path.join(__dirname, 'dist/'), 
     filename: '[name].bundle.js' 
    }, 
    resolve: { 
     extensions: ['.js','.ts'] 
    }, 
    module: { 
     loaders: [{ 
      test: /\.ts$/, 
      loaders: ['ts-loader'], 
      exclude: /(node_modules|bower_components)/ 
     }] 
    }, 
    devtool: 'inline-source-map' 
};

我的文件夾被組織爲

/src 
/dist

src文件夾中，我有我.ts文件以及打字稿編譯器創建的pre-webpack js和.map文件（通過ts-loader）。在dist文件夾中，我使用內聯源地圖獲取webpacked js。 webpacked js被我的html頁面引用。當我在VS中運行項目並在原始.ts文件中設置斷點時，斷點將顯示「斷點當前不會被命中，未爲此文檔加載符號」。當然它沒有被擊中。如何使源映射工作在我的原始TypeScript中進行調試？

更新：VS中的TypeScript調試工作正常使用IE或Chrome時，webpack不在混合。這是導致問題的webpack的增加。

來源

2017-08-02 Mathumatix

假設您正在使用角度cli：在localhost：4200上運行ng serve打開的瀏覽器並檢查頁面。找到webpack/src/fileyouwanttodebug，放置斷點並刷新頁面

來源

2017-08-02 19:50:03 Moriarty

謝謝，但我沒有使用角。另外我想在Visual Studio中調試TypeScript，而不是瀏覽器中的JavaScript。 VS中的TypeScript調試工作正常使用IE或Chrome時，webpack不在混合。這是導致問題的webpack的增加。更新了問題以反映這一點。 – Mathumatix

好吧，我的壞，只是讓你知道，雖然你可以通過webpack在瀏覽器中調試實際的Typescript。 VS使用launch.json文件進行調試，你可以看看這個。 https://code.visualstudio.com/docs/editor/debugging – Moriarty

再次感謝。該鏈接適用於VS Code，但我正在使用完整的VS 2017.你有任何有關這方面的信息？ – Mathumatix

如何在VS 2017中調試webpacked TypeScript

回答

相關問題