Как отлаживать Typescript в Visual Studio 2015 asp.net 5?

Ответ 1

Отладка TypeScript с Visual Studio работает с правильными настройками.

• Сначала вы убедитесь, что создаете исходные карты при компиляции TypeScript в JavaScript. Поэтому у каждого файла xxx.js должен быть файл xxx.js.map.

  Получение исходных карт при запуске компилятора TypeScript вне Visual Studio не вызывает никаких трудностей, в командной строке tsc:

  --sourcemap %1.ts
  

  ваш gulp script обычно создает исходные файлы по умолчанию.

• Настроить веб-приложение в Visual Studio.

  Установите в качестве браузера запуска Internet Explorer. Я получил его работу только с IE и не думаю, что любой другой браузер будет работать. (edit: Где-то я читал, что есть мост отладки Webkit, поэтому отладка Chrome должна быть возможной, но я не помню источник.)

  В свойствах проекта перейдите на вкладку "Веб" и настройте раздел "Отладчики" внизу: Отключить все отладчики! Это счетчик интуитивно, и вы можете увидеть это сообщение об ошибке:

  Вы попытались запустить отладчик, но на основе текущих настроек отладки на странице свойств Web процесс отладки не выполняется.

  Это происходит, когда выбрана опция "Не открывать страницу. Подождите, чтобы запрос из другого процесса", и отладка ASP.NET отключена. Проверьте настройки на странице свойств Web и повторите попытку. Как говорится в сообщении об ошибке, действие "Начало" в верхней части веб-свойств должно быть другим вариантом, например " Текущая страница".

  Установите точки останова в коде .ts внутри Visual Studio сейчас или позже.

  Нажмите F5

Хотя вы можете использовать редактор Visual Studio для отладки и редактирования файлов .ts, "Редактировать и продолжить" не будет работать, в настоящее время нет браузера, который может перезагрузить файлы .js и .js.map и продолжить. (Исправьте меня, если я ошибаюсь, и я буду счастлив.)

Ответ 2

Лучший способ обработать файлы карт, которые я нашел, - это включить источник внутри сгенерированных файлов .js. Это, очевидно, решение только для среды dev.

my tsconfig.json ниже:

{
    "compilerOptions": {
        "noImplicitAny": false,
        "noEmitOnError": true,
        "removeComments": false,
        "target": "es5",
        "module": "system",
        "moduleResolution": "node",
        "outDir": "./wwwroot/scripts",
        "experimentalDecorators": true,
        "emitDecoratorMetadata": true,
        "inlineSourceMap": true,
        "inlineSources": true
    },
    "exclude": [
        "node_modules",
        "wwwroot"
    ]
}

Настройки, которые вы выполняете, - это inlineSourceMap и inlineSources.

Это также помогает с проблемами, вызванными перемещением сгенерированного .js в разные пути и не беспокоиться о том, куда идут файлы карты.

Ответ 3

В ASP.NET 5 RC1 вы можете поручить компилятору TypeScript генерировать файлы .map, добавив в корневой каталог проекта файл tsconfig.json. Visual Studio даже имеет шаблон для этого, называемый "TypeScript файл конфигурации JSON". По умолчанию он имеет следующее содержимое:

{
  "compilerOptions": {
    "noImplicitAny": false,
    "noEmitOnError": true,
    "removeComments": false,
    "sourceMap": true,
    "target": "es5"
  },
  "exclude": [
    "node_modules",
    "wwwroot"
  ]
}

Параметр "sourceMap" инструктирует компилятор TypeScript генерировать файлы карт, которые необходимы для отладки.

В моем случае я удалил значение "wwwroot" из раздела "exclude", потому что мои исходные файлы Angular TypeScript находятся в каталоге wwwroot\App.

Подробное описание настроек tsconfig.json можно найти здесь: https://github.com/Microsoft/typescript/wiki/tsconfig.json

Ответ 4

Самый простой способ найти все файлы typescript в папке wwwroot/app и оставить созданные js файлы визуальной студией так, как они есть. Используя gulp, просто введите их в html файл. В окончательно выпущенном Visual Studio 2015 он отлично работает и с задачей gulp я также могу легко настроить вложенные js для производства.

Ответ 5

Когда вы используете gulp, вы можете написать исходные карты с относительным каталогом. Таким образом, ваши TS файлы правильно разрешены Visual Studio. Я использую gulp - typescript и gulp -sourcemaps для моей компиляции TypeScript.

Ниже части компиляции моего файла gulpfile.js(не забудьте отключить компиляцию TypeScript в файле проекта)

var tsProject = ts.createProject({
    declarationFiles: false,
    noExternalResolve: false,
    target: 'ES5',
    sortOutput: true,
    noEmitOnError: false,
    sourceMap:true
});

gulp.task('script', function () {
    var tsResult = gulp.src('App/Ts/**/*.ts')
            .pipe(sourcemaps.init())
            .pipe(ts(tsProject));
    return tsResult.js.pipe(concat('App.js'))
            .pipe(sourcemaps.write('.', {includeContent:false, sourceRoot: '../../App/Ts/'}))
            .pipe(gulp.dest('wwwroot/js'));
});

(я модифицировал свой gulpfile для удобочитаемости, поэтому проверяйте любые ошибки компиляции/кодирования)