Visual Studio के साथ टाइपिंग कोड डीबग करना


81

क्या दृश्य स्टूडियो में टाइपस्क्रिप्ट स्रोत को डिबग करने का एक तरीका है (उत्पन्न जावास्क्रिप्ट को डीबग करने के बजाय)?

टाइपस्क्रिप्ट भाषा विनिर्देशों से:

टाइपस्क्रिप्ट वैकल्पिक रूप से स्रोत के नक्शे प्रदान करता है, जिससे स्रोत-स्तर डिबगिंग सक्षम होती है।

इसलिए मैं ts कोड में ब्रेकपॉइंट्स को जगह देने और इसे डीबग करने में सक्षम होने की उम्मीद कर रहा था, लेकिन यह काम नहीं करता है। मुझे ऐनक में डीबगिंग का कोई अन्य उल्लेख नहीं मिला। क्या इस काम को करने के लिए मुझे कुछ करना चाहिए? शायद शब्द "वैकल्पिक रूप से" संकेत देता है कि मुझे काम करने के लिए कुछ करने की आवश्यकता है ... कोई सुझाव?


जवाबों:


71

VS2017 और बाद के लिए वर्तमान उत्तर

विजुअल स्टूडियो में सीधे टाइपिंग डिबगिंग VS2017 के बाद से संभव हो गया है। से प्रलेखन :

आप Visual Studio का उपयोग करके जावास्क्रिप्ट और टाइपस्क्रिप्ट कोड को डीबग कर सकते हैं। आप ब्रेकपॉइंट सेट और हिट कर सकते हैं, डिबगर संलग्न कर सकते हैं, चर का निरीक्षण कर सकते हैं, कॉल स्टैक देख सकते हैं और अन्य डीबगिंग सुविधाओं का उपयोग कर सकते हैं।

Visual Studio में डीबगिंग टाइपस्क्रिप्ट / Asp.NET Core पर अतिरिक्त संसाधन भी हैं ।

विजुअल स्टूडियो कोड में टाइपस्क्रिप्ट को डिबग करना भी संभव है :

विजुअल स्टूडियो कोड अपने अंतर्निहित Node.js डीबगर के माध्यम से टाइपस्क्रिप्ट डिबगिंग का समर्थन करता है और क्लाइंट-साइड टाइपस्क्रिप्ट डीबगिंग का समर्थन करने के लिए क्रोम के लिए डीबगर जैसे एक्सटेंशन के माध्यम से भी।

VS के पूर्व संस्करणों के लिए मूल उत्तर:

आप वीएस में डिबग करने में सक्षम नहीं हो सकते हैं, लेकिन आप कुछ ब्राउज़रों में कर सकते हैं। आरोन पॉवेल ने अभी-अभी क्रोम कैनरी में काम करने वाले ब्रेकप्वाइंट पाने के बारे में ब्लॉग किया है: https://www.aaron-powell.com/posts/2012-10-03-typescript-source-maps/

संक्षेप में (बहुत संक्षेप में) हारून क्या कहता है, आप -sourcemapसंकलक पर स्विच का उपयोग *.js.mapउसी स्रोत के समान निर्देशिका में एक फ़ाइल बनाने के लिए करते हैं। उन ब्राउज़रों में जो स्रोत के नक्शे (क्रोम कैनरी, और संभवतः हाल ही में फ़ायरफ़ॉक्स का निर्माण करते हैं, क्योंकि वे एक मोज़िला विचार हैं) का समर्थन करते हैं, तब आप अपने .tsस्रोत को उसी तरह डिबग कर सकते हैं जैसे आप सामान्य .jsफ़ाइलों में करते हैं।

ब्लॉग "उम्मीद के साथ या तो विज़ुअल स्टूडियो या IE (या दोनों) टीम के साथ-साथ स्रोत मानचित्र भी उठाता है और उनके लिए समर्थन भी जोड़ता है।" - जो बताता है कि यह अभी तक नहीं हुआ है।

अपडेट करें:

टाइपस्क्रिप्ट 0.8.1 की रिलीज़ के साथ, सोर्स मैप डिबगिंग अब विजुअल स्टूडियो में भी उपलब्ध है:

https://blogs.msdn.com/b/typescript/archive/2012/11/15/announcing-typescript-0-8-1.aspx

घोषणा से:

