[How to Debug an Angular Schematic using Visual Studio Code](https://angularlicious.medium.com/how-to-debug-an-angular-schematic-using-visual-studio-3bbe4fde8fd8)

能夠在程式碼執行時除錯和遍歷程式碼是我們開發工作流程的基礎。這是一項必不可少的功能，使我們能夠除錯和確定程式碼在做什麼。它可以是我們測試工作流程的一部分——附加偵錯程式並在特定場景中執行測試。

除錯還提供了一個機會來了解程式碼（我們沒有實現的）是如何工作的。原理圖當然就是這種情況。作為 Angular 開發人員，我們在使用 Angular CLI 時肯定每天都在使用原理圖。

我們使用 CLI 建立新的工作區、專案、服務、元件、模組、類等 - 我們很少考慮幕後發生的事情。

但是，瞭解原理圖的工作原理使我們能夠欣賞為我們提供如此多功能的工具。但它也有助於學習如何建立我們自己的原理圖。

當您執行/執行 Schematic 時，您正在執行一個節點程式。 我們執行的具體程式是原理圖。 因此，要開始，我們需要一個原理圖專案。

# Tooling and Prerequisites

之前，我們可以使用 schema-cli 建立一個原理圖專案，我們需要確保我們的開發環境中有以下包可用。 使用 -g 安裝以下軟體包以使其全域性可用。

> npm install -g @angular-devkit/schematics
> npm install -g @angular-devkit/schematics-cli

該工具允許我們使用原理圖集合建立新的原理圖專案。 在終端中執行 schematics 命令。

輸出是命令的選項列表。

![](https://img-blog.csdnimg.cn/img_convert/adf6e7383b0fe05d5fe687b64ac3da01.png)

使用集合中的原理圖專案建立帶有 (3) 個原理圖的示例原理圖集合 - 這些示例將幫助我們熟悉原理圖的工作原理。

> schematics schematic --name=schematics-debugged

![](https://img-blog.csdnimg.cn/img_convert/961eb80ebb0cbddb27705f24fa1299e6.png)

自動建立了三個資料夾：
![](https://img-blog.csdnimg.cn/img_convert/ec55462556a9ee127e7f61ac50ec708c.png)

我們的新原理圖專案是 (3) 個原理圖的集合。 示例專案中的每個 (3) 原理圖都展示了原理圖可以做什麼以及它們如何協同工作（可組合原理圖）的各種功能。

本文不會詳細介紹這些原理圖——它會專注於設定僅用於除錯的環境。

現在您有了一個新的原理圖專案。 您可以使用以下命令構建和測試專案：

> npm run build
> npm run test
![](https://img-blog.csdnimg.cn/img_convert/8802b343ae328b8c6e4756433637ff81.png)

![](https://img-blog.csdnimg.cn/img_convert/3114ba1ad419d0b11f21e7600e143e71.png)

# 開始除錯

如前所述，當我們執行schematics 命令時，我們正在執行一個 Node.js 程式並傳入一些引數。

在這種情況下，它是一個 Schematics 程式。引數包括特定的原理圖專案名稱和我們想要傳入的任何其他選項。

為專案建立一個新的 launch.json 配置。要新增的配置型別是 node.js - launch program.

![](https://img-blog.csdnimg.cn/img_convert/39d43cc78d25f2c5428481ed5740165f.png)

選擇此特定配置進行除錯時，我們需要針對 Node.js 程式。

在本例中，它是 schemas.js（來自 @angular-devkit/schematics-cli 包）。我們想要的程式是包的bin資料夾中的一個Javascript檔案。

我透過在專案中本地安裝 @angular-devkit/schematics-cli 包來簡化對這個程式的訪問。啟動配置的程式屬性要求檔案是程式或 Javascript 檔案位置的完整路徑。

使用 ${workspaceFolder} 提供工作區/專案資料夾的完整路徑。

> npm install -D @angular-devkit/schematics-cli

執行完之後，package.json 裡新增的內容：

"@angular-devkit/schematics-cli": "^12.2.10",

![](https://img-blog.csdnimg.cn/img_convert/eb18682f348456cb65026cf8eeceff33.png)

我的 launch.json 檔案內容如下：

```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": "node",
            "request": "launch",
            "name": "Launch Program for Schematics",
            "args": [
                ".:my-other-schematic",
                "--name=hello"
            ],
            "program": "${workspaceFolder}/node_modules/@angular-devkit/schematics-cli/bin/schematics.js",
            "outFiles": []
        }
    ]
}
```

![](https://img-blog.csdnimg.cn/img_convert/0f51fa0f5fedc9da446f0285c043be3a.png)

* args：在 args 陣列中單獨新增每個引數。由於我們已經在專案的根目錄中（package.json 有一個指向 collection.json 檔案的 schemas 屬性）。

如下圖所示：

![](https://img-blog.csdnimg.cn/img_convert/483716c1dfea9dd08d3fe4f6617b4258.png)

如果原理圖的路徑不同（即，如果您使用工作區），您可能需要修改引數。

outFiles：使用空 [] 新增此屬性。

最後點選 f5，就可以開始除錯了：

![](https://img-blog.csdnimg.cn/img_convert/0f5ddb4ac552bde074ea7e7c971ac9f5.png)

如何使用 Visual Studio Code 除錯 Angular Schematics 實現

相關文章