Машинопись + глоток-sourcemaps генерирует карту, но браузер инструменты разработчика не узнаешь
Использование машинописи 1.8, глоток 3.9.0, gulp-sourcemaps 1.6.0 , и A tsconfig.файл json .
В какой-то момент давным-давно это работало нормально. В последнее время (и я не могу точно определить, когда) ни Chrome, ни Firefox фактически не будут использовать исходную карту.
Я включил sourcemaps в Chrome и распознаю, что есть sourcemap, сообщая мне в консоли:
" обнаружена исходная карта. Связанные файлы должны быть добавлены в дерево файлов. Вы можете отлаживать эти разрешенные исходные файлы как обычные файлы 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
Вот и все. Ни папки с рукописями, ни файлов. Ctrl-P также не находит их. Поэтому, когда я ... отладка, я могу отлаживать только скомпилированное приложение.файл 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 ... - и многое другое!"
Понятия не имею, почему это не работает правильно. Есть идеи, штабелеры?
3 ответа:
В chrome dev Tools откройте Настройки (F1 в windows).
Убедитесь, что параметры:
Источники:
- автоматическое отображение файлов в навигаторе
- включить исходные карты JavaScript
Проверяются
Я полагаю, что ваша проблема заключается в том, как вы определили
sourceRoot. Попробуйте что-нибудь вродеsourceRoot: './typescript/'.
Вероятно, не совсем то, что вы ищете, я лично использую
webpackиsource-map-loaderи способен получить исходную карту, показанную правильно, хотя и под "webpack:/ / "
Вы можете проверить мою конфигурацию на https://github.com/unional/aurelia-logging-color
Надеюсь, это поможет.
