क्या WebKit, FireBug या IE8 Developer टूल जैसे कुछ डिबगर द्वारा गतिशील लोडिंग जावास्क्रिप्ट को डीबग करना संभव है?

Question 1

से मेरी हाल ही में सवाल , मैं पहले से ही गतिशील लोड हो रहा है आंशिक दृश्य के लिए कुछ जावास्क्रिप्ट समारोह बनाया। इसलिए, मैं किसी भी गतिशील लोडिंग जावास्क्रिप्ट को डीबग नहीं कर सकता। क्योंकि लोड किए गए सभी जावास्क्रिप्ट का मूल्यांकन "eval" फ़ंक्शन द्वारा किया जाएगा।

हालाँकि, मैंने वर्तमान स्क्रिप्ट के हेडर में स्क्रिप्ट को गतिशील रूप से बनाने के लिए निम्न स्क्रिप्ट का उपयोग करके नए जावास्क्रिप्ट को बनाने का कुछ तरीका पाया। सभी भरी हुई लिपियों को HTML DOM में प्रदर्शित किया जाएगा (जिसे खोजने के लिए आप किसी भी डीबगर का उपयोग कर सकते हैं)।

var script = document.createElement('script')
script.setAttribute("type","text/javascript")
script.text = "alert('Test!');";

document.getElementsByTagName('head')[0].appendChild(script);

वैसे, अधिकांश डीबगर (IE8 डेवलपर टूलबार, फायरबग और Google क्रोम) किसी भी गतिशील स्क्रिप्ट में ब्रेकपॉइंट सेट नहीं कर सकते हैं। क्योंकि पृष्ठ लोड होने के बाद पहली बार डिबग करने योग्य स्क्रिप्ट लोड की जानी चाहिए।

क्या आपके पास डायनेमिक स्क्रिप्ट सामग्री या फ़ाइल में डीबगिंग के लिए विचार है?

अद्यतन 1 - परीक्षण के लिए सोर्सकोड जोड़ें

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>    
    <title>Dynamic Loading Script Testing</title>
    <script type="text/javascript">
    function page_load()
    {       
        var script = document.createElement('script')
        script.setAttribute("id", "dynamicLoadingScript");
        script.setAttribute("type","text/javascript");
        script.text =   "var someVariable = 0;\n" +
                        "someVariable = window.outerWidth;\n" +
                        "alert(someVariable);";

        document.getElementsByTagName('head')[0].appendChild(script);
    }
    </script>
</head>
<body onload="page_load();">
</body>
</html>

जवाब से, मैं अभी फायरबग में इसका परीक्षण करता हूं। परिणाम नीचे छवियों की तरह प्रदर्शित किया जाना चाहिए।

ऑल्ट पाठ

कृपया "डायनेमिकलॉडिंगस्क्रिप्ट" स्क्रिप्ट देखें जो पेज लोड होने के बाद जोड़ी गई है।

alt text http://d7cgnq.bay.livefilestore.com/y1pz_RwqjgeVqe2mAlUZha0PalpPdP00X5AiwJcQhYaherAnbbnPDdZpb-_d1e96Q-14raraSdJVsVVJV4p6/jjj4Vjj4Vjj4Vjj4Vj5V5V5V5SVPJ4S4VJs4VJS4VJs4VJV4Szv4VJs4VJN4VJS4VJV4S4VJS4VJS4V4S2N5S2P2F4VJS4V4S2N5SV4J2P4P6N4VJP4P4VJN4P2P4VJN4JN4JN4VJN4VJN4JN4JN4JN4JN4JN4JN4JN4JN4JV एक एकेडमिक टैक्सटाइल का यह ऑनलाइन विज्ञापन होगा।

लेकिन यह FireBug के स्क्रिप्ट टैब में नहीं पाया जाता है

अपडेट 2 - डायनेमिक लोडिंग स्क्रिप्ट में डीबग ब्रेकपॉइंट बनाएं

ऑल्ट टेक्स्ट http://d7cgnq.bay.livefilestore.com/y1peKdIMOztXss-pc8PlJEmaGov_0ShYnLsuDdK5OLETbCGUpkX6Te29w0YW2pNKaD_0anaiFhGG2G2GP2GP2GP2GG2

ऑल्ट टेक्स्ट

उपरोक्त दोनों चित्र "डीबगर;" स्क्रिप्ट की कुछ लाइन में स्टेटमेंट डायनामिक लोडिंग स्क्रिप्ट में ब्रेकपॉइंट को फायर कर सकता है। हालांकि, दोनों डिबगर ब्रेकपॉइंट पर कोई कोड नहीं दिखाते हैं। इसलिए, ऐसा करना बेकार है।

धन्यवाद,

Question 2

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

सेट करने के लिए आवश्यक विशेषता है

//# sourceURL=dynamicScript.js

