Typescript + gulp -sourcemaps генерирует карту, но браузер DevTools ее не распознает

Использование Typescript 1,8, Gulp 3.9.0, gulp -sourcemaps 1.6.0 и tsconfig.json.

В какой-то момент это работало нормально. В последнее время (и я не могу определить, когда), ни Chrome, ни Firefox фактически не используют sourcemap.

Я включил sourcemaps в 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... "и многое другое!"

Не знаю, почему это работает неправильно. Любое понимание, Штабелеры?

Ответ 1

В chrome dev Инструменты открывают настройки (F1 в окнах).

Убедитесь, что параметры:

Источники:

  • Автоматическое отображение файлов в навигаторе
  • Включить исходные карты JavaScript

отмечены

Ответ 2

Я считаю, что ваша проблема заключается в том, как вы определили sourceRoot. Попробуйте что-то вроде sourceRoot: './typescript/'.

Ответ 3

Вероятно, не совсем то, что вы ищете, я лично использую webpack и source-map-loader и могу правильно отобразить исходную карту, хотя в разделе "webpack://"

image

Вы можете проверить мою конфигурацию на https://github.com/unional/aurelia-logging-color

Надеюсь, что это поможет.