web-dev-qa-db-ja.com

Visual Studio Codeが機能しない状態でデバッグする

Visual Studio CodeでAngular2アプリケーションをデバッグできるようにしたいと思います。

私の環境は次のとおりです。

  • [〜＃〜] os [〜＃〜]：Ubuntu 16.10 x64
  • ブラウザ： Chromium 53.0.2785.143
  • ノード：6.8.0
  • Angular-cli：1.0.0-beta.19-3

Angular-cliを使用して新しいプロジェクトを作成します。

ng new test-VSC-debug
cd test-VSC-debug

次に、VSCを開いてプロジェクトを読み込みます：File/open folder

debugロゴをクリックし、chromeを選択してconfigure launch.jsonをクリックします。次のファイルを生成します。

{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Launch Chrome against localhost, with sourcemaps",
            "type": "chrome",
            "request": "launch",
            "url": "http://localhost:8080",
            "sourceMaps": true,
            "webRoot": "${workspaceRoot}"
        },
        {
            "name": "Attach to Chrome, with sourcemaps",
            "type": "chrome",
            "request": "attach",
            "port": 9222,
            "sourceMaps": true,
            "webRoot": "${workspaceRoot}"
        }
    ]
}

次に、次のコマンドを実行して、angular2プロジェクトを開始します。

ng serve

起動したら、VSCで「localhostに対してChromeをソースマップで起動」を選択します。

次に、次のエラーが表示されます：
"chromeが見つかりません：インストールするか、起動構成のruntimeExecutableフィールドを設定してください。"

だから私は設定しました：
"runtimeExecutable"： "クロムブラウザ"
（ not と同様、chromeがありますが、Ubuntuにはクロムがあります）。

アプリを起動するためのAngular-cliのデフォルトポートは4200です。URLを「 http：// localhost：808 」から「 http：// localhost：42 」に変更します。

ブラウザはアプリを開いていますが、VSCには次のエラーがあります：「ランタイムプロセスに接続できません。10000ミリ秒後にタイムアウトします 理由：ターゲットに接続できません：ECONREFUSED 127.0.0.1:9222に接続してください。）.

Stackoverflow/github問題で見つかった他の回答から、それを行う前にすべてのchromeインスタンスを殺さなければならないかもしれないと読んだので、クロムを閉じてkillall chromium-browserを実行します。

デバッグを再度実行しようとしました：以前と同じエラー（接続できません）。

私はまた、次の引数が役立つかもしれないことを見てきました：

"runtimeArgs": [
  "--remote-debugging-port=9222",
  "--user-data-dir"
]

しかし、それは何も変えません。

TypeScript開発者（大部分はアンギュラー2）にVSCを使用することにしましたが、このデバッグ方法は非常に強力なようです。私はそれを使用しないことはあまりにも悪いだろうと感じています:)。

助けてくれてありがとう！

PS：関連するstackoverflowの質問とgithubの問題：
----（Visual Studio CodeでAngular2 TypeScriptをデバッグおよび実行しますか？
- https://github.com/angular/angular-cli/issues/245
- https://github.com/angular/angular-cli/issues/1936
- https://github.com/angular/angular-cli/issues/1281

編集1：!!!部分的な改善!!! Visual Studio Codeコンソール内にデバッグ情報を表示する方法を見つけました！ブレークポイントが機能しないので、まだ完全ではありませんが、ここにあります。これまでのところ、 http：// localhost：9222 を開いた場合、何も表示できませんでした。 （「localhostは接続を許可しません」）。

しかし、私がそのようなクロムを起動した場合：

chromium-browser --remote-debugging-port=9222 --user-data-dir=remote-profile

重要なことは、その引数に注意することです：--user-data-dir=remote-profile。 --user-data-dirを渡すだけで、誰も接続されていない新しいウィンドウが起動します。しかし、それだけでは十分ではありません。 remote-profile を値として渡す必要があります。

  • 新しいブラウザウィンドウが開きます
  • http：// localhost：42 を開き、 http：// localhost：9222 にアクセスすることもできます！
  • 「ソースマップでchromeに接続」オプションでVSCを接続できます！ enter image description here （ご覧のとおり、「Angular 2は開発モードで実行されています。enableProdMode（）を呼び出してプロダクションモードを有効にします。」がコンソールに表示され、フッターの背景がオレンジ色になります）

