Debugowanie elementów iframe za pomocą narzędzi programistycznych Chrome

296

Chciałbym użyć konsoli programisty Chrome do przeglądania zmiennych i elementów DOM w mojej aplikacji, ale aplikacja istnieje wewnątrz iframe(ponieważ jest to aplikacja OpenSocial).

Tak więc sytuacja wygląda następująco:

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

Czy jest jakiś sposób na dostęp do rzeczy, które się w tym dzieje iframez konsoli programisty? Jeśli spróbuję to zrobić document.getElementById("foo").something, to nie działa, prawdopodobnie dlatego, że iframejest w innej domenie.

Nie mogę otworzyć iframezawartości w nowej karcie, ponieważ iframemusi również móc porozmawiać z witryną zawierającą.

debugging iframe google-chrome Bemmu
źródło

Odpowiedzi:

546

W Narzędziach dla programistów w Chrome u góry znajduje się pasek, zwany Execution Context Selector(h / t felipe-sabino ), tuż pod kartami Elementy, Sieć, Źródła ..., który zmienia się w zależności od kontekstu bieżącej karty. Gdy na karcie Konsola znajduje się menu rozwijane na tym pasku, które pozwala wybrać kontekst ramki, w którym będzie działać konsola. Wybierz ramkę w tym menu rozwijanym, a znajdziesz się w odpowiednim kontekście ramki. :RE

Chrome v59 Wersja Chrome 59

Chrome v33 Wersja Chrome 33

Chrome w wersji 32 i starszej Wstępna wersja Chrome 32

Metagrapher
źródło
1
Wydaje się, że jest to zepsute w chrome 30.0.1599.101 - wszelkie próby użycia kodu, zmiennych itp. Są nadal z kontekstu nadrzędnego po wybraniu elementu iframe
Kevin
3
Interfejs zmienił się w wersji 33. Nie jestem pewien, gdzie to teraz jest.
Malcr001
3
Czy jest do tego skrót klawiaturowy?
Vlas Bashynskyi
2
Po prostu FYI, że ta karta nazywa się „Selekcją kontekstu wykonania”, ponieważ zajęło mi to trochę czasu, aby się dowiedzieć :)
Felipe Sabino
1
Nie działało to dla mnie, prawdopodobnie dlatego, że używam elementu iframe w rozszerzeniu. Musiałem przejść do rozszerzeń chrome: // i kliknąć link iframe obok linku w tle dla mojego lokalnie rozpakowanego rozszerzenia.
AlexMorley-Finch
9

Obecnie ocena w konsoli jest wykonywana w kontekście głównej ramki na stronie i jest zgodna z tą samą polityką krzyżowania, co sama ramka główna. Oznacza to, że nie można uzyskać dostępu do elementów w ramce iframe, chyba że główna rama może. Nadal możesz jednak ustawiać punkty przerwania i debugować kod za pomocą panelu Skrypty.

Aktualizacja: To już nie jest prawda. Zobacz odpowiedź Metagraphera .

Jurij Semikhatsky
źródło
3
Ten problem jest nadal nierozstrzygnięty ... prawie rok później.
Glen Little
2

W moim dość złożonym scenariuszu zaakceptowana odpowiedź, jak to zrobić w Chrome, nie działa dla mnie. Zamiast tego możesz wypróbować debuger Firefoksa (część narzędzi programistycznych Firefoksa), który pokazuje wszystkie „Źródła”, w tym te, które są częścią iFrame

Izzy
źródło
Czy możesz dodać zrzut ekranu? Nie mogę znaleźćSources
Shayan
1

Gdy iFrame wskazuje na twoją stronę w następujący sposób:

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

Możesz uzyskać dostęp do iFrame DOM za pomocą tego rodzaju rzeczy.

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