web-dev-qa-db-ja.com

Visual Studio CodeでAngular2 TypeScriptをデバッグして実行しますか？

Visual Studio CodeでAngular2 TypeScriptをデバッグして実行しますか？

VSコードでAngular2 TypeScriptアプリケーションをデバッグしようとしています https://angular.io/guide/quickstart

誰でもVSコードからデバッグして実行する手順を共有できますか？

angularvisual-studio-code
77
Sanket

多くの研究の後、私はこれらのステップを見つけました-

開始する前に、VSコードの最新バージョンがあることを確認してください。最新バージョンを確認できます– [ヘルプ]> [更新の確認]または[バージョン情報]。

  1. 「Debugger for Chrome」という拡張機能をインストールします。インストールが完了したら、VSコードを再起動します。

  2. デバッグウィンドウに移動し、Chromeを使用してlaunch.jsonを開きます。

  3. Launch.json構成セクションで、以下の構成を使用します

    {
    "name": "Launch localhost with sourcemaps",
    "type": "chrome",
    "request": "launch",
    "url": "http://localhost:3000/Welcome",
    "sourceMaps": true,
    "webRoot": "${workspaceRoot}"
}

  4. Tsconfig.jsonで、「sourceMap」があることを確認します：true

これでデバッグ環境の設定が完了しました。ここで、デバッグを開始する前に、既存のChrome.exeインスタンスがすべて閉じられていることを確認してください。タスクマネージャーから確認OR DOSコマンド「killall chrome」を使用

  1. Npm startコマンドとChromeをデフォルトのブラウザーとして使用して、プロジェクトを実行します。

  2. アプリケーションが正常に実行されると、ポート番号を受け取ります。 chromeブラウザからURLをコピーし、上記のurlセクションに貼り付けます。 （注：アプリケーションでルーティングを使用している場合、urlは上記のようになります。そうでない場合、index.htmlなどで終了します）

  3. ここで、TypeScriptファイルの任意の場所にブレークポイントを配置します。

  4. 再度、VSコードのデバッグウィンドウに移動し、[実行]をクリックします。デバッガに接続されているタブ/インスタンスは次のようになります。

Chrome Debugging

121
Sanket

UserDataDirを指定します-これにより、既に実行している他のChromeインスタンスとの衝突が回避されます。このため、Chromeは指定したポートでのリッスンを停止するだけです。以下は私が使用するものであり、素晴らしいです！

{
    "name": "Launch",
    "type": "chrome",
    "request": "launch",
    "url": "http://localhost:3000/#/about",
    "port": 9223,
    "sourceMaps": true,
    "diagnosticLogging": true,
    "webRoot": "${workspaceRoot}",
    "userDataDir": "${workspaceRoot}/out/chrome"
}

@reecebradleyに感謝します- GitHub：ターゲットに接続できません：接続ECONNREFUSED

15
HydTechie

私は同様の問題を抱えていましたが、私のプロジェクトには上記のソリューションが失敗する原因となるwebpackも含まれていました。インターネットを横断した後、githubのスレッドで解決策を見つけました。

https://github.com/AngularClass/angular2-webpack-starter/issues/144#issuecomment-218721972

とにかく、これが行われたものです。

注：-開始する前に、Visual Studioコードの最新バージョンがあり、「 Debugger Chromeの場合 'VS Code内。

まず、「./ config/webpack.dev.js」で

  • 使用=>devtool： 'source-map'
  • 代わりに=>devtool： 'cheap-module-source-map'

次に、write-file-webpack-pluginをインストールして使用します。

  • npm install --save write-file-webpack-plugin

次を追加して、プラグインを「./config/webpack.dev.js」に追加します。

  • const WriteFilePlugin = require（ 'write-file-webpack-plugin'）;

上部のWebpackプラグインの下。追加を続けます：

  • 新しいWriteFilePlugin（）

新しい新しいDefinePlugin（）の後のプラグインのリスト、つまり

plugins:[
    new DefinePlugin({....}),
    new WriteFilePlugin(),
    ....
]

これにより、ソースマップがディスクに書き込まれます

最後に、launch.jsonを以下に示します。

{
    "version": "0.2.0",
    "configurations": [{
        "name": "Launch Chrome against localhost, with sourcemaps",
        "type": "chrome",
        "request": "launch",
        "url": "http://localhost:3000/",
        "runtimeArgs": [
           "--user-data-dir",
           "--remote-debugging-port=9222"
        ],
        "sourceMaps": true,
        "diagnosticLogging": true,
        "webRoot": "${workspaceRoot}",
        "userDataDir": "${workspaceRoot}/.vscode/chrome"
    },
    {
        "name": "Attach to Chrome, with sourcemaps",
        "type": "chrome",
        "request": "attach",
        "url": "http://localhost:3000/",
        "port": 9222,
        "sourceMaps": true,
        "diagnosticLogging": true,
        "webRoot": "${workspaceRoot}"
    }]
}

webrootに「/ dist /」がないことに注意してください。この構成では、ソースマップは./dist/にありますが、。/ src /を指します。 vscodeは、ワークスペースの絶対ルートを先頭に追加し、ファイルを正しく解決します。

5
malmike21

VSCodeでAngularをデバッグする方法に関する公式のVisual Studioコードドキュメントがあります https://code.visualstudio.com/docs/nodejs/angular-tutorial#_configure-the-chrome-debugger

クライアント側のAngularコードをデバッグするには、Debugger for Chrome拡張機能をインストールする必要があります。拡張機能ビューを開き（Ctrl + Shift + X）、検索ボックスに「chrome」と入力します。 Chromeを参照するいくつかの拡張機能が表示されます。 Debugger for Chromeの[インストール]ボタンを押します。ボタンは[インストール中]に変わり、インストールが完了すると[再読み込み]に変わります。リロードを押してVS Codeを再起動し、拡張機能を有効にします。

最初にデバッガを構成する必要があります。これを行うには、[デバッグ]ビュー（Ctrl + Shift + D）に移動し、ギアボタンをクリックして、launch.jsonデバッガー構成ファイルを作成します。 [環境の選択]ドロップダウンからChromeを選択します。これにより、プロジェクトの新しい.vscodeフォルダーにlaunch.jsonファイルが作成されます。このファイルには、Webサイトを起動するか、実行中のインスタンスにアタッチするための構成が含まれます。この例では、ポートを8080から4200に変更する必要があります。

5
Teddy

私はこれに問題がありましたが、@ Sanketsの回答はこの問題を解決してくれました https://github.com/angular/angular-cli/issues/245 。

特にlaunch.jsonに以下を追加します

"sourceMapPathOverrides": {
    "webpack:///c:/foo/bar/angular-project/*": "${workspaceRoot}/*"
}
3
rubie

角度付きシードの場合：

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Debug with chrome",
      "type": "chrome",
      "request": "launch",
      "url": "http://localhost:5555",
      "sourceMaps": true,
      "webRoot": "${workspaceRoot}/src/client",
      "userDataDir": "${workspaceRoot}/out/chrome",
      "sourceMapPathOverrides": {
        "app/*": "${webRoot}/app/*"
      }
    }
  ]
}
2
Maxime Duc

launch.jsonへのこれらのmodはMacOSで機能し、デバッグセッションごとにChromeの新しいインスタンスでデバッガーとブレークポイントを動作させることができました...

// This forces chrome to run a brand new instance, allowing existing
// chrome windows to stay open.
"userDataDir": "${workspaceRoot}/.vscode/chrome",
"webRoot": "${workspaceRoot}",
"sourceMaps": true,
"sourceMapPathOverrides": { "webpack:///./*": "${webRoot}/*" }
0
Simeon

これは試されてテストされています-

ステップ1：chromeデバッガーのインストール：VSコード内でコマンドパレットを開き（Ctrl + Shift + P）、Extensionsと入力します。拡張機能のインストールコマンド。拡張機能リストが表示されたら、「chrome」と入力してリストをフィルタリングし、Chrome拡張機能用のデバッガーをインストールします。次に、起動構成ファイルを作成します。

[ステップ1の詳細]

ステップ2：launch.jsonファイルの作成と更新：「request」：「launch」を使用した2つのサンプルlaunch.json構成。ローカルファイルまたはURLに対してChromeを起動するには、ファイルまたはURLを指定する必要があります。 URLを使用する場合は、webRootをファイルの提供元のディレクトリに設定します。これは、絶対パスまたは$ {workspaceRoot}（コードで開いているフォルダー）を使用したパスのいずれかです。 webRootは、URL（ " http：//localhost/app.js "など）をディスク上のファイル（ "/Users/me/project/app.js"など）に解決するために使用されます。正しく設定されるように注意してください。 launch.jsonファイルの内容を次のように更新します

{
    "version": "0.1.0",
    "configurations": [
        {
            "name": "Launch localhost",
            "type": "chrome",
            "request": "launch",
            "url": "http://localhost/some_name",
            "webRoot": "${workspaceRoot}/wwwroot"
        },
        {
            "name": "Launch index.html (disable sourcemaps)",
            "type": "chrome",
            "request": "launch",
            "sourceMaps": false,
            "file": "${workspaceRoot}/index.html"
        },
    ]
}

[ステップ2の詳細]

0
enthusiast

CORSを使用する必要があるので、Webセキュリティを無効にしてchromeを開きます。次に、デバッガーをChromeに接続して、Angularアプリケーションのデバッグを行います。

Webセキュリティを無効にしてchromeを起動するCMD行：

cd "C:\Program Files (x86)\Google\Chrome\Application\"
chrome.exe --user-data-dir="C:/Chrome dev session" --disable-web-security --remote-debugging-port=9222

デバッガーをアタッチするためのlaunch.jsonファイル：

{
    // Use IntelliSense to learn about possible attributes.
    // Hover to view descriptions of existing attributes.
    // For more information, visit: https://go.Microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            "type": "chrome",
            "request": "attach",
            "name": "Attach to Chrome",
            "port": 9222,
            "webRoot": "${workspaceFolder}"
        },
    ]
}
0
Karthik

@Sanketの答えは正しかったが、それに関していくつかの問題があった。最初のLaunch.jsonはプロジェクトの「.vscode」ディレクトリにあります。2番目のポート番号は、アプリの起動に使用するデフォルトのサーバーポートと同じである必要があります。プロジェクトの起動にcmdからng serveを使用し、デフォルトのポート番号は42だったため、launch.jsonファイルを次のように変更しました

{ // Use IntelliSense to learn about possible attributes. // Hover to view descriptions of existing attributes. // For more information, visit: https://go.Microsoft.com/fwlink/?linkid=830387 "version": "0.2.0", "configurations": [ { "type": "chrome", "request": "launch", "name": "Launch Chrome against localhost", "url": "http://localhost:4200", "sourceMaps": true, "webRoot": "${workspaceFolder}" } ] }

0
Hamed Mahdizadeh