การดีบัก iframe ด้วยเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์ Chrome

296

ฉันต้องการใช้คอนโซลนักพัฒนาซอฟต์แวร์ Chrome เพื่อดูตัวแปรและองค์ประกอบ DOM ในแอปของฉัน แต่มีแอปอยู่ภายใน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 ) ภายใต้แท็บองค์ประกอบ, เครือข่าย, แหล่งที่มา ... ซึ่งจะเปลี่ยนไปตามบริบทของแท็บปัจจุบัน เมื่ออยู่ในแท็บ Console จะมีดรอปดาวน์ในแถบนั้นที่ให้คุณเลือกบริบทเฟรมที่ Console จะทำงาน เลือกเฟรมของคุณจากดรอปดาวน์นี้และคุณจะพบว่าตัวเองอยู่ในบริบทเฟรมที่เหมาะสม : D

Chrome v59 Chrome รุ่น 59

Chrome v33 Chrome รุ่น 33

Chrome v32 & ต่ำกว่า Chrome รุ่นก่อน 32

— Metagrapher
แหล่งที่มา

1

ดูเหมือนว่าจะใช้งานไม่ได้ใน Chrome 30.0.1599.101 - ความพยายามในการใช้รหัสตัวแปร ฯลฯ ยังคงมาจากบริบทหลักหลังจากเลือก iframe

— Kevin

3

อินเทอร์เฟซมีการเปลี่ยนแปลงในรุ่น 33 ฉันไม่แน่ใจว่าตอนนี้อยู่ที่ไหน

— Malcr001

3

มีแป้นพิมพ์ลัดสำหรับสิ่งนี้หรือไม่

— Vlas Bashynskyi

2

เพียง FYI ว่าแท็บนี้จะเรียกว่า"บริบทการปฏิบัติการเลือก"ในขณะที่มันเอาฉันบางเวลาเพื่อหา :)

— เฟลิซาบิ

1

สิ่งนี้ไม่ได้ผลสำหรับฉันอาจเป็นเพราะฉันใช้ iframe ในส่วนขยาย ฉันต้องเข้าไปที่ chrome: // Extensions และคลิกที่ลิงค์ iframe ถัดจากลิงค์พื้นหลังสำหรับส่วนขยายที่ไม่ได้แพ็คในเครื่อง

— AlexMorley-Finch

9

ปัจจุบันการประเมินผลในคอนโซลจะดำเนินการในบริบทของเฟรมหลักในหน้าและจะปฏิบัติตามนโยบายข้ามแหล่งเดียวกันกับเฟรมหลักเอง ซึ่งหมายความว่าคุณไม่สามารถเข้าถึงองค์ประกอบใน iframe ได้เว้นแต่ว่าเฟรมหลักจะสามารถทำได้ คุณยังคงสามารถตั้งค่าเบรกพอยต์ในและแก้จุดบกพร่องรหัสของคุณโดยใช้แผงสคริปต์แม้ว่า

อัปเดต:นี่ไม่เป็นความจริงอีกต่อไป ดูคำตอบของ Metagrapher

— Yury Semikhatsky
แหล่งที่มา

3

ปัญหานี้ยังคงโดดเด่น ... เกือบหนึ่งปีต่อมา

— เกลน Little

2

ในสถานการณ์ที่ค่อนข้างซับซ้อนของฉันคำตอบที่ยอมรับได้สำหรับวิธีการทำเช่นนี้ใน Chrome ไม่ทำงานสำหรับฉัน คุณอาจต้องการลองใช้ดีบักเกอร์ Firefox แทน (เป็นส่วนหนึ่งของเครื่องมือสำหรับนักพัฒนา Firefox) ซึ่งจะแสดง 'แหล่งที่มา' ทั้งหมดรวมถึงที่เป็นส่วนหนึ่งของ 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!"));

— Dave Aaron Smith
แหล่งที่มา