에 DIV (등) 사각형을 참조하는 방법, 나는 다양한 HTML 상품의 실제 경계 상자를 시각화하고 싶습니다. 이것은 또한 디버깅 및 궁극적 인 개발 모범 사례 도움이 될 것입니다.는</em> 및 <em>이</em> 내 <em>자바 스크립트</em> 및 <em>HTML5</em> 기술을 개발 더 나은 <em>프로그램을 위해 일부 브라우저
Android 기기는 개발자 설정을 통해 다양한 레이아웃과 위젯에 대한 경계 사각형의 명시적인 드로잉을 켜거나 끌 수있는 편리한 기능을 제공합니다.
Firefox 소스를 해킹하는 것 외에도 웹에서 비슷한 결과를 얻는 방법을 알고 있습니까? 모든 브라우저가 정상적으로 작동합니다.
파이어 폭스 (24)에, 당신은 방화범이 끌려와 페이지 당 비슷한 작업을 수행 할 수 있습니다. Firebug의 CSS 창에서 마우스 오른쪽 버튼을 클릭하고 새 규칙을 선택하십시오. 규칙은 다음과 같습니다
html * { border: 1px solid #00f !important }
는 "HTML의 *는"문서의 모든 요소를 선택하고, 다른 스타일 시트 설정을 무시 "중요!". Greasemonkey 스크립트를 사용하여 모든 페이지에 적용 할 수 있습니다. 예를 here
편집이 당신은 국경과 특정 요소에 대한 패딩 표시하지만 CSS box model에서 해당 요소의 여백을 표시하지 않습니다. 그러나 상위 요소의 윤곽에는 하위 요소의 여백이 포함됩니다. 예를 들어, HTML (보라색에서 주석)
<html><body><div style="width: 200px">
<p style="margin: 50px;">Lorem ipsum</p></div>
</body></html>
파이어 버그 기술 쇼에 :
FF와 크롬
는 웹 개발자 도구 모음을 얻는다. 그런 다음 "개요"탭 아래에 여러 가지 옵션이 있습니다. – Mike
이것이 왜 닫혔는지 확실하지 않습니다. 도구를 요청하지 않고 발견 한 솔루션을 요청하고 있습니다. – QED
꽤 오래전에 마감되었지만 시도 된 해결책을 제시하고 무엇을 나타내는지를 보완하기 위해 "리소스/도구 등을 묻는 것으로 해석 될 수 있습니다"라고 완전히 풀린 해결책을 요구하고 있기 때문에 추측하고 있습니다. 잘못된 것입니다 (내게는 "너무 광범위"하지만 의미는 ...). –