如何在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

回答

相关问题