Debug degli iframe con gli strumenti di sviluppo di Chrome

249

Vorrei utilizzare la console degli sviluppatori di Chrome per esaminare le variabili e gli elementi DOM nella mia app, ma l'app esiste all'interno di una iframe (poiché è un'app OpenSocial).Debug degli iframe con gli strumenti di sviluppo di Chrome

quindi la situazione è:

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

Esiste un modo per accedere a cose che accadono in quel iframe dalla console sviluppatore? Se provo a fare d ocument.getElementById("foo").something, non funziona, probabilmente perché lo iframe si trova in un dominio diverso.

Non riesco ad aprire il contenuto di iframe in una nuova scheda, perché lo iframe deve essere in grado di parlare anche con il sito che lo contiene.

fonte

2010-07-18 Bemmu

472

Negli strumenti di sviluppo di Chrome, c'è un bar lungo la parte superiore, chiamato Execution Context Selector (h/t felipe-sabino), proprio sotto gli elementi, di rete, Fonti ... schede, che cambia a seconda della contesto della scheda corrente. Quando nella scheda Console è presente un menu a discesa in quella barra che consente di selezionare il contesto del frame in cui opererà la console. Seleziona il tuo frame in questo menu a discesa e ti troverai nel contesto del frame appropriato. : D

Chrome V59 Chrome version 59

Chrome v33 Chrome version 33

Chrome v32 & inferiore Chrome pre-version 32

fonte

2011-12-20 20:08:07 Metagrapher

Penso che dovresti cambiare la risposta corretta a quella. –

Questo sembra essere rotto in chrome 30.0.1599.101 - tutti i tentativi di usare codice, variabili, ecc sono ancora dal contesto padre dopo aver scelto un iframe – Kevin

per me. Versión 33.0.1750.117 beta-m Non sono sicuro se l'hanno patchato ... – Metagrapher

Attualmente la valutazione nella console viene eseguita nel contesto del frame principale nella pagina e aderisce allo stesso criterio di origine incrociata del frame principale stesso. Ciò significa che non è possibile accedere agli elementi nell'iframe a meno che il frame principale non lo sia. Puoi comunque impostare breakpoint e debuggare il tuo codice usando il pannello Scripts.

Aggiornamento: Questo non è più vero. Vedi Metagrapher's answer.

fonte

2010-07-19 06:13:34

Grazie Yury ... lo sapresti! – Cole

Ho archiviato un bug contro WebKit: https://bugs.webkit.org/show_bug.cgi?id=42554 –

Questo problema è ancora eccezionale ... quasi un anno dopo. –

Quando i punti iFrame al tuo sito come questo:

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

È possibile accedere a iFrame DOM attraverso questo genere di cose.

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

fonte

2011-09-20 16:24:21

Nel mio scenario abbastanza complesso la risposta accettata per sapere come fare questo in Chrome d non può funzionare per me Puoi provare il debugger di Firefox (parte degli strumenti di sviluppo di Firefox), che mostra tutte le "Sorgenti", comprese quelle che fanno parte di un iFrame

fonte

2016-08-05 01:13:08 Izzy

Debug degli iframe con gli strumenti di sviluppo di Chrome

risposta

Problemi correlati