जहाँ dynamScript.js उस फ़ाइल का नाम है जिसे स्क्रिप्ट फ़ाइल ब्राउज़र में दिखाना चाहिए।

अधिक जानकारी यहाँ

पॉल आयरिश इसके बारे में संक्षेप में टूलींग और वेबएप डेवलपमेंट स्टैक पर अपनी उत्कृष्ट बातचीत में भी बात करते हैं

Question 3

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

Question 4

हां, Google Chrome का उपयोग करके गतिशील रूप से लोड किए गए जावास्क्रिप्ट को डीबग करना अब (अब) संभव है!

debugger;गतिशील रूप से भरी हुई जेएस फाइल के लिए अतिरिक्त या किसी अन्य विशेषता को जोड़ने की आवश्यकता नहीं है । डीबग करने के लिए बस नीचे दिए गए चरणों का पालन करें:

विधि 1:

मेरे टेक लीड ने गतिशील रूप से भरी हुई जावास्क्रिप्ट विधियों को डीबग करने का एक आसान तरीका दिखाया।

क्रोम का कंसोल खोलें और विधि का नाम और हिट दर्ज करें।
मेरे मामले में, यह है GetAdvancedSearchConditonRowNew
यदि जेएस विधि लोड की गई है तो यह विधि की परिभाषा दिखाएगा।

विधि की परिभाषा पर क्लिक करें और डीबगिंग के लिए पूरी JS फाइल खोली जाएगी :)

विधि 2:

एक उदाहरण के रूप में, मैं JS फाइल लोड कर रहा हूं जब मैं ajaxकॉल का उपयोग करके एक बटन पर क्लिक करता हूं ।

networkGoogle chrome dev टूल्स में टैब खोलें
एक नियंत्रण (पूर्व बटन) पर क्लिक करें जो कुछ जावास्क्रिप्ट फ़ाइल लोड करता है और कुछ जावास्क्रिप्ट फ़ंक्शन को कॉल करता है।
नेटवर्क टैब देखें और उस JS फ़ंक्शन को देखें (मेरे मामले में RetrieveAllTags?_=1451974716935)
इसके ऊपर होवर करें initiaterऔर आपको अपनी गतिशील रूप से भरी हुई जेएस फाइल (उपसर्ग के साथ VM*) मिलेगी ।

उस पर क्लिक करें VM*खोलने के लिए फ़ाइल ।
डिबगर जहां भी आप चाहें उस फाइल में डालें: डी

Question 5

मैं उस उद्देश्य के लिए Google क्रोम का उपयोग कर रहा हूं।

स्क्रिप्ट टैब पर क्रोम में आप 'सभी अपवादों पर विराम' सक्षम कर सकते हैं

यहां छवि विवरण दर्ज करें

और फिर अपने कोड लाइन में कहीं डाल दिया try{throw ''} catch(e){} । जब यह इस रेखा तक पहुंच जाएगा तो क्रोम निष्पादन को रोक देगा।

संपादित करें: संशोधित छवि तो यह स्पष्ट हो जाएगा कि मैं किस बारे में बात कर रहा हूं।

Question 6

मुझे लगता है कि आपको eval'd कोड को इस तरह "नाम" देने की आवश्यकता हो सकती है:

http://blog.getfirebug.com/2009/08/11/give-your-eval-a-name-with-sourceurl/

यदि आप करते हैं, तो मुझे लगता है कि यह debugger"अपडेट 2" से दृष्टिकोण की संभावना है तब काम करना चाहिए।

Question 7

