Debug degli iframe con gli strumenti di sviluppo di Chrome

296

Vorrei utilizzare la console per sviluppatori di Chrome per esaminare le variabili e gli elementi DOM nella mia app, ma l'app esiste all'interno di un'app iframe(poiché si tratta di un'app OpenSocial).

Quindi la situazione è:

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

Esiste un modo per accedere a ciò che sta accadendo nella iframeconsole degli sviluppatori? Se provo a fare document.getElementById("foo").something, non funziona, probabilmente perché si iframetrova in un dominio diverso.

Non riesco ad aprire i iframecontenuti in una nuova scheda, perché è iframenecessario poter parlare anche con il sito contenente.

debugging iframe google-chrome

— Bemmu
fonte

546

Negli Strumenti per sviluppatori in Chrome, c'è una barra nella parte superiore, chiamata Execution Context Selector(h / t felipe-sabino ), proprio sotto le schede Elementi, Rete, Sorgenti ..., che cambia a seconda del 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 la cornice in questo menu a discesa e ti troverai nel contesto della cornice appropriato. : D

Chrome v59 Chrome versione 59

Chrome v33 Chrome versione 33

Chrome v32 e versioni precedenti Chrome pre-versione 32

— Metagrapher
fonte

1

Questo sembra essere rotto in Chrome 30.0.1599.101 - eventuali tentativi di utilizzare codice, variabili, ecc. Provengono ancora dal contesto padre dopo aver scelto un iframe

— Kevin,

3

L'interfaccia è cambiata nella versione 33. Non sono sicuro di dove sia adesso.

— Malcr001,

3

C'è una scorciatoia da tastiera per questo?

— Vlas Bashynskyi,

2

Solo un FYI che questa scheda si chiama "Execution Context Selector" come mi ci è voluto del tempo per scoprirlo :)

— Felipe Sabino

1

Questo non ha funzionato per me, probabilmente perché sto usando un iframe in un'estensione. Ho dovuto andare in chrome: // extensions e fare clic sul collegamento iframe accanto al collegamento in background per la mia estensione decompressa localmente.

— AlexMorley-Finch,

9

Attualmente la valutazione nella console viene eseguita nel contesto del frame principale nella pagina e aderisce alla stessa politica di origine incrociata del frame principale stesso. Ciò significa che non è possibile accedere agli elementi nell'iframe a meno che non sia possibile il frame principale. È comunque possibile impostare punti di interruzione ed eseguire il debug del codice utilizzando il pannello Script.

Aggiornamento: questo non è più vero. Vedi la risposta di Metagrapher .

— Yury Semikhatsky
fonte

3

Questo problema è ancora in sospeso ... quasi un anno dopo.

— Glen Little,

2

Nel mio scenario abbastanza complesso, la risposta accettata su come farlo in Chrome non funziona per me. Potresti voler provare invece il debugger di Firefox (parte degli strumenti per sviluppatori di Firefox), che mostra tutte le "Sorgenti", comprese quelle che fanno parte di un iFrame

— Izzy
fonte

Puoi aggiungere uno screenshot? Non riesco a trovareSources

— Shayan l'

1

Quando iFrame punta al tuo sito in questo modo:

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

Puoi accedere a iFrame DOM attraverso questo tipo di cose.

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

— Dave Aaron Smith
fonte