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

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

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

Я включил исходные карты в Chrome и распознал наличие исходной карты, сообщая мне в консоли:

«Обнаружена исходная карта. Связанные файлы должны быть добавлены в дерево файлов. Вы можете отлаживать эти разрешенные исходные файлы как обычные файлы 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 ... "и многое другое !"

Понятия не имею, почему это работает неправильно. Есть какие-нибудь идеи, укладчики?


person MaxRocket    schedule 18.05.2016    source источник
comment
Привет, чувак! вы нашли ответ на свой вопрос? Я столкнулся с подобной проблемой, но я сделал компиляцию js с помощью инструментов requirejs.   -  person user1546652    schedule 25.09.2016


Ответы (3)


В chrome dev Tools откройте настройки (F1 в окнах).

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

Источники:

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

проверены

person WhiteKnight    schedule 06.06.2017
comment
Как ОП, я видел это сообщение, потому что проверял сгенерированный JS... после проверки этих параметров вы должны выбрать связанный файл на панели «Файловая система» и отладить его. - person MrAn3; 29.08.2018

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

image

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

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

person unional    schedule 11.01.2017

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

person Jimi    schedule 31.05.2016