Gỡ lỗi iframe với các công cụ dành cho nhà phát triển Chrome

296

Tôi muốn sử dụng bảng điều khiển dành cho nhà phát triển Chrome để xem xét các biến và các thành phần DOM trong ứng dụng của tôi, nhưng ứng dụng tồn tại bên trong iframe(vì đó là ứng dụng OpenSocial).

Vì vậy, tình hình là:

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

Có cách nào để truy cập những thứ xảy ra trong đó iframetừ bảng điều khiển dành cho nhà phát triển không? Nếu tôi cố gắng thực hiện document.getElementById("foo").something, nó không hoạt động, có lẽ vì iframenó thuộc một miền khác.

Tôi không thể mở iframenội dung trong một tab mới, vì iframenhu cầu có thể nói chuyện với trang web chứa.

debugging iframe google-chrome

— Bemmu
nguồn

546

Trong Công cụ dành cho nhà phát triển trong Chrome, có một thanh dọc trên cùng, được gọi là Execution Context Selector(h / t felipe-sabino ), ngay dưới các tab Element, Network, Nguồn ..., thay đổi tùy theo ngữ cảnh của tab hiện tại. Khi trong tab Bảng điều khiển có một danh sách thả xuống trong thanh đó cho phép bạn chọn bối cảnh khung trong đó Bảng điều khiển sẽ hoạt động. Chọn khung hình của bạn trong danh sách thả xuống này và bạn sẽ thấy mình trong bối cảnh khung hình phù hợp. : D

Chrome v59 Chrome phiên bản 59

Chrome v33 Chrome phiên bản 33

Chrome v32 & thấp hơn Chrome phiên bản trước 32

— Siêu âm
nguồn

1

Điều này dường như bị phá vỡ trong chrome 30.0.1599.101 - mọi nỗ lực sử dụng mã, biến, v.v. vẫn từ bối cảnh cha mẹ sau khi chọn iframe

— Kevin

3

Giao diện đã thay đổi trong phiên bản 33. Tôi không chắc đây là đâu.

— Malcr001 ngày

3

Có một phím tắt cho điều này?

— Vlas Bashynskyi

2

Chỉ là một FYI mà tab này được gọi là "Bộ chọn bối cảnh thực thi" vì tôi phải mất một thời gian để tìm hiểu :)

— Felipe Sabino

1

Điều này không hiệu quả với tôi, có lẽ vì tôi đang sử dụng iframe trong tiện ích mở rộng. Tôi đã phải truy cập chrome: // extend và nhấp vào liên kết iframe bên cạnh liên kết nền cho tiện ích mở rộng được giải nén cục bộ của tôi.

— AlexMorley-Finch

9

Hiện tại việc đánh giá trong bảng điều khiển được thực hiện trong ngữ cảnh của khung chính trong trang và nó tuân thủ chính sách nguồn gốc chéo giống như chính khung chính. Điều này có nghĩa là bạn không thể truy cập các phần tử trong iframe trừ khi khung chính có thể. Mặc dù vậy, bạn vẫn có thể đặt điểm dừng và gỡ lỗi mã của mình bằng bảng ScScript.

Cập nhật: Điều này không còn đúng nữa. Xem câu trả lời của nhà siêu âm .

— Yury Semikhatsky
nguồn

3

Vấn đề này vẫn còn nổi bật ... gần một năm sau.

— Glen Little

2

Trong kịch bản khá phức tạp của tôi, câu trả lời được chấp nhận cho cách thực hiện điều này trong Chrome không phù hợp với tôi. Thay vào đó, bạn có thể muốn dùng thử trình gỡ lỗi Firefox (một phần của các công cụ dành cho nhà phát triển Firefox), hiển thị tất cả các 'Nguồn', bao gồm cả các phần mềm là một phần của iFrame

— Izzy
nguồn

Bạn có thể thêm một ảnh chụp màn hình? Tôi không thể tìm thấySources

— Shaya

1

Khi iFrame trỏ đến trang web của bạn như thế này:

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

Bạn có thể truy cập iFrame DOM thông qua loại điều này.

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

— Dave Aaron Smith
nguồn