Chrome 개발자 도구를 사용하여 iframe 디버깅

296

Chrome 개발자 콘솔을 사용하여 내 앱의 변수 및 DOM 요소를보고 싶지만 앱이 iframeOpenSocial 앱이므로 내부에 존재합니다 .

따라서 상황은 다음과 같습니다.

<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 ) 막대 가 있으며 현재 탭의 컨텍스트에 따라 변경됩니다. Console (콘솔) 탭에있는 경우 해당 막대에 콘솔이 작동 할 프레임 컨텍스트를 선택할 수있는 드롭 다운이 있습니다. 이 드롭 다운에서 프레임을 선택하면 적절한 프레임 컨텍스트에서 자신을 찾을 수 있습니다. :디

크롬 v59 크롬 버전 59

크롬 v33 크롬 버전 33

Chrome v32 이하 Chrome 프리 버전 32

— 메타 그래퍼
소스

1

이것은 크롬 30.0.1599.101에서 깨진 것 같습니다 – 코드, 변수 등을 사용하려는 시도는 iframe을 선택한 후에도 여전히 부모 컨텍스트에서 이루어집니다

— Kevin

3

버전 33에서 인터페이스가 변경되었습니다. 현재 위치가 확실하지 않습니다.

— Malcr001

3

이에 대한 키보드 단축키가 있습니까?

— Vlas Bashynskyi

2

그냥 참고로이 탭이 호출됩니다 "실행 컨텍스트 선택기" 는 :) 알아 좀 시간이 걸렸로

— 펠리페 비노을

1

아마도 확장 프로그램에서 iframe을 사용하고 있기 때문에 이것이 효과가 없었습니다. chrome : // extensions로 이동하여 로컬로 압축이 풀린 확장 프로그램의 백그라운드 링크 옆에있는 iframe 링크를 클릭해야했습니다.

— AlexMorley-Finch

9

현재 콘솔에서 평가는 페이지의 메인 프레임과 관련하여 수행되며 메인 프레임 자체와 동일한 교차 출처 정책을 따릅니다. 이것은 메인 프레임이 할 수 없다면 iframe의 요소에 접근 할 수 없다는 것을 의미합니다. 그래도 스크립트 패널을 사용하여 중단 점을 설정하고 코드를 디버깅 할 수 있습니다.

업데이트 : 이것은 더 이상 사실이 아닙니다. Metagrapher 's answer를 참조하십시오 .

— 유리 세미 카츠키
소스

3

이 문제는 여전히 1 년이 지난 지금도 여전히 두드러집니다.

— Glen Little

2

상당히 복잡한 시나리오에서 Chrome 에서이 작업을 수행하는 방법에 대한 대답은 효과가 없습니다. 대신 iframe의 일부인 소스를 포함하여 모든 '소스'를 표시하는 Firefox 디버거 (Firefox 개발자 도구의 일부)를 대신 사용해보십시오.

— 이지
소스

스크린 샷을 추가 할 수 있습니까? 찾을 수 없습니다Sources

— Shayan

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!"));

— 데이브 아론 스미스
소스