दृश्य स्टूडियो कोड के साथ डीबग कोणीय स्कैमैटिक्स

आइए देखें कि वीएस कोड डिबगर का उपयोग करके अंदर से कोणीय योजनाबद्ध कैसे काम करता है।

डिबगिंग और चरण-दर-चरण कोड निष्पादन हमारे डेवलपर कार्य का एक महत्वपूर्ण हिस्सा है। हमें जल्दी पता चल जाता है कि हमारा कोड काम कर रहा है या नहीं, त्रुटियों से छुटकारा पाना आसान है। डिबगर चलाना और प्रत्येक विशिष्ट मामले के लिए परीक्षण चलाना हमारे कोड की जांच करते समय काम का मुख्य हिस्सा होना चाहिए।

डिबगिंग यह देखने का भी अवसर प्रदान करता है कि कोड कैसे काम करता है, विशेष रूप से किसी और का कोड। जो के साथ काम करते समय बहुत उपयोगी है schematics। कोणीय डेवलपर्स के रूप में, हम schematicsअपनी परियोजनाओं, सेवाओं, घटकों आदि का निर्माण करते हुए, कोणीय सीएलआई के भाग के रूप में उपयोग करते हैं । और यह मत सोचो कि यह सब कैसे काम करता है।

हालांकि, काम के सार को समझने से schematicsन केवल उन लोगों के प्रति प्रशंसा की भावना का अनुभव करने में मदद मिलती है, जिन्होंने यह सब बनाया है, बल्कि अपनी खुद की योजनाओं को बनाना भी संभव बनाता है। और इस लेख में हम schematicsडिबग करना सीखेंगे , अर्थात। Visual Studio Code को node.js अनुप्रयोगों को डीबग करने के लिए कॉन्फ़िगर करें और डीबग की गई प्रक्रिया में शामिल हों

रनिंग एंगुलर स्कीमैटिक नोड.जेएस पर एक प्रोग्राम चला रहा है schematics। ठीक है, आरंभ करने के लिए, हमें एक परियोजना बनाने की आवश्यकता है।

उपकरण और प्रशिक्षण

सबसे पहले, मदद से एक योजनाबद्ध परियोजना बनाएं schematic-cli, आपको यह सुनिश्चित करने की आवश्यकता है कि इस तरह का पैकेज हमारे वातावरण में मौजूद है। हमने इसे विश्व स्तर पर रखा

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

यह उपकरण आपको नई योजनाबद्ध परियोजनाएँ बनाने की अनुमति देता है। परिचित होने के लिए, टर्मिनल में एक कमांड चलाएं schematics।

schematics
schematics [CollectionName:]SchematicName [options, ...]

By default, if the collection name is not specified, use the internal collection provided
by the Schematics CLI.

Options:
    --debug             Debug mode. This is true by default if the collection is a relative
                        path (in that case, turn off with --debug=false).

    --allowPrivate      Allow private schematics to be run from the command line. Default to
                        false.

    --dry-run           Do not output anything, but instead just show what actions would be
                        performed. Default to true if debug is also true.

    --force             Force overwriting files that would otherwise be an error.

    --list-schematics   List all schematics from the collection, by name. A collection name
                        should be suffixed by a colon. Example: '@schematics/schematics:'.

    --verbose           Show more information.

    --help              Show this message.

यदि आप विकल्प लागू करते हैं, --list-schematicsतो हम आंतरिक संग्रह से योजनाओं की एक सूची देखते हैं, यह डिफ़ॉल्ट रूप से प्रदान की जाती है।

schematics --list-schematics
blank
schematic

यदि आप चुनते हैं schematic- यह तीन योजनाओं के साथ एक नमूना संग्रह तैयार करेगा - यह पता लगाने के लिए उन्हें देखने की सिफारिश की जाती है।
(एक परियोजना बनाने के लिए, निकालें --dry-run)

schematics schematic --name=schematics-debugged --dry-run

schematics . , , schematics ( ). , .

schematics

npm run build
npm run test

, schematics node.js . , schematic , name .

<program> [arguments...]

VS Code launch.json . . — node.js - Launch Program. node.js , .. schematics.js @angular-devkit/schematics-cli, bin.

@angular-devkit/schematics-cli , . program js . ${workspaceFolder}, , .

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

:
type: node.
request: launch.
name: ,
program: , .. ${workspaceFolder}/node_modules/@angular-devkit/schematics-cli/bin/schematics.js
args: args. , (package.json collection.json), , path, workspace.
outFiles: .

यह पता चला है:

{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "node",
            "request": "launch",
            "name": "Launch Program",
            "program": "${workspaceFolder}/node_modules/@angular-devkit/schematics-cli/bin/schematics.js",
            "args": [
                ".:my-full-schematic",
                "--name=hello"
            ],
            "outFiles": []
        }
    ]
}

विधि खोलें factory। आमतौर पर वह अंदर है index.ts। एक विराम बिंदु जोड़ें।

F5 दबाएं, डिबगिंग स्थापित ब्रेकपॉइंट पर शुरू और बंद होना चाहिए।

अब आप सभी रहस्यों को देख सकते हैं Schematicsया पेड़ के अंदर देख सकते हैं और पूरे आंतरिक रसोईघर का ध्यान कर सकते हैं।

अगर आपको लेख पसंद आया, तो Angularlicious Podcast पॉडकास्ट भी हैं।

संबंधित सामग्री:

Node.js डीबगिंग
विज़ुअल स्टूडियो कोड डीबगिंग