Отладка TypeScript кода с помощью Visual Studio

Ответ 1

Обновление с VS 2017:

VS2017 теперь работает для отладки typescript непосредственно в Visual Studio, так же, как если вы отлаживаете С#. См. Мой ответ ниже.

Оригинальный ответ для предыдущих версий VS:

Возможно, вы не сможете отлаживать VS, но вы можете в некоторых браузерах. Аарон Пауэлл в блоге о получении контрольных точек, работающих в Chrome Canary только сегодня: http://www.aaron-powell.com/web/typescript-source-maps.

Подводя итоги (очень кратко), что говорит Аарон, вы используете переключатель -sourcemap в компиляторе для создания файла *.js.map в том же каталоге, что и ваш источник. В браузерах, поддерживающих исходные карты (Chrome Canary и, возможно, последние версии Firefox, поскольку они являются идеей Mozilla), вы можете затем отладить ваш .ts, так же, как обычные нормальные файлы .js.

Блог заканчивается: "Надеюсь, что команда Visual Studio или IE (или оба) также заберут Source Maps и добавят поддержку для них". - что предполагает, что этого еще не произошло.

Update:

С выпуском typescript 0.8.1 отладка исходной карты теперь также доступна в Visual Studio:

http://blogs.msdn.com/b/typescript/archive/2012/11/15/announcing-typescript-0-8-1.aspx

Из объявления:

Отладка typescript теперь поддерживает отладку исходного уровня! Формат исходной карты набирает популярность как способ отладки языков, которые переводить на JavaScript и поддерживаются различными браузерами и инструменты. С версией 0.8.1 компилятор typescript официально поддерживает исходные карты. Кроме того, новая версия typescript для Visual Studio 2012 поддерживает отладку с использованием формата исходной карты.      Из командной строки мы теперь полностью поддерживаем использование флага -sourcemap, который выводит файл исходной карты, соответствующий выходу JavaScript. Этот файл позволит напрямую отладить исходный typescript источник в браузерах с поддержкой исходных карт и Visual Студия.      Чтобы включить отладку в Visual Studio, выберите "Отладка из выпадающего списка после создания приложения HTML с проектом typescript.

Обновление

WebStorm также добавил поддержку отладки через SourceMaps: http://blog.jetbrains.com/webide/2013/03/webstorm-6-0-released-adds-typescript-debugging-with-source-maps-fresh-ui-and-much-more/

Во-первых, WebStorm позволяет использовать более интеллектуальную и более оптимизированную сеть разработка с использованием современных языков, таких как TypeScript, CoffeeScript и Dart. В дополнение к предоставлению первоклассного редактора кода для этих Языки, WebStorm 6 предлагает:

Автоматическая компиляция/трансляция этих языков более высокого уровня в те, которые распознаются браузерами на всех поддерживаемых платформах. Полнофункциональная отладка TypeScript, Dart или CoffeeScript с исходные карты.

Ответ 2

В VS2013 Typescript приложении мне нечего было менять в web.config. Я поставил точку останова в файле ts и отлаживался в IE, а престо, точка останова остановилась внутри TypeScript.

Ответ 3

Отладка typescript с Visual Studio работает с правильными настройками. (В предыдущих версиях VS я иногда сталкиваюсь с проблемами, ниже показано, как это работает с VS 2015 CTP 6)

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

  Получение исходных карт с помощью компилятора typescript вне Visual Studio не вызывает никаких трудностей, в командной строке tsc добавить

  --sourcemap %1.ts
  

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

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

  Установите в качестве браузера запуска Internet Explorer. Я получил его работу только с IE и не думаю, что любой другой браузер будет работать.

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

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

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

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

  Нажмите F5

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

Ответ 4

Теперь это исправлено в VS 2017, поэтому вы можете отлаживать непосредственно в Visual Studio и typescript.

Просто установите точку останова в файле *.ts, и она будет удалена.

И он будет отлаживаться в VS, а не в IE, как если бы вы отлаживали С#.

Ответ 5

TypeScript отладка не работала для меня вообще с VS2013 Update 3 на любой из моих машин. После многих разочарований я решил попробовать обновить до версии VS2013 Update 4 CTP. Наконец, точки останова попадают в VS!

Ответ 6

короткий ответ: перезапустите Visual Studio

фон: У меня было 2 экземпляра visual studio 2015 с двумя разными проектами с TypeScript. Первый запущенный экземпляр не отлаживался правильно, второй -. Все настройки проекта были одинаковыми. Я, наконец, перезапустил первый экземпляр, а затем отладил TypeScript (наконец).