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

Posted 2023-02-23

技术标签:

【中文标题】Typescript + gulp-sourcemaps 生成地图，但浏览器 DevTools 无法识别它【英文标题】：Typescript + gulp-sourcemaps generates map but browser DevTools don't recognize it 【发布时间】：2016-09-15 14:37:38 【问题描述】：

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

在很久以前的某个时候，它运行良好。最近（我无法确定何时），Chrome 和 Firefox 都不会真正使用 sourcemap。

我已经在 Chrome 上启用了 sourcemap，并识别出有一个 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: Problems using createProject ...“还有更多！”

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

【问题讨论】：

嗨，伙计！您找到问题的答案了吗？我面临着类似的事情，但我使用 requirejs 工具进行了 js 编译 【参考方案1】：

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

确保选项：

来源：

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