ক্রোম বিকাশকারী সরঞ্জামগুলির সাথে iframes ডিবাগ করা

296

আমি আমার অ্যাপ্লিকেশনে ভেরিয়েবল এবং ডিওএম উপাদানগুলি দেখার জন্য Chrome বিকাশকারী কনসোলটি ব্যবহার করতে চাই তবে অ্যাপটি একটির অভ্যন্তরে বিদ্যমান iframe(যেহেতু এটি একটি ওপেনসোকাল অ্যাপ্লিকেশন)।

সুতরাং পরিস্থিতিটি হ'ল:

<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

ক্রোম-এর বিকাশকারী সরঞ্জামগুলিতে, শীর্ষে একটি বার রয়েছে, যার নাম Execution Context Selector(এইচ / টি ফেলিপ-সাবিনো ) রয়েছে, কেবলমাত্র উপাদানসমূহ, নেটওয়ার্ক, উত্স ... ট্যাবগুলির অধীনে, যা বর্তমান ট্যাবের প্রেক্ষাপটের উপর নির্ভর করে পরিবর্তিত হয়। কনসোল ট্যাবে যখন সেই বারটিতে একটি ড্রপডাউন থাকে যা আপনাকে ফ্রেম প্রসঙ্গটি নির্বাচন করতে দেয় যেখানে কনসোলটি পরিচালনা করবে। আপনার ড্রপ ডাউন এ আপনার ফ্রেম নির্বাচন করুন এবং আপনি উপযুক্ত ফ্রেম প্রসঙ্গে নিজেকে খুঁজে পাবেন will : ডি

ক্রোম ভি59 ক্রোম সংস্করণ 59

ক্রোম ভি 33 ক্রোম সংস্করণ 33

ক্রোম ভি 32 এবং কম ক্রোম প্রাক সংস্করণ 32

— Metagrapher
সূত্র

1

এটি ক্রোম 30.0.1599.101 এ ভাঙ্গা বলে মনে হচ্ছে - কোড, ভেরিয়েবল ইত্যাদি ব্যবহারের যে কোনও প্রয়াস এখনও আইফ্রেমে বেছে নেওয়ার পরে পিতামাতার প্রেক্ষাপট থেকে রয়েছে

— কেভিন

3

ইন্টারফেসটি 33 সংস্করণে পরিবর্তিত হয়েছে this এখন কোথায় তা আমি নিশ্চিত নই।

— Malcr001

3

এর কি কিবোর্ড শর্টকাট আছে?

— ভ্লাস বাশিয়ানস্কি

2

এই ট্যাবটিকে "এক্সিকিউশন কনটেক্সট সিলেক্টর" বলা হয় কেবলমাত্র একটি FYI, কারণ এটি খুঁজে পেতে আমাকে কিছুটা সময় লেগেছে :)

— ফিলিপ সাবিনো

1

এটি আমার পক্ষে কার্যকর হয়নি কারণ সম্ভবত আমি কোনও এক্সটেনশনে আইফ্রেম ব্যবহার করছি। আমাকে ক্রোম: // এক্সটেনশনে যেতে হয়েছিল এবং আমার স্থানীয়ভাবে আনপ্যাক করা এক্সটেনশনের জন্য ব্যাকগ্রাউন্ড লিঙ্কের পাশে আইফ্রেমে লিঙ্কটি ক্লিক করতে হয়েছিল।

— অ্যালেক্সমারলি-ফিঞ্চ

9

বর্তমানে কনসোলে মূল্যায়ন পৃষ্ঠার মূল ফ্রেমের প্রসঙ্গে করা হয় এবং এটি মূল ফ্রেম হিসাবে একই ক্রস-অরিজিন নীতি অনুসরণ করে। এর অর্থ হ'ল মূল ফ্রেম না পারলে আপনি আইফ্রেমে উপাদানগুলি অ্যাক্সেস করতে পারবেন না। আপনি এখনও ব্রেকপয়েন্টগুলি সেট করতে পারেন এবং স্ক্রিপ্টস প্যানেলটি ব্যবহার করে আপনার কোডটি ডিবাগ করতে পারেন।

আপডেট: এটি আর সত্য নয়। দেখুন Metagrapher এর উত্তর ।

— ইউরি সেমিখাতস্কি
সূত্র

3

এই সমস্যা এখনও অসামান্য ... প্রায় এক বছর পরে।

— গ্লেন লিটল

2

আমার মোটামুটি জটিল দৃশ্যে ক্রোমে কীভাবে এটি করা যায় তার জন্য গৃহীত উত্তর আমার পক্ষে কাজ করে না। আপনি এর পরিবর্তে ফায়ারফক্স ডিবাগার চেষ্টা করতে পারেন (ফায়ারফক্স বিকাশকারী সরঞ্জামগুলির অংশ), যা আইফ্রেমের অংশ হিসাবে সমস্ত 'উত্স' দেখায়

— Izzy
সূত্র

আপনি কি একটি স্ক্রিনশট যুক্ত করতে পারেন? আমি খুঁজে পাই নাSources

— শায়ান

1

যখন আইফ্রেম আপনার সাইটের দিকে এটি নির্দেশ করে:

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

আপনি এই জাতীয় জিনিসটির মাধ্যমে আইফ্রেমে ডোম অ্যাক্সেস করতে পারেন।

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

— ডেভ অ্যারন স্মিথ
সূত্র