डिबगिंग टाइपस्क्रिप्ट अब स्रोत स्तर डिबगिंग का समर्थन करता है! स्रोत मानचित्र प्रारूप उन भाषाओं को डिबगिंग के रूप में लोकप्रियता प्राप्त कर रहा है जो जावास्क्रिप्ट में अनुवाद करती हैं और विभिन्न ब्राउज़रों और उपकरणों द्वारा समर्थित है। संस्करण 0.8.1 के साथ, टाइपस्क्रिप्ट कंपाइलर आधिकारिक तौर पर स्रोत मानचित्र का समर्थन करता है। इसके अतिरिक्त, Visual Studio 2012 के लिए टाइपस्क्रिप्ट का नया संस्करण स्रोत मानचित्र प्रारूप का उपयोग करके डीबगिंग का समर्थन करता है। कमांड-लाइन से, अब हम पूरी तरह से - सोर्समैप फ्लैग के उपयोग का समर्थन करते हैं, जो जावास्क्रिप्ट आउटपुट के लिए एक स्रोत मैप फ़ाइल को आउटपुट करता है। यह फ़ाइल स्रोत टाइप-सक्षम ब्राउज़रों और विज़ुअल स्टूडियो में मूल टाइपस्क्रिप्ट स्रोत को सीधे डीबग करने की अनुमति देगा। Visual Studio में डीबगिंग सक्षम करने के लिए टाइपस्क्रिप्ट प्रोजेक्ट के साथ HTML एप्लिकेशन बनाने के बाद ड्रॉपडाउन से 'डीबग' चुनें।

अपडेट :

WebMorm ने SourceMaps के माध्यम से डिबगिंग के लिए समर्थन भी जोड़ा है: http://blog.jetbrains.com/webide/2013/03/webstorm-6-0-released-adds-typescript-debugging-with-source-maps-fresh-ui- और भी बहुत कुछ/

सबसे पहले, WebStorm आधुनिक भाषाओं जैसे टाइपस्क्रिप्ट, कॉफ़ीस्क्रिप्ट और डार्ट के साथ स्मार्ट और अधिक सुव्यवस्थित वेब विकास की अनुमति देता है। इन भाषाओं के लिए प्रथम श्रेणी कोड संपादक प्रदान करने के अलावा, WebStorm 6 प्रदान करता है:

सभी समर्थित प्लेटफार्मों पर ब्राउज़रों द्वारा मान्यता प्राप्त इन उच्च-स्तरीय भाषाओं में स्वचालित संकलन / ट्रांसप्लिकेशन। सोर्स मैप्स के साथ टाइपस्क्रिप्ट, डार्ट या कॉफीस्क्रिप्ट की पूर्ण विशेषताओं वाली डिबगिंग।


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

1
मुझे लगता है कि जब हारून ने ब्लॉग लिखा था (और जब मैंने यह उत्तर पोस्ट किया था), तो कैनरी आवश्यक था। अब तक, इस सुविधा को जारी करने के लिए नष्ट कर दिया जाना चाहिए।
जूड फिशर

4
अब, Internet Explorer का उपयोग करते समय Visual Studio GUI में सीधे टाइपस्क्रिप्ट को डीबग करना संभव लगता है। मुझे आश्चर्य है कि अगर यह अन्य ब्राउज़रों के साथ भी प्राप्त किया जा सकता है।
kossmoboleat

मैं वीएस 2012 को टीएस
निकोस

"वेब एक्सटेंशन" के साथ स्रोत मानचित्र उत्पन्न करके मेरे लिए काम किया
आदापाबी

15

VS2013 टाइपस्क्रिप्ट एप्लिकेशन के साथ, मुझे web.config में कुछ भी बदलना नहीं था। मैंने ts फ़ाइल में एक ब्रेकपॉइंट लगाया और IE में डीबग किया और प्रीस्टो, ब्रेकप्वाइंट टाइपस्क्रिप्ट के अंदर बंद हो गया।


मैं सहमत हूँ। मैं वीएस 2013 अपडेट 2 का उपयोग कर रहा हूं
नैश

2
IE पर इंगित करने के लिए धन्यवाद। दुर्भाग्य से क्रोम में डिबगिंग काम नहीं कर रही है।
इवान कोचुरिन

4
मेरा अनुमान है कि Microsoft डिबग प्रक्रिया को काम करने के लिए कुछ हुक का लाभ उठाता है जो अन्य ब्राउज़र अभी तक समर्थन नहीं करते हैं। एक मध्यवर्ती कोड मैपिंग फ़ाइल है जो ब्राउज़र में उत्पन्न जावास्क्रिप्ट और आईडीई में स्रोत कोड के बीच एक अनुबंध की तरह है। मुझे खुशी है कि यह बिल्कुल काम कर रहा है।
BraveNewMath

5

यह अब वीएस 2017 में तय किया गया है ताकि आप सीधे विजुअल स्टूडियो और टाइपस्क्रिप्ट में डिबग कर सकें।

बस अपने ब्रेक पॉइंट को अपने * .ts फ़ाइल में सेट करें, और यह हिट हो जाएगा।

और यह वीएस में डिबग करेगा, आईई नहीं, जैसे कि आप सी # डीबग कर रहे थे।


3