これまでのところ、それが一部の人々に役立つことを願っています。しかし今の問題は、ブレークポイントが機能していないことです。 enter image description here

掘り続けて、理由が見つかったら別の編集を行います。

angulargoogle-chrome-devtoolsvisual-studio-codeangular-cli
15
maxime1992

OSXでこの問題を解決できました。それがそのような苦痛である理由は、問題を引き起こしている複数のことがあるからです。

  1. --user-data-dir=remote-profileで最初にヒットした場合：既にChromeを実行している場合（たとえば、既にタブを開いている-誰が開いていないのか？）、別のuserDataDirは、Chrome=独立したインスタンスを起動します。
    ただし、これを行う正しい方法は、"userDataDir": "${workspaceRoot}/.vscode/chrome",をlaunch.json構成に追加することです（以下を参照）。これはパスにする必要があります。 「remote-profile」が使用されている場合、「remote-profile」という名前の相対ディレクトリを見つけようとします。
  2. Launch.json設定でsourceMapPathOverridesを設定する必要があります。その値はOSによって異なります。
    OSX："sourceMapPathOverrides": { "webpack:///./*": "${webRoot}/*" }
    Windows："sourceMapPathOverrides": { "webpack:///C:*":"C:/*" }
    Linux："sourceMapPathOverrides": { "webpack:///*": "/*" }
    （注：WindowsまたはLinuxバージョンはテストしていません）

OSXでの作業launch.jsonは次のとおりです。

{
    // Use IntelliSense to learn about possible Node.js debug attributes.
    // Hover to view descriptions of existing attributes.
    // For more information, visit: https://go.Microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",

    "configurations": [
        {
            "name": "Launch Chrome against localhost, with sourcemaps",
            "type": "chrome",
            "request": "launch",
            "url": "http://localhost:4200",
            // This forces chrome to run a brand new instance, allowing existing
            // chrome windows to stay open.
            "userDataDir": "${workspaceRoot}/.vscode/chrome",
            "sourceMaps": true,
            "webRoot": "${workspaceRoot}",
            //"diagnosticLogging": true,
            "sourceMapPathOverrides": { "webpack:///./*": "${webRoot}/*" }
        },
        {
            "name": "Attach to Chrome, with sourcemaps",
            "type": "chrome",
            "request": "attach",
            "url": "http://localhost:4200",
            "port": 9222,
            "sourceMaps": true,
            "webRoot": "${workspaceRoot}",
            "diagnosticLogging": true,
            "sourceMapPathOverrides": { "webpack:///./*": "${webRoot}/*" }
        }
    ]
}

これを機能させるには、ターミナルでng serveを実行し、Visual Studio Code内でF5キーを押します。


使用しているバージョンは次のとおりです。

  • angle-cli：1.0.0-beta.24
  • ノード：7.3.0
  • クローム：55.0.2883.95
  • Visual Studioコード：1.8.1
  • VSCode拡張機能「Debugger for Chrome」msjsdiag.debugger-for-chrome：2.4.2
12
Aaron F.

ようやく完全に機能するようになりました!!!

興味のある方へ：

（Linuxではクロムブラウザーを使用しますが、「クロム」に簡単に置き換えることができます）。

最初に、ここにlaunch.jsonconfigがあります：

{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Attach to Chrome, with sourcemaps",
            "type": "chrome",
            "request": "attach",
            "port": 9222,
            "sourceMaps": true,
            "webRoot": "${workspaceRoot}/src",
            "url": "http://localhost:4200/",
            "sourceMapPathOverrides": {
              "webpack:///*": "/*"
            }
        }
    ]
}

新しいブラウザーウィンドウを起動する必要があるため、「request」：「launch」でパーツを削除することにしました。

次に、そのようなブラウザーを起動します。
chromium-browser --remote-debugging-port=9222 --user-data-dir=remote-profile

新しいウィンドウで、 http：// localhost：42 にアクセスします。

次に、VSCからデバッグを実行します。

すべてがうまく動作し、ブレークポイントを使用できるはずです:)

動作中のGIFはこちらでご覧いただけます。 http://hpics.li/0156b8

13
maxime1992

Aaron Fと同様に、次の設定を使用してAngular 2+ Windows環境で開発します

{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Launch Chrome against localhost, with sourcemaps",
            "type": "chrome",
            "request": "launch",
            "url": "http://localhost:4200",
            "sourceMaps": true,
            "webRoot": "${workspaceRoot}",
            "trace": true,
            "smartStep": true,
            "runtimeArgs": [
              "--disable-session-crashed-bubble",
              "--disable-infobars"
            ],
            "userDataDir": "${workspaceRoot}/.vscode/chrome",
            "sourceMapPathOverrides": {
                "webpack:///./*": "${webRoot}/*"
            }
        }
    ]
}
2
Zealitude

私はAngular CLI 1.7.3およびMac OSXでのAngular：5.2.9を使用しています。これは私のために機能している設定です：

 {
 "version"： "0.2.0"、
 "configurations"：
 {
 "type"： "chrome"、 
 "request"： "launch"、
 "name"： "Chromeでクライアントを起動"、
 "sourceMaps"：true、
 "url"： " http：// localhost：4200 "、
" webRoot "：" $ {workspaceRoot} "、
" userDataDir "：" $ {workspaceRoot} /。vscode/chrome "、
 "sourceMapPathOverrides"：{
 "webpack：/./*"： "$ {webRoot}/*"、
 "webpack：/ src/*"： "$ {webRoot}/src /*",
 "webpack：/ *"： "*"、
 "webpack：/./〜/ *"： "$ {webRoot}/node_modules /*",
} 
} 
 
}
2
Awsed

Windows-vscodeを使用しても同じ問題が発生し、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",
        "webRoot": "${workspaceFolder}"
        }
        ]
}

その後、chrome here からデバッグ拡張機能をインストールし、エラーを解決しました。

この拡張機能は次から直接インストールできます。

vscode-->Extensions-->search and select "Debugger From Chrome"-->click on install

Vscodeを再起動する必要がある場合があります。

1
dd619

次の設定は、VSCode v1.23、Angular 6、およびChrome 66。

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "chrome",
      "request": "launch",
      "name": "Launch Chrome",
      "url": "http://localhost:4200",
      "smartStep": true,
      "sourceMaps": true,
      "webRoot": "${workspaceFolder}",
      "sourceMapPathOverrides": {
        "webpack:///./*": "${webRoot}/*",
        "webpack:///src/*": "${webRoot}/src/*",
        "webpack:///*": "*",
        "webpack:///./~/*": "${webRoot}/node_modules/*"
      }
    }
  ]
}
1
Jose Orihuela

Chrome拡張機能のデバッガーをインストールするだけです。

0
Itumeleng Tlali

Aaron Fが提供するlaunch.jsonで問題が発生しました。

デバッガーのコマンドラインの「.scripts」は、次のようなURLを提供します。

webpack-internal:///./src/app/app.component.ts (/home/user/my-dream-app/src/app/app.component.ts)
- webpack:/src/app/app.component.ts (/home/user/my-dream-app/src/app/webpack:/src/app/app.component.ts)

そのため、VS Codeはファイル「/home/user/my-dream-app/src/app/webpack:/src/app/app.component.ts」を使用しようとしています（webpack：中央に注意してください）。

My Chrome= URLを1つのスラッシュで「webpack：/」として指定するため、ソースマップは機能しません。

このlaunch.jsonで動作するようにしました：

{
    "version": "0.2.0",
    "configurations": [
        {
          "type": "chrome",
          "request": "launch",
          "name": "Launch Chrome with ng serve",
          "url": "http://localhost:4200/",
          "webRoot": "${workspaceRoot}",
          "sourceMapPathOverrides": { "webpack:/*": "${webRoot}/*" }
        }
      ]
}

そして正しいマッピングを得た

webpack-internal:///./src/app/app.component.ts (/home/user/my-dream-app/src/app/app.component.ts)
- webpack:/src/app/app.component.ts (/home/user/my-dream-app/src/app/app.component.ts)
  • Ubuntu：16.04
  • クローム：64.0.3282.186
  • VSCode：1.20.1
  • 角度CLI：1.7.2
  • ノード：7.10.1
0
nagos