क्रोम देव उपकरण का उपयोग कर तत्व का निरीक्षण करने में असमर्थ

Question

मेरे पास मूल HTML फ़ाइल (base.html) है और इसके अंदर एक iframe रहता है जो (iframe.html) का उपयोग करता है। Iframe केवल तब दिखाता है जब कोई निश्चित मेनू आइटम क्लिक किया जाता है। वे दोनों एक ही डोमेन पर होस्ट किए गए हैं।

base.html में मैं एक ऐसी स्क्रिप्ट शामिल कर रहा हूं जो बाहरी सेवा को इंगित करता है जिसका मैं उपयोग करता हूं। स्क्रिप्ट सहित एक ऑब्जेक्ट देता है जो मेरे पृष्ठ पर रहता है।

<script type="text/javascript" src="externalSite.com/myID.js"></script> 

iframe.html में मैं एक और स्क्रिप्ट उद्देश्य यह है कि

<script type="text/javascript" src="my_list_builder.js"></script> 

दिया जाता है की विशेषताओं में से कुछ पर आधारित मेनू बनाता my_list_builder.js के लिए कोड कुछ इस तरह दिखता है:

var myList = parent.externalAPI.getItems() 
var listBlock = "<div><ul>" 

for (var i = 0; i < myList.length; i++) { 
    listBlock += '<li><span>'+ myList[i].Name + '</span></li>'; 
} 

listBlock += '</ul></div>' 

$('someElement').append(listBlock); 

अब, यह कोड अपेक्षित ढंग से निष्पादित करता है और पृष्ठ जहाँ मैं इसे चाहते हैं listBlock कहते हैं, लेकिन जब मैं क्रोम में iframe के भीतर से कोई भी तत्व का निरीक्षण करने की कोशिश मैं ऐसा करने में असमर्थ हूँ इसलिए। आईफ्रेम निम्नतम स्तर तत्व है जिसका मैं निरीक्षण कर सकता हूं, लेकिन इसमें सामान्य ड्रॉपडाउन विकल्प नहीं है। अगर मैं my_list_builder.js को हटा देता हूं तो मैं बिना किसी परेशानी के आईफ्रेम में तत्वों का निरीक्षण करने में सक्षम हूं।

इस मुद्दे के कारण क्या हो सकता है पर कोई विचार?

Answer 1

अपने आईफ्रेम/गैर-आईफ्रेम स्क्रिप्ट के अंदर debugger कीवर्ड का उपयोग करने का प्रयास करें। बस लाइन पर debugger; डालने पर, क्रोम डेवलपर टूल्स (फ़ायरबग) में प्रोग्रामेटिक रूप से ब्रेकपॉइंट का कारण बनना चाहिए। अधिक जानकारी: https://developer.mozilla.org/en/JavaScript/Reference/Statements/debugger