15

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

很久以前，这工作得很好。最近（我无法确定何时），Chrome 和 Firefox 都不会真正使用源映射。

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

“检测到源映射。应将关联文件添加到文件树中。您可以将这些解析的源文件作为常规 JavaScript 文件进行调试。关联文件可通过文件树或 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

gulp-typescript：使用 createProject 的问题......“还有更多！”

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

4

3 回答 3

13

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

确保选项：

资料来源：

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

被检查

于 2017-06-06T16:56:28.087 回答
2

可能不完全是您正在寻找的东西，我个人使用webpack并且source-map-loader能够正确显示源映射，尽管在“webpack://”下

图片

您可以在https://github.com/unional/aurelia-logging-color查看我的配置

希望能帮助到你。

于 2017-01-11T08:14:20.443 回答
-1

我相信您的问题在于您如何定义sourceRoot. 尝试类似的东西sourceRoot: './typescript/'。

于 2016-05-31T11:22:29.573 回答