अद्यतन : असमर्थित ब्राउज़रों पर त्रुटियों से बचने के लिए sourceUrl के लिए वाक्यविन्यास (# द्वारा प्रतिस्थापित किया गया है) बदला गया है (पढ़ें: IE)। विवरण

Question 8

आपके द्वारा प्रदान किए गए कोड के साथ Chrome (12.0.742.112) का उपयोग करना इस तरह एक डिबगर स्टेटमेंट प्रदान करता है

    script.text =   "debugger;var someVariable = 0;\n" +
    "someVariable = window.outerWidth;\n" +
    "alert(someVariable);";

chrome_debugger

मेरे लिये कार्य करता है।

मुझे निष्पादित करने से पहले कुछ जावास्क्रिप्ट (सभी jQuery चयनकर्ता के दायरे को वर्तमान आंशिक> दृश्य div तक सीमित करने) की आवश्यकता है।

यदि आप HTML निकाय में स्क्रिप्ट तत्व बनाने के बजाय अपने आंशिक दृश्य पर किसी ईवेंट में चयनकर्ता परिवर्तन को बाध्य करते हैं, तो यह अधिक मूर्त हो सकता है।

आप ऐसा कुछ कर सकते हैं

   (function(j)(
      var limiting_selector = '';
      j(".partial_views").bind('focusin over',function(e){
         limiting_selector = j(this).attr('someattr') // or j(this).data('limiting-selector')
      }).bind('focusout out',function(e){
         limiting_selector = '';
      });
      // And then go on with
      // j(limiting_selector+' .someclass')
   ))(jQuery)

यह कोड हमेशा सभी jQuery के चयन संचालन के लिए एक सीमित चयनकर्ता को जोड़ देगा जबकि माउस एक निश्चित तत्व में है जिसे HTML को गड़बड़ करने के लिए नहीं दिया गया है।

(फिर भी लगता है हैकर, हो सकता है किसी के पास बेहतर उपाय हो)

चियर्स

Question 9

फायरबग में, आपको उस स्क्रिप्ट को पृष्ठ लोड होने के बाद देखने में सक्षम होना चाहिए और स्क्रिप्ट इंजेक्ट की गई है। जब आप करते हैं, तो आप उचित स्थान पर एक ब्रेकपॉइंट सेट कर सकते हैं, और जब आप पृष्ठ को ताज़ा करते हैं, तो इसे संरक्षित किया जाएगा।

Question 10

गतिशील रूप से भरी हुई जावास्क्रिप्ट को अभी भी ब्राउज़र द्वारा पार्स किया जाना है, यह वह जगह है जहाँ WebKit, या FireBug डिबगर को बैठाया जाता है, इसलिए यह डिबगर के अधीन है, चाहे जो भी हो, मुझे लगता है कि IE8 में डेवलपर टूल के लिए भी यही है।

तो आपका कोड विषय डिबगर का है, इसलिए जहां आपकी समस्या हो रही है, वह उस फ़ाइल या पाठ में नहीं होगी यदि वह त्रुटि नहीं करता है

दूसरी बात script.text = "alert('Test!');";मान्य नहीं है, इसलिए यह उन सभी ब्राउज़रों में काम नहीं करेगा जो आप चाहते हैंscript.innerHTML = "alert('Test!');";

भले ही इसका आंतरिक HTML इसका मतलब है कि HTML टैग के अंदर कोड नहीं HTML केवल अंदर का उपयोग सबसे अधिक लोग इसका उपयोग करते हैं ताकि यह गलत हो जाए

अद्यतन दो के लिए

और क्रोम I का उपयोग करके दूसरे अपडेट पर मैंने ऐसा किया

के बारे में जाने के लिए: खाली ऊपर कंसोल खोलें और अतीत में

var script = document.createElement('script')
script.setAttribute("type","text/javascript")
script.innerHTML = "alert('Test!');debugger;";

document.getElementsByTagName('head')[0].appendChild(script);

तब यह स्क्रिप्ट टैब को तोड़ देगा और खोल देगा: रिक्त दिखाया जाएगा (देखने के लिए कुछ नहीं)

फिर दाहिने हाथ की तरफ कॉल स्टैक सूची दिखाएं, फिर दूसरे (अनाम फ़ंक्शन) पर क्लिक करें और यह आपको दिखाएगा।

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

Question 11

Google Chrome (या सफारी ) डेवलपर्स टूल का उपयोग करके , आप लाइन द्वारा जावास्क्रिप्ट लाइन चला सकते हैं।

डेवलपर टूल >लिपियों को >चुनें कि आप किस स्क्रिप्ट >को दाईं ओर साइन पॉज़ करना चाहते हैं या लाइन नंबर पर क्लिक करके ब्रेकपॉइंट सेट करें

Question 12

एक विकल्प मुझे अपने कोड में एक कंसोल.लॉग ('') स्टेटमेंट जोड़कर उपयोग करना है। एक बार जब यह कथन कंसोल में दिखाई देता है तो एक पंक्ति संख्या इसके साथ जुड़ी होती है। आप स्रोत में स्थान पर जाने और ब्रेकपॉइंट सेट करने के लिए उस नंबर पर क्लिक कर सकते हैं। इस दृष्टिकोण में कमी यह है कि ब्रेकप्वाइंट को पेज रीलोड्स में संरक्षित नहीं किया गया है और आपको डिबगर जोड़ने से पहले कोड के माध्यम से चलना होगा।

Question 13

वर्तमान Google Chrome ब्राउज़र या अन्य आधुनिक ब्राउज़रों के लिए, आप निम्न छवियों की तरह डेवलपर टूल के साथ किसी भी मूल्यांकन किए गए कोड को आसानी से खोज सकते हैं।

कुछ डायनामिक लोडिंग फ़ाइल का अनुकरण करें।

प्रेस Ctrl + Shift + एफ में स्रोत टैब और इसके बाद के संस्करण समारोह के लिए खोज।

इसका परीक्षण करने के लिए कुछ ब्रेकपॉइंट बनाएं और फ़ंक्शन निष्पादित करें।