Chrome geliştirici araçlarıyla iframe'lerde hata ayıklama

296

Uygulamamdaki değişkenlere ve DOM öğelerine bakmak için Chrome geliştirici konsolunu kullanmak istiyorum, ancak uygulama iframe(OpenSocial uygulaması olduğu için) içinde var.

Durum şu:

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

Bunun içinde olan şeylere iframegeliştirici konsolundan erişmenin bir yolu var mı ? Yapmaya document.getElementById("foo").somethingçalışırsam, muhtemelen iframefarklı bir etki alanında olduğu için işe yaramaz .

iframeİçeriği yeni bir sekmede açamıyorum çünkü iframeiçerdiği siteyle de konuşabilmek gerekiyor.

debugging iframe google-chrome

— Bemmu
kaynak

546

Chrome'daki Geliştirici Araçları'nda, üstte, Execution Context Selector(h / t felipe-sabino ) adı verilen ve mevcut sekmenin içeriğine bağlı olarak değişen Elements, Network, Sources ... sekmelerinin hemen altında bir çubuk vardır . Konsol sekmesindeyken, bu çubukta Konsolun çalışacağı çerçeve içeriğini seçmenizi sağlayan bir açılır menü bulunur. Bu açılır menüden çerçevenizi seçin, kendinizi uygun çerçeve bağlamında bulacaksınız. : D

Chrome v59 Chrome sürüm 59

Chrome v33 Chrome sürüm 33

Chrome v32 ve altı Chrome ön sürüm 32

— Metagrapher
kaynak

1

Bu, krom 30.0.1599.101'de kırılmış gibi görünüyor - kod, değişkenler vb. Kullanma girişimleri, bir iframe seçildikten sonra hala ana içerikten

— Kevin

3

Arayüz sürüm 33'te değişti. Bunun nerede olduğundan emin değilim.

— Malcr001

3

Bunun için bir klavye kısayolu var mı?

— Vlas Bashynskyi

2

Bu sekmenin "Yürütme Bağlam Seçici" olarak adlandırıldığı bir FYI, öğrenmem biraz zaman aldı çünkü :)

— Felipe Sabino

1

Bu benim için işe yaramadı, muhtemelen bir uzantıda iframe kullanıyorum. Chrome: // uzantılarına gitmem ve yerel olarak açılmamış uzantım için arka plan bağlantısının yanındaki iframe bağlantısını tıklamam gerekiyordu.

— AlexMorley-Finch

9

Şu anda konsoldaki değerlendirme, sayfadaki ana çerçeve bağlamında gerçekleştirilmektedir ve ana çerçevenin kendisiyle aynı köken politikasına uyar. Bu, ana çerçeve yapamadıkça iframe'deki öğelere erişemeyeceğiniz anlamına gelir. Yine de Komut Dosyaları panelini kullanarak kesme noktalarını ayarlayabilir ve kodunuzda hata ayıklayabilirsiniz.

Güncelleme: Bu artık doğru değil. Metagrafın cevabına bakınız .

— Yury Semikhatsky
kaynak

3

Bu sorun hala göze çarpıyor ... neredeyse bir yıl sonra.

— Glen Little

2

Oldukça karmaşık senaryomda, Chrome'da bunun nasıl yapılacağına ilişkin kabul edilen cevap benim için çalışmıyor. Bir iFrame'in parçası olanlar da dahil olmak üzere tüm 'Kaynakları' gösteren Firefox hata ayıklayıcısını (Firefox geliştirici araçlarının bir parçası) denemek isteyebilirsiniz.

— lzzy
kaynak

Ekran görüntüsü ekleyebilir misiniz? BulamıyorumSources

— Shayan

1

İFrame sitenizi şu şekilde gösterdiğinde:

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

İFrame DOM'a bu tür şeylerle erişebilirsiniz.

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

— Dave Aaron Smith
kaynak