Отладка окон iframe с помощью инструментов разработчика Chrome

Я хотел бы использовать консоль разработчика Chrome для просмотра переменных и элементов DOM в моем приложении, но приложение существует внутри iframe (поскольку это приложение OpenSocial).

Итак, ситуация такова:

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

Есть ли способ получить доступ к тому, что происходит в этом iframe, из консоли разработчика? Если я попытаюсь сделать document.getElementById("foo").something, это не сработает, вероятно, потому, что iframe находится в другом домене.

Я не могу открыть содержимое iframe на новой вкладке, потому что iframe также должен иметь возможность разговаривать с содержащим его сайтом.


debugging google-chrome iframe
person Bemmu    schedule 18.07.2010    source источник

Ответы (4)


arrow_upward
585
arrow_downward

В инструментах разработчика в Chrome есть панель вверху, которая называется Execution Context Selector (h / t felipe-sabino), прямо под вкладками Elements, Network, Sources ..., которые меняются в зависимости от контекста текущей вкладки. На вкладке «Консоль» на этой панели есть раскрывающийся список, позволяющий выбрать контекст кадра, в котором будет работать консоль. Выберите свой кадр в этом раскрывающемся списке, и вы окажетесь в соответствующем контексте кадра. : D

Chrome v59 Chrome версии 59

Chrome v33 Chrome версии 33

Chrome v32 и ниже Chrome до версии 32

person Metagrapher    schedule 20.12.2011
comment
Кажется, это не работает в chrome 30.0.1599.101 - любые попытки использовать код, переменные и т.д. все еще происходят из родительского контекста после выбора iframe - person Kevin; 14.11.2013
comment
Интерфейс изменился в версии 33. Я не уверен, где это сейчас. - person Malcr001; 03.03.2014
comment
обновлено для более новых версий инструментов веб-разработчика. Оставить старое, поскольку люди все еще используют старые версии Chrome, и эти инструменты веб-разработчика существуют в других средах, которые могут не обновляться (например, в Weinre & Edge Inspect) - person Metagrapher; 05.03.2014
comment
Есть ли для этого сочетание клавиш? - person Vlas Bashynskyi; 27.09.2016
comment
Единственная проблема заключается в том, что вы можете начать просматривать журналы только после того, как перейдете в правый фрейм, это означает, что вы не сможете просматривать и проверять журналы и ошибки при загрузке. Есть ли способ указать браузеру не удалять и не показывать все журналы со всех фреймов или, по крайней мере, сохранять и показывать консоль для фрейма со всем старым / предыдущим выводом? - person Bizmate; 15.11.2016
comment
Честно говоря, никогда не было такой проблемы. Для меня console.log всегда работал, независимо от происхождения кадра. Однако объем вашего кода, выполняемого в консоли, определяется выбором фрейма. Тем не менее, инструменты разработчика можно настроить так, чтобы они не уничтожали журналы навигации. Похоже, это может быть то, что вы хотите. developers.google.com/web/tools/chrome-devtools/console - person Metagrapher; 17.11.2016
comment
Просто к сведению, что эта вкладка называется Селектор контекста выполнения так как мне потребовалось время, чтобы узнать :) - person Felipe Sabino; 16.12.2016
comment
@Metagrapher, почти 6 лет спустя, мы находимся на версии 59. Есть идеи, где это сейчас? Я не вижу свой iframe в верхнем раскрывающемся меню консоли. - person adamdport; 18.07.2017
comment
@adamdport не сильно отличается в v59, но вам нужно быть в консоли, чтобы увидеть это. Добавил новый скриншот. Возможно, вам потребуется убедиться, что у вашего iframe есть идентификатор или имя, иначе вы можете не узнать имя фрейма. - person Metagrapher; 29.07.2017
comment
Я хотел бы иметь возможность выполнять отладку исходного кода (особенно в исходных картах для транспилированного Angular / Typescript) в новом контексте, но изменение контекста выполнения, похоже, не меняет доступный исходный код в моих источниках. Есть идеи по этому поводу? - person Kevin Welker; 21.04.2018
comment
У меня это не сработало, вероятно, потому, что я использую iframe в расширении. Мне пришлось зайти в chrome: // extensions и щелкнуть ссылку iframe рядом с фоновой ссылкой для моего локально распакованного расширения. - person AlexMorley-Finch; 22.07.2019

arrow_upward
9
arrow_downward

В настоящее время оценка в консоли выполняется в контексте основного фрейма на странице и придерживается той же политики перекрестного происхождения, что и сам основной фрейм. Это означает, что вы не можете получить доступ к элементам в iframe, если только основной фрейм не может. Тем не менее, вы по-прежнему можете устанавливать точки останова и отлаживать код с помощью панели «Сценарии».

Обновление: это уже неверно. См. ответ Metagrapher.

person Yury Semikhatsky    schedule 19.07.2010
comment
Эта проблема все еще не решена ... почти год спустя. - person Glen Little; 28.04.2011

arrow_upward
2
arrow_downward

Когда iFrame указывает на ваш сайт следующим образом:

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

Вы можете получить доступ к iFrame DOM через такие вещи.

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

arrow_upward
2
arrow_downward

В моем довольно сложном сценарии принятый ответ о том, как это сделать в Chrome, у меня не работает. Вместо этого вы можете попробовать отладчик Firefox (часть инструментов разработчика Firefox), который показывает все «Источники», включая те, которые являются частью iFrame.

person Izzy    schedule 05.08.2016
comment
Можешь скриншот добавить? Я не могу найти Sources - person Shayan; 08.12.2019