Debuggen von Iframes mit Chrome-Entwicklertools

296

Ich möchte die Chrome-Entwicklerkonsole verwenden, um Variablen und DOM-Elemente in meiner App anzuzeigen, aber die App befindet sich in einer iframe(da es sich um eine OpenSocial-App handelt).

Die Situation ist also:

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

Gibt es eine Möglichkeit, iframeüber die Entwicklerkonsole auf die darin enthaltenen Ereignisse zuzugreifen ? Wenn ich es versuche, funktioniert document.getElementById("foo").somethinges nicht, wahrscheinlich weil sich das iframein einer anderen Domäne befindet.

Ich kann den iframeInhalt nicht in einem neuen Tab öffnen , da iframedieser auch mit der enthaltenen Site kommunizieren muss.

debugging iframe google-chrome Bemmu
quelle

Antworten:

546

In den Entwicklertools in Chrome befindet sich oben eine Leiste mit dem Namen Execution Context Selector(h / t felipe-sabino ) direkt unter den Registerkarten Elemente, Netzwerk, Quellen ..., die sich je nach Kontext der aktuellen Registerkarte ändert. Auf der Registerkarte "Konsole" befindet sich in dieser Leiste ein Dropdown-Menü, in dem Sie den Rahmenkontext auswählen können, in dem die Konsole ausgeführt werden soll. Wählen Sie Ihren Frame in dieser Dropdown-Liste aus und Sie befinden sich im entsprechenden Frame-Kontext. : D.

Chrome v59 Chrome Version 59

Chrome v33 Chrome Version 33

Chrome v32 und niedriger Chrome-Vorversion 32

Metagrapher
quelle
1
Dies scheint in Chrome 30.0.1599.101 gebrochen zu sein - alle Versuche, Code, Variablen usw. zu verwenden, stammen immer noch aus dem übergeordneten Kontext, nachdem ein Iframe ausgewählt wurde
Kevin
3
Die Benutzeroberfläche hat sich in Version 33 geändert. Ich bin mir nicht sicher, wo dies jetzt ist.
Malcr001
3
Gibt es dafür eine Tastenkombination?
Vlas Bashynskyi
2
Nur zu Ihrer Information, dass diese Registerkarte "Execution Context Selector" heißt, da ich einige Zeit gebraucht habe , um das herauszufinden :)
Felipe Sabino
1
Dies hat bei mir nicht funktioniert, wahrscheinlich weil ich einen Iframe in einer Erweiterung verwende. Ich musste in chrome: // extensions gehen und auf den iframe-Link neben dem Hintergrundlink für meine lokal entpackte Erweiterung klicken.
AlexMorley-Finch
9

Derzeit wird die Auswertung in der Konsole im Kontext des Hauptrahmens auf der Seite durchgeführt und es wird dieselbe Ursprungsrichtlinie wie im Hauptrahmen selbst angewendet. Dies bedeutet, dass Sie nur dann auf Elemente im Iframe zugreifen können, wenn dies im Hauptrahmen möglich ist. Sie können jedoch weiterhin Haltepunkte festlegen und Ihren Code mithilfe des Skriptbedienfelds debuggen.

Update: Dies ist nicht mehr wahr. Siehe die Antwort von Metagrapher .

Yury Semikhatsky
quelle
3
Dieses Problem ist noch offen ... fast ein Jahr später.
Glen Little
2

In meinem ziemlich komplexen Szenario funktioniert die akzeptierte Antwort dafür in Chrome nicht. Möglicherweise möchten Sie stattdessen den Firefox-Debugger (Teil der Firefox-Entwicklertools) ausprobieren, der alle 'Quellen' anzeigt, einschließlich derjenigen, die Teil eines iFrames sind

Izzy
quelle
Können Sie einen Screenshot hinzufügen? Ich kann dieSources
Shayan
1

Wenn der iFrame wie folgt auf Ihre Site verweist:

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

Sie können über diese Art von Dingen auf iFrame DOM zugreifen.

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