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

296

Я хотел бы использовать консоль разработчика 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 iframe google-chrome Bemmu
источник

Ответы:

546

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

Chrome v59 Chrome версия 59

Chrome v33 Chrome версия 33

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

Metagrapher
источник
1
Это похоже на ошибку в chrome 30.0.1599.101 - любые попытки использовать код, переменные и т. Д. Все еще исходят из родительского контекста после выбора iframe
Кевин,
3
Интерфейс изменился в версии 33. Я не уверен, где это сейчас.
Malcr001
3
Есть ли сочетание клавиш для этого?
Влас Башинский 27.09.16
2
Просто к сведению, что эта вкладка называется «Выбор контекста выполнения», так как мне потребовалось некоторое время, чтобы выяснить это :)
Фелипе Сабино
1
Это не сработало для меня, вероятно, потому что я использую iframe в расширении. Мне пришлось зайти в chrome: // extensions и щелкнуть ссылку iframe рядом с фоновой ссылкой для моего локально распакованного расширения.
AlexMorley-Finch
9

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

Обновление: это больше не правда. Смотрите ответ метаграфера .

Юрий Семихатский
источник
3
Эта проблема все еще не решена ... почти год спустя.
Глен Литтл
2

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

Иззи
источник
Можете добавить скриншот? Я не могу найтиSources
Шаян
1

Когда 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!"));
Дэйв Аарон Смит
источник