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

使用Typescript 1.8,Gulp 3.9.0,gulp-sourcemaps 1.6.0和tsconfig.json文件.

在一段时间以前,这是很好的.最近(我无法确定什么时候),Chrome和Firefox都不会真正使用sourcemap.

我已经在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 …“还有更多！”

不知道为什么这不能正常工作.任何见解,堆垛机？

解决方法

我相信你的问题在于你如何定义sourceRoot.尝试像sourceRoot：’./typescript/’.