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

Question

使用Typescript 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:使用createProject的问题 ......"还有更多!"

不知道为什么这不能正常工作.有任何见解,Stackers？

Answer 1

在chrome dev Tools中打开设置(Windows中的F1).

确保选项:

资料来源:

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

检查