웹 페이지의 div 구조를보기위한 도구

Question

전체 페이지의 div 레이아웃 구조를 보여줄 수있는 도구가 있습니까?

Chrome의 검사 도구를 사용하고 있으며 스크롤 할 때 개별 div가 표시되지만 div 레이아웃 "디버깅"에 도움이되는 전체 페이지의 구조를 볼 수있는 도구가 있어야합니다.

나는 일반적으로 여기에서 googled했고, 아무것도 발견하지 못했다.

감사합니다.

Answer 1

웹 도구를 열고 구글 크롬에서 SnappySnippet 확장자를 사용하여 새 CSS 규칙을 만들 수 있습니다 : 당신이 후 모든 규칙을 추가 피곤 경우

div { outline: 1px solid red !important; } 

을 새로 고침을 클릭 한 다음이 코드를 북마크에 붙여 넣거나 북마크 패널에 드래그 앤 드롭합니다.

javascript:{s=document.createElement("style");s.appendChild(document.createTextNode("div {outline: 1px solid red}"));document.head.appendChild(s);void(0)} 

Answer 2

당신은

Answer 3

이 것이 있습니다 Div Checker 올바르게 닫히지 않은 div 태그가 있는지 기본적으로 확인합니다. 또한 구조에 대한 맵을 제공합니다. 그래서 이것은 당신이 찾고있는 것을 할 것입니다.