क्रोम डीबगर टाइपस्क्रिप्ट फाइलों पर काम नहीं करता

Question

मैं वेबस्टॉर्म 2016.2, कोणीय-क्ली, वेबपैक 2 का उपयोग कर रहा हूं। तस्वीर में, मैं लाइनों 19,20,22,23 पर ब्रेकिंग पॉइंट नहीं बना सकता। जब मैं लाइन 21 पर बनाता हूं, तो कंसोल उस पंक्ति को मुद्रित नहीं करता है जिसे मैंने 1 9 पंक्ति में बताया था।

मैं टीएस फाइल देख रहा हूं जिसे डीबग किया जाना चाहिए, लेकिन ऐसा लगता है कि मैं अन्य फाइल या जेएस फ़ाइल को डिबग कर रहा हूं। कोई पहुंच नहीं है।

यदि संभव हो तो मैं ts फ़ाइल को डीबग करना चाहता हूं और यदि नहीं, तो जेएस फ़ाइल।

कोणीय cli.json:

{ 
    "project": { 
    "version": "1.0.0-beta.11-webpack.2", 
    "name": "store-app-02" 
    }, 
    "apps": [ 
    { 
     "main": "src/main.ts", 
     "tsconfig": "src/tsconfig.json", 
     "mobile": false 
    } 
    ], 
    "addons": [], 
    "packages": [], 
    "e2e": { 
    "protractor": { 
     "config": "config/protractor.conf.js" 
    } 
    }, 
    "test": { 
    "karma": { 
     "config": "config/karma.conf.js" 
    } 
    }, 
    "defaults": { 
    "prefix": "app", 
    "sourceDir": "src", 
    "styleExt": "css", 
    "prefixInterfaces": false, 
    "lazyRoutePrefix": "+", 
    "styles": [ 
     "../node_modules/bootstrap/dist/css/bootstrap.min.css" 
    ] 
    } 
} 

tsconfig.json:

{ 
    "compilerOptions": { 
    "declaration": false, 
    "emitDecoratorMetadata": true, 
    "experimentalDecorators": true, 
    "mapRoot": "./", 
    "module": "es6", 
    "moduleResolution": "node", 
    "outDir": "../dist/out-tsc", 
    "sourceMap": true, 
    "target": "es5", 
    "typeRoots": [ 
     "../node_modules/@types" 
    ], 
    "types": [ 
     "core-js" 
    ] 
    } 
} 

Answer 1

अपने ts कोड और अंत में यह संकलन समय के दौरान js में बदल जाती है जावास्क्रिप्ट फ़ाइल wh है मैं वेब ब्राउज़र में लोड हो जाता है। आपके ब्राउज़र को typescript के बारे में पता नहीं है।

ts --->js (es5)।

जब डीबगर चलता है तो यह संबंधित संकलित js फ़ाइल को चलाने के लिए जा रहा है। अगर कोई त्रुटि है तो यह js फ़ाइल को इंगित करता है और .d.ts आंतरिक रूप से सहायता के साथ आपको ts फ़ाइल लाइन-नंबर (जहां त्रुटि हुई) पर मैप किया गया है।

यदि आप डीबग करना चाहते हैं, तो आप karma परीक्षण धावक का उपयोग कर सकते हैं या visual studio code का उपयोग कर सकते हैं जो विशेष रूप से डीबग विकल्प प्रदान करता है।

Answer 2

यदि आप टाइपस्क्रिप्ट फ़ाइलों पर टूल का उपयोग करने में सक्षम होना चाहते हैं, तो आपको आमतौर पर अपनी टाइपस्क्रिप्ट संकलित करने के साथ ही मानचित्र फ़ाइलों को उत्पन्न करने की आवश्यकता होगी।

मानचित्र फ़ाइलों में संकलित फ़ाइल के साथ मूल .ts फ़ाइल को लिंक करने के तरीके के बारे में जानकारी शामिल है। डिबगर्स जैसे टूल्स को अक्सर .ts फ़ाइलों पर कार्य करने में सक्षम होने के लिए इन फ़ाइलों की आवश्यकता होगी।

किसी ने इसे here समझाया।

इसके अलावा, यदि आप इन मैपिंग के लिए अतिरिक्त फ़ाइल नहीं बनाना चाहते हैं, तो the TypeScript compiler आपको --inlineSourceMap का उपयोग करके संकलित फ़ाइलों के अंत में सीधे इन जानकारी को जोड़ने देता है।

यहां, मुझे लगता है कि क्रोम को मानचित्र फ़ाइलों को नहीं मिला है।

Answer 3

क्रोम पूरी तरह से डीबग करता है, ब्रेकपॉइंट्स चिपकाने और लॉग संदेशों को मुद्रित करने की अनुमति देता है। मुझे लगता है, समस्या आपके tsconfig.json में है। जैसा कि अन्य उत्तर का उल्लेख है, आपको संकलन के समय जेएस फाइलें उत्पन्न करनी होंगी।। संकलक को इसके बारे में जानने के लिए आपको जोड़ना होगा:

"compileOnSave": true 

यह आपके सहेजने के तुरंत बाद आपकी टाइपस्क्रिप्ट को संकलित करना शुरू कर देगा।

और यदि, यह अभी भी काम नहीं करता है, तो अपने ब्राउज़र के कैश को साफ़ करें और ब्राउज़र को पुनरारंभ करें। यह निश्चित रूप से जादू करेगा।

मुझे उम्मीद है कि यह मदद करता है। (मेरा क्रोम संस्करण: 52.0.2743.116 मीटर (64-बिट) -> लेकिन यह वास्तव में कोई फर्क नहीं पड़ता)