使用Visual Studio代碼進行調試不起作用

Question

我希望能夠使用Visual Studio代碼調試Angular2應用程序。

這裏是我的環境：

• OS：Ubuntu的16.10 64
• 瀏覽器：鉻 53.0.2785.143
• 節點：6.8.0
• Angular- cli：1.0.0-beta.19-3

創建具有角CLI一個新項目：

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

然後我打開VSC和加載的項目：File/open folder

我點擊debug標誌和configure launch.json選擇chrome我。它生成以下文件：

{ 
    "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我選擇：「將Chrome瀏覽器對本地主機，與sourcemaps」。

然後，我得到以下錯誤：
「無法找到chrome：安裝它或在啓動配置中設置runtimeExecutable字段。」

所以我設置：
「runtimeExecutable」： 「鉻瀏覽器」
（像我一樣不有鉻，但鉻在我的Ubuntu）。

用於啓動應用程序的Angular-cli默認端口是4200. 將url從「http://localhost:8080」更改爲「http://localhost:4200」。

現在瀏覽器在打開應用程序，但VSC有以下錯誤： 「無法連接到運行過程中，超時後10000毫秒 - （原因：無法連接到目標：連接ECONREFUSED 127.0.0.1:9222」

。

從這計算器/ github上發現問題，其他的答案，我讀過，我可能會嘗試這樣做，之前殺死所有Chrome實例，所以我只是近鉻和運行killall chromium-browser。

我嘗試運行再次調試：與以前相同的錯誤（無法連接）

我也看到以下參數可能有所幫助：

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

但它不會改變任何東西。

我決定將VSC用於我的打字稿開發人員（主要是angular2），這種調試方式似乎非常強大。我有這樣的感覺，它不會使用它:)。

感謝您的幫助！

PS：一些相關的計算器的問題和github上的問題：
- Debug & Run Angular2 Typescript with Visual Studio Code?
- https://github.com/angular/angular-cli/issues/2453
- https://github.com/angular/angular-cli/issues/1936
- https://github.com/angular/angular-cli/issues/1281

編輯1：!!!部分改善！ 我發現了一種在Visual Studio代碼控制檯中擁有調試信息的方法！ 所以它不完美，但斷點不起作用，但這是事情。 到目前爲止，如果我打開http://localhost:9222，我無法看到任何東西。 （「本地主機不授權連接」）。

，但如果我啓動鉻這樣的：

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

重要的是要注意這樣的說法：--user-data-dir=remote-profile。如果你只是傳遞--user-data-dir，它會啓動一個沒有連接的新窗口。但這還不夠。您需要將遠程配置文件作爲值。

• 它會打開一個新的瀏覽器窗口
• 我打開http://localhost:4200，我也可以達到http://localhost:9222！
• 我可以將VSC連接到「附加到源圖的鉻」選項！ （正如你所看到的，我也有「角2在開發模式下運行。調用enableProdMode（），使生產模式」。在控制檯中顯示和頁腳現在有一個橙色背景）

到目前爲止，我希望它可以幫助一些人。 但現在的問題是斷點不起作用。

如果我找到原因，我會繼續挖掘並進行其他編輯。

Answer 1

我能夠解決在OSX這個問題。造成這種痛苦的原因是導致問題的原因有很多。

1. 你打第一與--user-data-dir=remote-profile：如果您已經在運行Chrome（例如，已經打開的標籤頁 - 誰不？），你必須使用一個不同的userDataDir讓Chrome推出獨立實例。
   但是，正確的方法是將"userDataDir": "${workspaceRoot}/.vscode/chrome",添加到launch.json配置中（請參閱下文）。這需要一個路徑。如果使用'remote-profile'，它將嘗試查找名爲'remote-profile'的相對目錄。
2. 你需要設置sourceMapPathOverrides在launch.json配置，其值取決於您的操作系統：
   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代碼中鍵入F5。

這裏是我的工作版本：

• 角CLI：1.0.0-beta.24
• 節點：7.3.0
• 鉻：55.0 .2883.95
• Visual Studio代碼：1.8.1
• VSCode擴展「Chrome的調試器」msjsdiag.debugger-for-chrome：2.4.2

Answer 2

我終於得到它充分的工作！

對於那些有興趣：

（在Linux上使用鉻瀏覽器，但你可以很容易地僅僅通過「鉻」代替）。

首先，這裏的launch.json配置：

{ 
    "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:///*": "/*" 
      } 
     } 
    ] 
} 

我決定用「要求」刪除部分：「發射」，因爲我需要啓動一個新的瀏覽器窗口。

然後，啓動這樣的瀏覽器：
chromium-browser --remote-debugging-port=9222 --user-data-dir=remote-profile

在新窗口中，獲得http://localhost:4200。

然後從VSC運行調試。

一切都應該工作得很好，你應該能夠使用斷點:)可以在這裏看到它在行動

GIF：http://hpics.li/0156b80

Answer 3

亞倫F.類似ANS 我使用Windows環境下的設置角度2+發展

{ 
    "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}/*" 
      } 
     } 
    ] 
} 

Answer 4

我得到launch.json奇怪的問題由Aaron F.

提供」。腳本 「在調試命令行給的網址是這樣的：

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代碼試圖用文件」/ home/user中/我的夢 - 應用程序/ src目錄/應用/的WebPack：/ src目錄/程序/應用程序。 component.ts」。（通知的WebPack：在中間）

來源的地圖不工作，因爲我的Chrome給的網址爲‘的WebPack：/’一個斜線

在得到它與此次發佈的工作。 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}/*" } 
     } 
     ] 
} 

and got corr ECT映射

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