상자의 레이아웃을 보려면 브라우저에서 HTML 페이지의 요소를 어떻게 요약 할 수 있습니까? 사용자 에이전트 스타일 시트를 수정 하시겠습니까?

Question

Chrome devtools, Firefox devtools, Safari, Opera 등에서 요소를 검사하면 소스 패널의 해당 요소에 대한 코드 위에 마우스를 가져 가면 바운딩 상자가 잘 보입니다. 훌륭합니다. 하지만 페이지의 모든 요소 (또는 대부분)가 어떻게 배치되는지 보려면 어떻게해야합니까? 예를 들어, 어쩌면 내가 이런 걸보고 싶어요 : 파이어 폭스 "스타일 편집기"에서

을 나는 이러한 스타일을 추가했습니다 :

이

div { border: 1px dotted pink } 
p { border: 1px solid green } 
a { border: 2px solid yellow } 
li { border: 1px dashed cyan } 
img { border: 1px solid purple} 

(크롬 할 수 없다 이것은 접근성을위한 UAAG 2.0 웹 표준을 지원하지 않기 때문에). 사용자 에이전트 스타일 시트가 페이지의 스타일을 덮어 쓰기 때문에 내가 찾고있는 윤곽선을 볼 수 있습니다.

지금은 단지 해킹 일 뿐이지 만 충분할 수도 있지만,이 작업을 수행하는 다른 도구 또는 내가 찾지 못한 devtools의 내용이 있습니까?

참고 : 나는 크롬의 렌더링 메뉴 옵션에서 "연락처보기 합성 레이어 테두리"에 대한이 답을 찾았어요,하지만 내가 무엇을 찾고 정말 아니다 : 당신은 필요 없다

https://superuser.com/questions/774424/grid-overlay-showing-up-as-soon-a-i-launch-chrome-developer-tools

Answer 1

을 추가해야합니다 : "웹 개발자"확장자를.

http://chrispederick.com/work/web-developer/

여기가 블록 레벨 요소를 요약 한 모습입니다 :

그것은 크롬, 파이어 폭스, 오페라 사용할 수 있습니다. Safari를위한 것이 아닙니다.

Answer 2

개발자 도구 [F12]를 사용하여 사용자 에이전트 스타일 시트를 편집 할 수 있습니다.

당신은 그것은 내가 친구가 오래 전에 언급 한 브라우저 확장을 찾고 있었다 판명이 코드

*{border: 1px solid #fff}