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

Question

使用 Typescript 1.8、Gulp 3.9.0、gulp-sourcemaps 1.6.0 和一个 tsconfig.json 文件。

很久以前的某个时刻，这工作正常。最近（我无法确定何时），Chrome 和 Firefox 实际上都不会使用源映射。

我已经在 Chrome 上启用了 sourcemaps，并且识别出有一个 sourcemap，在控制台中告诉我：

"Source Map detected. Associated files should be added to the file tree. You can debug these resolved source files as regular JavaScript files. Associated files are available via file tree or Ctrl + P."

但是，无法通过任何一种方法获得源文件。

本地构建文件结构（仅以登录为例）：

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

... "and much more!"

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

Answer 1

我认为您的问题在于您如何定义 sourceRoot。试试 sourceRoot: './typescript/'.

Answer 2

可能不完全是你要找的东西，我个人使用 webpack 和 source-map-loader 并且能够正确显示源地图，尽管在 "webpack://"

下

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

查看我的配置

希望对您有所帮助。

Answer 3

在 chrome 开发工具中打开设置（windows 中的 F1）。

确保选项：

来源：

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

已检查

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

Typescript + gulp-sourcemaps generates map but browser DevTools don't recognize it

typescript

gulp

google-chrome-devtools

source-maps

gulp-sourcemaps