Melakukan debug iframe dengan alat pengembang Chrome

296

Saya ingin menggunakan konsol pengembang Chrome untuk melihat variabel dan elemen DOM di aplikasi saya, tetapi aplikasi itu ada di dalam iframe(karena ini adalah aplikasi OpenSocial).

Jadi situasinya adalah:

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

Apakah ada cara untuk mengakses hal-hal yang terjadi iframedari konsol pengembang? Jika saya coba lakukan document.getElementById("foo").something, itu tidak berhasil, mungkin karena iframeada di domain yang berbeda.

Saya tidak dapat membuka iframekonten di tab baru, karena iframeharus dapat berbicara dengan situs yang mengandung juga.

debugging iframe google-chrome Bemmu
sumber

Jawaban:

546

Di Alat Pengembang di Chrome, ada bilah di bagian atas, yang disebut Execution Context Selector(h / t felipe-sabino ), tepat di bawah tab Elements, Network, Sources ..., yang berubah tergantung pada konteks tab saat ini. Ketika di tab Konsol ada dropdown di bar itu yang memungkinkan Anda untuk memilih konteks bingkai di mana Konsol akan beroperasi. Pilih frame Anda di drop down ini dan Anda akan menemukan diri Anda dalam konteks frame yang sesuai. : D

Chrome v59 Chrome versi 59

Chrome v33 Chrome versi 33

Chrome v32 & lebih rendah Chrome pra-versi 32

Metagrapher
sumber
1
Ini tampaknya rusak di chrome 30.0.1599.101 - segala upaya untuk menggunakan kode, variabel, dll masih dari konteks induk setelah memilih iframe
Kevin
3
Antarmuka telah berubah dalam versi 33. Saya tidak yakin di mana ini sekarang.
Malcr001
3
Apakah ada cara pintas keyboard untuk ini?
Vlas Bashynskyi
2
Hanya FYI bahwa tab ini disebut "Pemilih Konteks Eksekusi" karena saya butuh waktu untuk mencari tahu :)
Felipe Sabino
1
Ini tidak berhasil untuk saya, mungkin karena saya menggunakan iframe dalam ekstensi. Saya harus masuk ke chrome: // extensions dan klik tautan iframe di sebelah tautan latar belakang untuk ekstensi yang belum dibuka secara lokal.
AlexMorley-Finch
9

Saat ini evaluasi di konsol dilakukan dalam konteks bingkai utama di halaman dan mematuhi kebijakan lintas asal yang sama dengan kerangka utama itu sendiri. Ini berarti Anda tidak dapat mengakses elemen di iframe kecuali bingkai utama bisa. Anda masih dapat mengatur breakpoints dan men-debug kode Anda menggunakan panel Scripts.

Pembaruan: Ini tidak lagi benar. Lihat jawaban Metagrapher .

Yury Semikhatsky
sumber
3
Masalah ini masih luar biasa ... hampir setahun kemudian.
Glen Little
2

Dalam skenario saya yang cukup rumit, jawaban yang diterima untuk melakukan ini di Chrome tidak berfungsi untuk saya. Anda mungkin ingin mencoba debugger Firefox sebagai gantinya (bagian dari alat pengembang Firefox), yang menunjukkan semua 'Sumber', termasuk yang merupakan bagian dari iFrame

Izzy
sumber
Bisakah Anda menambahkan tangkapan layar? Saya tidak dapat menemukanSources
Shayan
1

Ketika iFrame menunjuk ke situs Anda seperti ini:

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

Anda dapat mengakses iFrame DOM melalui hal semacam ini.

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