Typescript + gulp-sourcemaps генерирует карту, но Браузерные DevTools не распознают ее
используя Typescript 1.8, залпом 3.9.0, gulp-sourcemaps 1.6.0 и tsconfig.в JSON.
в какой-то момент давным-давно это работало нормально. В последнее время (и я не могу точно определить, когда), ни Chrome, ни Firefox на самом деле использовать в sourcemap.
Я включил sourcemaps в Chrome и распознает, что есть карта источника, сообщающая мне в консоли:
"Карта Источник обнаруженный. Связанные файлы должны быть добавлены в дерево файлов. Вы можете отлаживать эти разрешенные исходные файлы, как обычные файлы JavaScript. Связанные файлы доступны через дерево файлов или Ctrl + П."
однако исходные файлы недоступны ни с помощью одного из методов.
построенная файловая структура на локальной сборке (просто используя логин в качестве примера):
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 также не находит их. Поэтому, когда я отлаживаю, я могу отлаживать только скомпилированное приложение.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 для использования sourcemaps.
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
надеюсь, что это помогает.