Visual Studio के साथ डिबगिंग टाइपस्क्रिप्ट सही सेटिंग्स के साथ काम करता है। (वीएस के पिछले संस्करणों में मुझे कभी-कभी समस्याओं का सामना करना पड़ता है, नीचे यह बताया गया है कि यह वीएस 2015 सीटीपी 6 के साथ ठीक काम करता है)

  1. पहले आप यह सुनिश्चित करें कि आप जावास्क्रिप्ट के लिए टाइपस्क्रिप्ट संकलन करते समय स्रोत मानचित्र बनाते हैं । तो आपके पास हर xxx.js. के पास एक xxx.js.map फ़ाइल होनी चाहिए।

    Visual Studio के बाहर टाइपस्क्रिप्ट कंपाइलर चलाकर सोर्स मैप प्राप्त करने से tsc कमांड लाइन ऐड में कोई कठिनाई नहीं होती है

    --sourcemap %1.ts
    

    आपकी gulp स्क्रिप्ट आमतौर पर डिफ़ॉल्ट रूप से sourcemaps बनाएगी।

  2. अपने वेब एप्लिकेशन को विज़ुअल स्टूडियो में कॉन्फ़िगर करें

    इंटरनेट एक्सप्लोरर को स्टार्ट ब्राउजर के रूप में सेट करें । मैं इसे केवल IE के साथ काम कर रहा हूँ और न ही किसी अन्य ब्राउज़र काम करेगा लगता है।

    परियोजना के गुणों में "वेब" टैब पर जाएं और नीचे "डीबगर्स" अनुभाग को कॉन्फ़िगर करें : सभी डिबगर को अक्षम करें ! यह काउंटर इंट्र्यूटिव है और आपको यह त्रुटि संदेश दिखाई दे सकता है:

    आपने डिबगर प्रारंभ करने का प्रयास किया है, लेकिन वेब गुण पृष्ठ पर आपकी वर्तमान डिबग सेटिंग के आधार पर डीबग करने की कोई प्रक्रिया नहीं है। यह तब होता है जब "एक पृष्ठ नहीं खोलें। किसी अन्य प्रक्रिया से अनुरोध के लिए प्रतीक्षा करें" विकल्प चुना गया है, और ASP.NET डीबगिंग अक्षम है। कृपया वेब गुण पृष्ठ पर अपनी सेटिंग्स की जाँच करें और पुनः प्रयास करें।

    जैसा कि त्रुटि संदेश कहता है, वेब गुणों के शीर्ष पर प्रारंभ क्रिया " चालू पृष्ठ " की तरह एक और विकल्प होना चाहिए ।

    Visual Studio के अंदर या बाद में अपने ts कोड में ब्रेकपॉइंट सेट करें

    F5 मारो

जब आप ts फ़ाइलों को डीबग और संपादित करने के लिए Visual Studio Editor का उपयोग कर सकते हैं, तो "संपादित करें और जारी रखें" काम नहीं करेगा, वर्तमान में कोई ब्राउज़र नहीं है जो js और js.map फ़ाइलों को पुनः लोड कर सकता है और जारी रख सकता है। (अगर मैं गलत हूं तो मुझे किसी को सुधारो और मैं खुश रहूंगा।)


अप्रैल के बाद से आपके सेटअप में कोई बदलाव?
jth41

क्या आपको राइटअप उपयोगी लगा?
सिटीकीड

2

टाइपस्क्रिप्ट डिबगिंग मेरे लिए किसी भी मशीन पर VS2013 अपडेट 3 के साथ बिल्कुल भी काम नहीं किया। बहुत हताशा के बाद, मैंने VS2013 अपडेट 4 सीटीपी को अपडेट करने की कोशिश करने का फैसला किया। अंत में ब्रेकप्वाइंट्स वीएस में हिट हो रहे हैं!


अद्यतन 4 ctp सिर के लिए thx, स्थापित करना। मेरी मशीन में अपडेट 3 और टाइपस्क्रिप्ट डिबगिंग कार्य हैं। हालाँकि, शुरू करना यानी वेब अनुप्रयोग संकलित होने के बाद से हर बार विशेष रूप से एक लंबा समय लगता है (हालाँकि मैंने केवल ts कोड बदल दिया है)
citykid

0

संक्षिप्त उत्तर: विज़ुअल स्टूडियो को पुनरारंभ करें

पृष्ठभूमि: मेरे पास टाइपस्क्रिप्ट के साथ दो अलग-अलग परियोजनाओं के साथ 2 दृश्य स्टूडियो 2015 उदाहरण हैं। पहले शुरू उदाहरण सही ढंग से डिबग नहीं किया, दूसरे ने किया। परियोजना की सभी सेटिंग्स समान थीं। मैंने अंत में पहले उदाहरण को फिर से शुरू किया और फिर टाइपस्क्रिप्ट (अंततः) को डिबग किया।

हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.