web-dev-qa-db-ja.com

Visual Studio 2015 asp.net 5でTypeScriptをデバッグする方法

Visual Studio 2015 CTP6 asp.net 5アプリケーションからTypeScriptファイルをデバッグする方法はありますか？そうでない場合は、ソースマップファイルを構成する方法があるので、ブラウザでデバッグして、サーバー上の.tsファイルへの変更を自動的に保存できますか？ .tsファイルはgulpによってコンパイルされるため、これは難しいかもしれませんが、誰かがそのための良い解決策を見つけたのでしょうか？

debuggingtypescriptasp.net-corevisual-studio-2015
31
Marcin

Visual StudioによるTypeScriptのデバッグは、適切な設定で動作します。

  1. まず、TypeScriptをJavaScriptにコンパイルするときにソースマップを作成することを確認してください。したがって、すべてのxxx.js.mapの近くにxxx.jsファイルが必要です。

    Visual Studioの外部でTypeScriptコンパイラーを実行してソースマップを取得しても、tscコマンドラインで次のように追加すると、問題は生じません。

    --sourcemap %1.ts

    通常、gulpスクリプトはデフォルトでソースマップを作成します。

  2. Visual StudioでWebアプリケーションを構成する。

    ブラウザの起動としてInternet Explorerを設定します。 IEでのみ動作し、他のブラウザは動作しないと思います。（edit：どこかでWebkitデバッグブリッジがあることを読んでください。したがって、Chromeデバッグが可能になりますが、ソースは覚えていません。）

    プロジェクトのプロパティで[Web]タブに移動し、下部の[デバッガー]セクションを構成します。すべてのデバッガーを無効にする！これは直観的ではなく、次のエラーメッセージが表示される場合があります。

    デバッガを起動しようとしましたが、Webプロパティページの現在のデバッグ設定に基づいて、デバッグするプロセスはありません。

    これは、[ページを開かないでください。別のプロセスからの要求を待つ]オプションが選択され、ASP.NETデバッグが無効になっている場合に発生します。ウェブプロパティページで設定を確認して、もう一度お試しください。エラーメッセージに示されているように、Webプロパティの上部にある開始アクションは、「Current page」のような別のオプションである必要があります。

    Visual Studio内の.tsコードでbreakpointsを今または後で設定します。

    ヒットF5

Visual Studio Editorを使用して.tsファイルをデバッグおよび編集できますが、「編集および続行」は機能しませんが、現在.jsおよび.js.mapファイルをリロードして続行できるブラウザーはありません。 （私が間違っていれば幸せになります。誰でも私を正してください。）

19
citykid

私が見つけたマップファイルを処理する最良の方法は、生成された.jsファイル自体。これは明らかに開発環境のみのソリューションです。

僕の 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別のパスに移動し、マップファイルの場所を気にする必要はありません。

9
user281921

ASP.NET 5 RC1では、tsconfig.jsonというファイルをプロジェクトのルートディレクトリに追加することにより、TypeScriptコンパイラーに.mapファイルを生成するよう指示できます。 Visual Studioには、このための「TypeScript JSON構成ファイル」というテンプレートもあります。デフォルトでは、次の内容が含まれています。

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

「sourceMap」設定は、デバッグに必要なマップファイルを生成するようにTypeScriptコンパイラーに指示します。

私の場合、Angular TypeScriptソースファイルはwwwroot\Appの下にあるため、 "exclude"セクションから "wwwroot"値を削除しました。

Tsconfig.jsonの設定の詳細な説明は、ここにあります： https://github.com/Microsoft/TypeScript/wiki/tsconfig.json

4
mobileiq

私が見つけた最も簡単な方法は、すべてのTypeScriptファイルをwwwroot/appフォルダーを作成し、Visual Studioで生成されたjsファイルをそのままにして、デフォルトの場所に移動します。 gulpを使用して、単純にHTMLファイルに挿入します。 Visual Studio 2015では、非常にうまく機能し、gulpタスクを使用して、実稼働用にjsをバンドルするタスクを簡単に構成することもできます。

2
Marcin

Gulpを使用している場合、相対ディレクトリを使用してソースマップを作成できます。これにより、TSファイルはVisual Studioによって正しく解決されます。 TypeScriptのコンパイルには、gulp-TypeScriptとgulp-sourcemapsを使用します。

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を変更したので、コンパイル/コーディングエラーがないか確認してください）

2
markwilde