Typescript + gulp-sourcemaps生成地图，但浏览器DevTools无法识别它

Question

使用打字稿1.8 ， Gulp 3.9.0 ， gulp-sourcemaps 1.6.0 ，以及 tsconfig.json 文件。

很久以前，这一点工作得很好。最近（我无法确定何时），Chrome和Firefox都不会实际使用源图。

我在Chrome上启用了源代码，并认识到有一个源代码图，在控制台中告诉我：

“检测到源地图。应该将相关文件添加到文件树中。您可以将这些已解析的源文件调试为常规JavaScript文件。可以通过文件树或Ctrl + P获取相关文件。”

但是，两种方法都无法使用源文件。

在本地版本上构建文件结构（仅使用Login作为示例）：

build
  |- resources
      |- js
         |- app.js
         |- app.js.map
         |- typescript
              |- app.ts
              |- sections
                    |- login
                         |- LoginService.ts
                         |- LoginDirective.ts
                         |- LoginController.ts

但是，Chrome仅在文件树中显示此内容：

build
  |- resources
      |- js
         |- app.js

就是这样。没有Typescript文件夹，没有文件。 Ctrl-P也找不到它们。因此，当我调试时，我只能调试已编译的app.js文件，而不是查看Typescript代码。

我的gulp文件相关部分：

var ts = require( 'gulp-typescript' ); // compiles typescript
var tsProject = ts.createProject( 'tsconfig.json' );

gulp.task( 'compile:typescript', function () {
    var tsResult = tsProject
        .src() // instead of gulp.src(...)
        .pipe( sourcemaps.init() )
        .pipe( ts( tsProject ) );

    return tsResult.js
        .pipe( sourcemaps.write( '.', 
             {
               includeContent: false, 
               sourceRoot: 'typescript'
             }) 
         )
        .pipe( './build' )
        ;
} );

我已经查看了类似情况的各种文档和解决方案，但我仍然没有让Chrome使用源图。

https://www.npmjs.com/package/gulp-sourcemaps

https://github.com/ivogabe/gulp-typescript/issues/201

https://github.com/floridoo/gulp-sourcemaps/issues/89#issuecomment-73184103

gulp-typescript: Problems using createProject ......“还有更多！”

不知道为什么这不能正常工作。任何见解，Stackers？

Answer 1

在chrome dev工具中打开设置（Windows中的F1）。

确保选项：

来源：

• 自动在导航器中显示文件
• 启用JavaScript源地图

检查

Answer 2

可能不完全不是您要找的，我个人使用webpack和source-map-loader并且能够正确显示源地图，尽管在“webpack：//”下

您可以在https://github.com/unional/aurelia-logging-color

查看我的配置

希望它有所帮助。

Answer 3

我相信你的问题在于你如何定义sourceRoot。尝试类似sourceRoot: './typescript/'的内容。