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

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

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

   ... my app ...   

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

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

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

Chrome v59 Chrome версии 59

Chrome v33 Chrome версии 33

Chrome v32 и ниже Предварительная версия Chrome 32

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

Обновление: это уже не так. См . Ответ Метаграфера .

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

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

         

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

 var iframeBody = $(window.my_frame.document.getElementsByTagName("body")[0]); iframeBody.append($("

").html("Hello world!"));
  • Невозможно установить точку останова Java в Intellij IDEA
  • Как использовать файлы PDB
  • Как добавить точку останова в objc_exception_throw?
  • Отладчик Android Studio выделяет неправильные строки
  • Что такое трассировка стека, и как я могу использовать ее для отладки ошибок моего приложения?
  • Проверьте, запущено ли приложение из Visual Studio
  • Шаг через исходный код JDK в IntelliJ IDEA
  • Как я могу отлаживать приложения в Java Web Start (JNLP)?
  • Может ли атрибут DebuggerDisplay применяться к типам, которые не принадлежат?
  • Spring RestTemplate - как включить полную отладку / протоколирование запросов / ответов?
  • Отладить собственный код в Android-библиотеке
  • Давайте будем гением компьютера.