Chrome डेवलपर टूल के साथ iframes को डीबग करना

296

मैं अपने एप्लिकेशन में चर और DOM तत्वों को देखने के लिए Chrome डेवलपर कंसोल का उपयोग करना चाहता हूं, लेकिन ऐप एक iframe(यह एक OpenSocial ऐप है) के अंदर मौजूद है ।

तो स्थिति यह है:

<containing site>
 <iframe id='foo' src='different domain'>
  ... my app ...
 </iframe>
</containing site>

क्या iframeडेवलपर कंसोल से इसमें होने वाली चीजों तक पहुंचने का कोई तरीका है ? अगर मैं करने की कोशिश करता हूं document.getElementById("foo").something, तो यह काम नहीं करता है, शायद इसलिए कि iframeयह अलग डोमेन में है।

मैं iframeसामग्री को एक नए टैब में नहीं खोल सकता , क्योंकि iframeजरूरत पड़ने वाले साइट से भी बात करने में सक्षम होना चाहिए।

debugging iframe google-chrome

— Bemmu
स्रोत

546

Chrome में डेवलपर टूल में, तत्वों, नेटवर्क, स्रोतों ... टैब के अंतर्गत, शीर्ष Execution Context Selector(H / t felipe-sabino ) नामक शीर्ष के साथ एक बार होता है , जो वर्तमान टैब के संदर्भ के आधार पर बदलता है। जब कंसोल टैब में उस बार में एक ड्रॉपडाउन होता है जो आपको फ्रेम संदर्भ का चयन करने की अनुमति देता है जिसमें कंसोल काम करेगा। इस ड्रॉप डाउन में अपने फ्रेम का चयन करें और आप अपने आप को उपयुक्त फ्रेम संदर्भ में पाएंगे। : डी

क्रोम v59 क्रोम संस्करण 59

क्रोम v33 क्रोम संस्करण 33

Chrome v32 और निचला क्रोम पूर्व संस्करण 32

— Metagrapher
स्रोत

1

ऐसा लगता है कि क्रोम 30.0.1599.101 में टूट गया है - कोड, चर इत्यादि का उपयोग करने का कोई भी प्रयास एक iframe चुनने के बाद भी मूल संदर्भ से है

— केविन

3

इंटरफ़ेस संस्करण 33 में बदल गया है। मुझे यकीन नहीं है कि यह अब कहां है।

— Malrr001

3

क्या इसके लिए कोई कीबोर्ड शॉर्टकट है?

— व्लाद बशेंस्की

2

सिर्फ एक FYI करें कि इस टैब को "एक्ज़ीक्यूटिव कॉन्टेक्ट सिलेक्टर" कहा जाता है क्योंकि मुझे इसका पता लगाने में कुछ समय लगा :)

— फेलिप सबिनो

1

यह मेरे लिए काम नहीं किया, शायद इसलिए कि मैं एक विस्तार में एक iframe का उपयोग कर रहा हूं। मुझे क्रोम: // एक्सटेंशन में जाना था और अपने स्थानीय रूप से अनकैप्ड एक्सटेंशन के लिए पृष्ठभूमि लिंक के बगल में iframe लिंक पर क्लिक करना था।

— एलेक्समोरले-फिंच

9

वर्तमान में कंसोल में मूल्यांकन पृष्ठ में मुख्य फ्रेम के संदर्भ में किया जाता है और यह उसी क्रॉस-मूल नीति का पालन करता है जो मुख्य फ्रेम के रूप में है। इसका मतलब यह है कि आप iframe में तत्वों का उपयोग नहीं कर सकते जब तक कि मुख्य फ्रेम नहीं कर सकता। यद्यपि आप अभी भी स्क्रिप्ट पैनल का उपयोग करके अपने कोड में ब्रेकपॉइंट सेट कर सकते हैं और अपना कोड डिबग कर सकते हैं।

अद्यतन: यह अब सच नहीं है। देखें पैराग्राफर का जवाब ।

— यूरी सेमिकहात्स्की
स्रोत

3

यह समस्या अभी भी बकाया है ... लगभग एक साल बाद।

— ग्लेन लिटिल

2

मेरे काफी जटिल परिदृश्य में Chrome में ऐसा करने के लिए स्वीकृत उत्तर मेरे लिए काम नहीं करता है। आप इसके बजाय फ़ायरफ़ॉक्स डिबगर (फ़ायरफ़ॉक्स डेवलपर टूल्स का हिस्सा) आज़माना चाह सकते हैं, जो सभी 'स्रोतों' को दिखाता है, जिनमें एक iFrame का हिस्सा भी शामिल है

— इज़ी
स्रोत

क्या आप एक स्क्रीनशॉट जोड़ सकते हैं? मैं Sources

— Shayan

1

जब iFrame आपकी साइट को इस तरह इंगित करता है:

<html>
  <head>
    <script type="text/javascript" src="/jquery.js"></script>
  </head>
  <body>
    <iframe id="my_frame" src="/wherev"></iframe>
  </body>
</html>

आप इस तरह की चीज़ के माध्यम से iFrame DOM तक पहुँच सकते हैं।

var iframeBody = $(window.my_frame.document.getElementsByTagName("body")[0]);
iframeBody.append($("<h1/>").html("Hello world!"));

— डेव आरोन स्मिथ
स्रोत