गतिशील रूप से जोड़े गए जावास्क्रिप्ट फ़ाइलों को डिबगिंग

Question

मेरे पास एक वेब एप्लिकेशन है जो स्क्रीन को रीफ्रेश करने से बचने के लिए वास्तविक समय में AJAX का उपयोग करके विकल्पों के रूप में चुनने के आधार पर जावास्क्रिप्ट फ़ाइलों को गतिशील रूप से जोड़ता है।

अब मैं इन गतिशील रूप से जोड़े गए जावास्क्रिप्ट फ़ाइलों को डीबग करने का प्रयास कर रहा हूं और फ़ायरफ़ॉक्स के लिए Google क्रोम के डेवलपर टूल और फायरबग की प्लगइन दोनों की कोशिश की है, और ध्यान दिया है कि गतिशील रूप से जोड़ा गया जावास्क्रिप्ट "फ़ाइलें" प्रकट नहीं होता है, इसलिए मैं नहीं चुन सकता उन्हें ब्रेकपॉइंट्स इत्यादि जोड़ने के लिए

तो, क्या इसके लिए कोई समाधान है, यानी डीबगिंग गतिशील रूप से जावास्क्रिप्ट फ़ाइलों को डिबग करना?

Answer 1

आप अपनी गतिशील स्क्रिप्ट में debugger; कथन जोड़ सकते हैं जहां आप ब्रेकपॉइंट सेट करना चाहते हैं। डेवलपर थ्रेड यूआई खोले जाने पर निष्पादन थ्रेड कथन तक पहुंचने पर यह नियमित ब्रेकपॉइंट की तरह क्रोम स्टॉप कर देगा।

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

Answer 2

sourceURL देखें जो डेवटूल को इंगित करने का एक तरीका है जिसे वास्तविक फ़ाइलों के रूप में eval'd तारों का इलाज करना चाहिए। यह वही करता है जो आप खोज रहे हैं।

स्ट्रिंग के अंत में evaled किया जाना है, इस फार्म के टिप्पणी छोड़:

//# sourceURL=app/js/myapp.js 

वहाँ से, Chrome DevTools (और Firebug) एक "वास्तविक फ़ाइल" के रूप में इस व्यवहार करेगा।

Much more explanation here और HTML5 रॉक्स में an article और sourceURL demo है।