ASP.NET Core知多少系列：總體介紹及目錄

1. 引言

最近在看《程序員的成長課》，講到程序員如何構(gòu)建技能樹，印象深刻。作為一名后臺開發(fā)的程序員，深感技能單一，就別說技能樹了。作為一名合格的后臺程序員，至少要掌握一門靜態(tài)語言，一門動態(tài)語言和一門前端語言。靜態(tài)語言C#算不上精通，動態(tài)語言Python也剛剛?cè)腴T。但前端卻是空白，雖說有了解過jquery、bootstrap，但因為項目無所涉及，早已忘得一干二凈。

近幾年，前端框架大行其道，Web開發(fā)已經(jīng)是一個不容忽視的大趨勢，在這個趨勢下對前端框架一無所知，顯然是要淘汰的。所以決定拾起前端，選擇學習Angular來彌補自己的前端空白。計劃使用.Net Core + Angular開發(fā)一個任務清單。

2. 環(huán)境準備

.Net Core已經(jīng)支持Angular模板，我們只需要使用dotnet new angular -n YourAppName即可創(chuàng)建angualr項目模板。
依次安裝：

1. Node.js（默認安裝，即可安裝NPM）
2. 執(zhí)行npm install -g @angular/cli，安裝angular cli。
3. 開發(fā)工具：Visual Studio Code
4. 安裝最新.Net Core SDK，目前版本V2.1.101。

3. 創(chuàng)建并啟動項目

執(zhí)行dotnet new angular -n Learning.NetCore.Angular，創(chuàng)建項目后，使用VS Code打開文件夾。項目結(jié)構(gòu)如下圖所示。其中ClientApp就是Angular所寫的前端部分，實現(xiàn)了前后端分離。

項目結(jié)構(gòu)

打開后我們需要安裝以下幾個VS Code的擴展，以便我們順利開發(fā)調(diào)試。

擴展

稍后，右下角會彈窗提示我們是否需要調(diào)試項目，如下圖所示。

image.png

點擊Yes，就會在項目中為我們創(chuàng)建一個.vscode的文件夾。其中包含兩個文件，一個是launch.json，一個是tasks.json。其中l(wèi)aunch.json用于配置調(diào)試相關參數(shù)。tasks.json用于配置默認的構(gòu)建任務。

如果沒有彈出上圖彈窗，我們也可以按下圖步驟添加。

添加調(diào)試配置.gif

第一次運行時，我們先執(zhí)行dotnet build來驗證項目能否正確構(gòu)建， 它會恢復npm依賴，可能會耗時幾分鐘，npm依賴安裝完畢后，以后再次運行就很快了。等構(gòu)建成功，執(zhí)行dotnet run運行項目。

瀏覽器訪問http://localhost:5000即可看到下圖效果。

demo.gif

然后鍵盤按Ctrl+C停止運行。

4. 項目調(diào)試

因為第三步我們已經(jīng)創(chuàng)建了默認調(diào)試配置。直接F5運行，就可以調(diào)試.Net Core代碼。但是我們該如何聯(lián)調(diào)Angular代碼呢？這就是本節(jié)的重點了。我們需要修改下我們的launch.json了。

打開launch.json點擊添加配置，然后選擇Chrome:Launch，就會添加在配置文件中添加一個節(jié)點，如下所示：

{
    "type": "chrome",
    "request": "launch",
    "name": "Launch Chrome",
    "url": "http://localhost:8080",
    "webRoot": "${workspaceFolder}"
},

我們需要做相應修改。因為.Net Core項目默認綁定端口為5000，所以我們要將上面url的端口號改為5000。并映射webRoot到wwwroot目錄下。同時我們要啟用sourceMaps。修改后如下所示：

{
    "type": "chrome",
    "request": "launch",
    "name": "Launch Chrome",
    "url": "http://localhost:5000",
    "webRoot": "${workspaceFolder}/wwwroot",
    "sourceMaps": true
},

至此我們成功添加一個任務用來啟動Chrome，來調(diào)試我們的angular。需要簡單三步走：

1. 終端執(zhí)行dotnet run，運行項目
2. 切換到debug按鈕，選擇Launch Chrome配置，F(xiàn)5運行。
3. 斷點ts文件。

步驟如下圖所示：

調(diào)試.gif

但是這個時候我們?nèi)匀粺o法做到聯(lián)調(diào)。我們需要要先啟動項目，再選具體的某個調(diào)試配置進行調(diào)試。即同時只能調(diào)試Angualr和.NetCore中的一個。那如何二者聯(lián)調(diào)？？？

5. 聯(lián)調(diào)Angualr&&.NetCore

同樣我們還是要修改launch.json，添加一個compounds配置節(jié)點。這個節(jié)點允許我們同時啟動多個調(diào)試任務。配置如下：

"compounds": [
        {
            "name": ".Net Core + Chrome",
            "configurations": [".NET Core Launch (web)","Launch Chrome"]
        }
    ],
"configurations": [
//省略
]

最終的配置如下：

"compounds": [
    {
        "name": ".NetCore+Chrome",
        "configurations": [ ".NET Core Launch (web)", "Launch Chrome" ]
    }
],
"configurations": [
    { 
        // chrome debugger 
    },
    { 
        // .Net Core Launch (web)
    },
]

這個配置很簡單，就是把我們剛才配置的調(diào)試任務組裝在一塊即可。

回到調(diào)試界面，選擇.NetCore+Chrome，F(xiàn)5運行，就可以同時在angular和.net core代碼中斷點并調(diào)試。如下圖所示：

聯(lián)調(diào).gif

細心的你可能會發(fā)現(xiàn)，通過這種方式雖然可以完成聯(lián)調(diào)，但還是有點小瑕疵。兩個調(diào)試任務會分別啟動一個網(wǎng)頁窗口。那有沒有辦法解決呢？有的，我們再添加一個.Net Core Launch (console)的調(diào)試任務，這個調(diào)試任務就不會啟動網(wǎng)頁窗口。然后再將.Net Core Launch (console)和Launch Chrome組裝在一起即可。具體配置看下圖：

聯(lián)調(diào)2配置.gif

6. 最后

本文僅是VS Code開發(fā)調(diào)試技巧的講解，希望對你有所幫助。