Налагодження iframe з інструментами для розробників 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

— Бемму
джерело

546

У Інструментах для розробників у Chrome вгорі є смужка, яка називається Execution Context Selector(h / t felipe-sabino ), прямо під вкладками «Елементи, мережа», «Джерела», яка змінюється залежно від контексту поточної вкладки. На вкладці "Консоль" в цьому рядку є спадне меню, яке дозволяє вибрати контекст кадру, в якому Консоль буде працювати. Виберіть свій кадр у цьому спадному меню, і ви опинитесь у відповідному контексті кадру. : D

Chrome v59 Chrome версія 59

Chrome v33 Версія 33 Chrome

Chrome v32 і новіші версії Попередня версія Chrome 32

— Метаграф
джерело

1

Здається, це зламано в хромі 30.0.1599.101 - будь-які спроби використання коду, змінних тощо залишаються з батьківського контексту після вибору iframe

— Кевін

3

Інтерфейс змінився у версії 33. Я не впевнений, де це зараз.

— Malcr001

3

Чи існує комбінація клавіш для цього?

— Влас Башинський

2

Просто FYI, що ця вкладка називається "Вибір контексту виконання", тому що мені знадобилося деякий час, щоб дізнатися :)

— Феліпе Сабіно

1

Це не спрацювало для мене, ймовірно, тому, що я використовую iframe в розширенні. Мені довелося зайти в розширення chrome: // та натиснути посилання 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!"));

— Дейв Аарон Сміт
джерело