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

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

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

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

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

Ответы

Ответ 1

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

Chrome v59 Chrome version 59

Chrome v33 Chrome version 33

Chrome v32 и ниже Chrome pre-version 32

Ответ 2

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

Обновление: Это уже не так. См. Ответ Metagrapher.

Ответ 3

Когда 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!"));

Ответ 4

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