如何使用 Visual Studio Code 調試 Angular Schematics 實作Tooling and Prerequisites開始調試

how to debug an angular schematic using visual studio code

能夠在代碼執行時調試和周遊代碼是我們開發工作流程的基礎。這是一項必不可少的功能，使我們能夠調試和确定代碼在做什麼。它可以是我們測試工作流程的一部分——附加調試器并在特定場景中執行測試。

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

我們使用 cli 建立新的工作區、項目、服務、元件、子產品、類等 - 我們很少考慮幕後發生的事情。

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

當您運作/執行 schematic 時，您正在運作一個節點程式。 我們運作的具體程式是原理圖。 是以，要開始，我們需要一個原理圖項目。

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

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

該工具允許我們使用原理圖集合建立新的原理圖項目。 在終端中運作 schematics 指令。

輸出是指令的選項清單。

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

schematics schematic --name=schematics-debugged

自動建立了三個檔案夾：

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

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

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

npm run build npm run test

如前所述，當我們執行schematics 指令時，我們正在執行一個 node.js 程式并傳入一些參數。

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

為項目建立一個新的 launch.json 配置。要添加的配置類型是 node.js - launch program.

選擇此特定配置進行調試時，我們需要針對 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",

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

args：在 args 數組中單獨添加每個參數。由于我們已經在項目的根目錄中（package.json 有一個指向 collection.json 檔案的 schemas 屬性）。

如下圖所示：

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

outfiles：使用空 [] 添加此屬性。

最後點選 f5，就可以開始調試了：

更多jerry的原創文章，盡在："汪子熙":