TypeScript कोड की डिबगिंग: डेवलपर के लिए उपकरण और तकनीकें

शुरुआती लोगों के लिए ऑनलाइन Python प्रशिक्षक

Python आसानी से सीखें बिना सिद्धांत के बोझ के। स्वचालित जांच के साथ व्यावहारिक कार्य हल करें और ब्राउज़र में सीधे कोड लिखें।

पाठ्यक्रम शुरू करें

TypeScript कोड की डिबगिंग: बगों को कार्यों में बदलना

\n\n

क्या आपने कभी किसी त्रुटि को खोजने में एक घंटा बिताया है, जो वेरिएबल के नाम में एक साधारण टाइपिंग गलती निकली? या खुद को यह सोचते हुए पकड़ा है कि console.log ही एकमात्र उपकरण है जिसका आप उपयोग करते हैं? क्लब में आपका स्वागत है। डिबगिंग सिर्फ 'बग पकड़ना' नहीं है, बल्कि यह समझने की एक कला है कि आपका कोड वास्तव में कैसे काम करता है।

\n\n

TypeScript इस कहानी में एक विशेष आकर्षण जोड़ता है। एक ओर, स्थैतिक टाइपिंग संकलन चरण में ही त्रुटियों की एक पूरी श्रेणी को काट देती है। दूसरी ओर, जब कोड पहले से ही JavaScript में संकलित हो चुका है, तो इसे 'चलते-फिरते' डीबग करना कठिन हो जाता है: आप TS में लिखते हैं, लेकिन ब्राउज़र में संकलित JS देखते हैं। इस भूलभुलैया में कैसे खो न जाएं?

\n\n

आज मैं आपको TypeScript कोड की डिबगिंग की वास्तविक तकनीकें दिखाऊंगा जिनका मैं स्वयं उपयोग करता हूं। कोई बेकार की बात नहीं - केवल व्यावहारिक उपकरण, उदाहरण और लाइफहैक्स जो आपकी नसों और काम के घंटों को बचाएंगे।

\n\n

TypeScript की डिबगिंग JavaScript की डिबगिंग से क्यों अलग है?

\n\n

TypeScript की मुख्य विशेषता ट्रांसपिलेशन है। आप टाइप्स, जेनेरिक्स और इंटरफेस के साथ कोड लिखते हैं, और ब्राउज़र या Node.js को शुद्ध JavaScript मिलता है। इसका मतलब है कि डिबगिंग करते समय आप संकलित कोड देखते हैं, जो मूल से काफी भिन्न हो सकता है: वेरिएबल के नाम बदले जा सकते हैं, जेनेरिक्स मिटा दिए जाते हैं, और इंटरफेस पूरी तरह से गायब हो जाते हैं।

\n\n

समाधान - Source Maps। ये मूल TS और संकलित JS के बीच पत्राचार के मानचित्र हैं। इनके बिना, TypeScript की डिबगिंग कॉफी के आधार पर भविष्यवाणी करने जैसी हो जाती है।

\n\n

Source Maps की सेटिंग: पारदर्शिता की ओर पहला कदम

\n\n

ब्राउज़र या डिबगर को यह समझने के लिए कि JS की कौन सी पंक्ति TS की किस पंक्ति से मेल खाती है, tsconfig.json में source maps की जनरेशन चालू करनी होगी:

\n\n

{\n  "compilerOptions": {\n    "sourceMap": true,\n    "outDir": "./dist",\n    "target": "ES2020",\n    "module": "commonjs"\n  },\n  "include": ["src/**/*"]\n}

\n\n

अब संकलन के दौरान प्रत्येक JS फ़ाइल के साथ एक .map फ़ाइल दिखाई देगी। ब्राउज़र (Chrome, Firefox) स्वचालित रूप से इसे लोड करेगा, और आप सीधे TypeScript कोड में ब्रेकपॉइंट सेट कर पाएंगे।

\n\n

महत्वपूर्ण: प्रोडक्शन में source maps को बंद करना या छिपे हुए endpoint का उपयोग करना बेहतर है, ताकि उपयोगकर्ताओं को स्रोत कोड न दिखे। इसे पर्यावरण चर के माध्यम से सेट करें:

\n\n

// tsconfig.prod.json\n{\n  "extends": "./tsconfig.json",\n  "compilerOptions": {\n    "sourceMap": false\n  }\n}

\n\n

TypeScript डिबगिंग उपकरण: आपका शस्त्रागार

\n\n

1. VS Code - अंतर्निहित डिबगर

\n\n

Visual Studio Code शायद TypeScript की डिबगिंग के लिए सबसे अच्छा वातावरण है। अंतर्निहित डिबगर source maps को पढ़ सकता है और सीधे .ts फ़ाइलों में breakpoints सेट कर सकता है। यहाँ launch.json का न्यूनतम कॉन्फ़िगरेशन है:

\n\n

{\n  "version": "0.2.0",\n  "configurations": [\n    {\n      "type": "node",\n      "request": "launch",\n      "name": "ts-node के माध्यम से TS डिबगिंग",\n      "runtimeArgs": ["-r", "ts-node/register"],\n      "args": ["${workspaceFolder}/src/index.ts"],\n      "sourceMaps": true,\n      "cwd": "${workspaceFolder}",\n      "protocol": "inspector"\n    }\n  ]\n}

\n\n

अब आप F5 दबा सकते हैं और सीधे डिबगर में प्रवेश कर सकते हैं। पंक्ति संख्याओं के बाईं ओर लाल बिंदु लगाएं - वे काम करेंगे, भले ही आप जेनेरिक्स और डेकोरेटर के साथ TypeScript कोड डीबग कर रहे हों।

\n\n

लाइफहैक: सीधे कोड में debugger; का उपयोग करें - यह breakpoint सेट करने के बराबर है, लेकिन इसमें माउस की आवश्यकता नहीं है।

\n\n

2. Chrome DevTools - फ्रंटएंड डिबगिंग

\n\n

TypeScript (React, Angular, Vue) पर फ्रंटएंड प्रोजेक्ट्स के लिए, Chrome DevTools एक must have है। Sources टैब खोलें, webpack:// या src फ़ोल्डर में अपनी फ़ाइल ढूंढें - यदि source maps सही ढंग से कॉन्फ़िगर की गई हैं, तो आप मूल TypeScript देखेंगे।

\n\n

उपयोगी विशेषताएं: