Chrome DevTools에서 iframe을 사용하는 방법은 무엇입니까?

Question

문서 내의 특정 iframe에있는 개발자 도구를 지적하고 싶습니다. Firefox에서는 툴바에 button이 있습니다. 크롬에서, 나는이 발견

을하지만 콘솔이 아닌 다른 패널에서이 기능을 사용하는 방법을 모르겠어요. Firefox에서 "목록의 항목을 선택하면 도구 상자의 모든 도구 - Inspector, Console, Debugger 등 -은 이제 해당 iframe 만 대상으로하며 페이지의 나머지 부분처럼 작동합니다 존재하지 않는다."

나머지 페이지가없는 것처럼 iframe의 요소를 검사하는 방법은 무엇입니까? 부모 페이지에서 iframe이 어떻게 적용되는지보고 싶지만 Elements 패널에서 부모 페이지의 요소를 보지 않으려합니다 (요소의 깊이 때문에).

Answer 1

한 가지 가능한 해결 방법은 여전히-에서 개발 Out-of-process iframes (OOPIF) 사용 chrome://flags/#enable-site-per-process 플래그를 활성화하는 것입니다 :

• 새로운 DevTools로 iframe이가 오른쪽 클릭하면 메뉴를 통해 검사 할 때 열립니다 창을 부동.
  사용자 정의 컨텍스트 메뉴를 사용하여 youtube와 유사한 iframe을 검사하려면 해당 메뉴에서 다시 오른쪽 버튼을 클릭하십시오.
• IFRAME 내용은 다른 프로세스에 있기 때문에 상위 관리자에 표시되지 않습니다.

일부 사이트에서는이 기능이 iframe을 손상시키기 때문에 (예 :이 플래그가 모든 프로필이 포함 된 전체 데이터 폴더에 영향을 미침) Canary 또는 휴대용 Chrome과 별도로 설치해야 할 수 있습니다.