ब्राउज़र के डिबगर में ही गतिशील रूप से लोड किए गए जावास्क्रिप्ट (jQuery के साथ) को डिबग कैसे करें?


92

ब्राउज़र के डीबगर की स्क्रिप्ट अनुभाग में एक गतिशील रूप से जोड़ी गई स्क्रिप्ट दिखाई नहीं दे रही है।

स्पष्टीकरण:

मुझे उपयोग करने और उपयोग करने की आवश्यकता है

if( someCondition == true ){
   $.getScript("myScirpt.js", function() {
       alert('Load Complete');
       myFunction();
   });
}

ताकि myScript.js को गतिशील रूप से किसी शर्त को पूरा करने पर लोड किया जा सके ... और पूरी स्क्रिप्ट प्राप्त करने के बाद ही myFunction कहा जा सकता है ...

लेकिन ब्राउज़र अपने डिबगर स्क्रिप्ट अनुभाग में गतिशील रूप से लोड किए गए myScript.js नहीं दिखा रहे हैं।

क्या कोई दूसरा रास्ता है ताकि सभी लक्ष्यों को प्राप्त किया जा सके जो कि ब्राउज़र में ही गतिशील रूप से भरी हुई स्क्रिप्ट को डीबग करने में सक्षम बना देगा?



2
debugger;डायनामिक लोडेड स्क्रिप्ट में ऑटो स्टॉप का उपयोग , javascript.info/debugging-chrome
यू यांग जियान

जवाबों:


208

आप अपनी गतिशील रूप से भरी हुई स्क्रिप्ट को एक नाम दे सकते हैं ताकि यह क्रोम / फ़ायरफ़ॉक्स जावास्क्रिप्ट डिबगर में दिखाई दे। ऐसा करने के लिए आप स्क्रिप्ट के अंत में एक टिप्पणी देते हैं:

//# sourceURL=filename.js

यह फ़ाइल तब "स्रोत" टैब में दिखाई देगी filename.js। मेरे अनुभव में आप नाम में का उपयोग कर सकते हैं, लेकिन अगर मैं प्रयोग कर रहा हूं तो मुझे अजीब व्यवहार मिलेगा।

अधिक जानकारी के लिए देखें: डायनेमिक जावास्क्रिप्ट डेप्रिसिएशन में // @ sourceurl का विराम बिंदु


19
ध्यान दें कि यह // # में बदल गया है, हालांकि // @ अभी भी क्रोम में काम करता है। .Html फाइलों में लिपियों को भी इसी तरह से नाम दिया जा सकता है। सावधान रहे! '=' चिह्न के पहले और बाद में कोई रिक्त स्थान न छोड़ें।
मर्ट मर्सर्ट

11
मेरे लिए, js फ़ाइल को "(कोई डोमेन नहीं)" नामक समूह के भीतर स्रोत सूची में प्रदर्शित किया जा रहा था। जैसा कि मैंने इसे पहली बार में याद किया लायक हो सकता है!
JMac

7
बस एक टिप। Chrome डीबगर इन छद्म-जावास्क्रिप्ट फ़ाइलों को स्रोत टैब में "(कोई डोमेन नहीं)" नोड तत्व में फेंकता है, कम से कम जब लोकलहोस्ट पर डीबगिंग होता है। यहीं से मैंने उन्हें पाया।
रॉबर्ट ओस्लर

1
सावधान रहने की एक और बात टिप्पणी शैली है। उस "/ / @ सोर्सल" के अपग्रेडेशन ने आपको "// # sourceURL =" और "/ * # sourceURL =" दोनों का उल्लेख दिया। ऐसा इसलिए है क्योंकि इसका उपयोग सीएसएस के लिए भी किया जा सकता है, जहां आपको ब्लॉक टिप्पणियों का उपयोग करना होगा, क्योंकि एकल-पंक्ति "//" टिप्पणियां मान्य नहीं हैं। मुझे आश्चर्य हुआ कि आप जावास्क्रिप्ट में "/ * sourceURL =" का उपयोग नहीं कर सकते। बस नजरअंदाज हो जाता है।
जॉल्स

2
Afaik, अधिकांश JavaScript मिनिअर इन लाइनों को उत्पादन चरणों से हटा देते हैं, जिससे यह उत्पादन बग निदान के लिए बेकार हो जाता है।
लूली सूनोल

16

आप उपयोग कर सकते हैं //# sourceURL=और //# sourceMappingURL=अपनी स्क्रिप्ट फ़ाइल या स्क्रिप्ट टैग के अंत में।

नोट: //@ sourceURL और //@ sourceMappingURLपदावनत हैं।



ज़रूर, लेकिन afaik सबसे minifiers उत्पादन चरणों पर इस लाइनों को हटा देगा।
लूली सूनोल

13

मैंने "// # sourceURL = filename.js" का उपयोग करने की कोशिश की, जिसे ओपी द्वारा एक वर्कअराउंड के रूप में सुझाया गया था, लेकिन यह तब भी मेरे लिए स्रोत पैनल में दिखाई नहीं दे रहा था जब तक कि यह पहले से ही मेरे टैब में मौजूद नहीं था जब इसने एक अपवाद उत्पन्न किया।

कोडिंग एक "डिबगर;" लाइन ने उस स्थान पर इसे तोड़ने के लिए मजबूर किया। फिर एक बार जब यह स्रोत पैनल में मेरे टैब में था, तो मैं सामान्य की तरह ब्रेकपॉइंट सेट कर सकता था और "डीबगर" हटा सकता था; लाइन।


6
यह स्रोत टैब के अंतर्गत (कोई भी डोमेन) सूची में नहीं दिखा सकता है।
Splaktar

1
मुझे भी उपयोग करने की आवश्यकता थी debugger;, और स्क्रिप्ट लोड होने के दौरान DevTools को खोलना था।
बमर

2
अतिरिक्त जानकारी के एक बिट: ब्राउज़र का उपयोग करें: // प्रोटोकॉल के रूप में //# sourceURL=browsertools://yourdomaingoeshere.com/action-openuwws.js
dolbysurnd

6

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

यदि आप उत्पादन चरणों में डिबगिंग कर रहे हैं, जहां debugger;आपके कोड में शायद कोई रेखा नहीं है , तो आप चार्ल्सप्रोसी के साथ स्थानीय मानचित्र पर अपनी "स्रोत फ़ाइल की डिबग्यूज़र लाइन के साथ ताज़ा प्रतिलिपि" बनाकर ऐसा कर सकते हैं।


2
इसने मुझे बचाया! कोई फर्क नहीं पड़ता कि मैंने क्या किया, जब तक मैं डिबगर कमांड में नहीं डाल देता, फ़ाइल दिखाई नहीं देती थी। इसके बाद मैंने डिबगर कमांड को हटाने के बाद भी पेज रीलोड और डिबगिंग सत्रों को जारी रखा।
माइक डेवेनी

0

जब IE में इस तरह की चीज़ को नीचे ट्रैक करने की कोशिश की जा रही है, तो मैं dev टूल्स (F12) को खोलता हूं और फिर कंसोल में निम्नलिखित लाइन का उपयोग करके ब्रेकपॉइंट को रखने के लिए जगह ढूंढता हूं:

debugger;myFunction();

वह डीबगर टैब पर स्विच करता है जहां आप myFunction()ब्रेकपॉइंट में कदम रख सकते हैं और सेट कर सकते हैं ।

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