Firebug에서 인쇄 매체 CSS를 보는 방법은 무엇입니까?
Firebug는 일부 HTML 요소에 대한 화면 미디어 CSS를 표시하는 훌륭한 도구이지만 인쇄 미디어 CSS도 볼 수있는 방법이 있습니까? 아니면 인쇄 매체 CSS를 볼 수있는 다른 도구가 있습니까?
나는 이것이 작동 할 것이라고 결코 예상하지 못했을 것입니다. Firebug 및 Web Developer의 1.5 베타를 모두 설치하십시오. Web Developer에서 인쇄 CSS를 선택하면 Firebug의 도구가 페이지의 새 인쇄 버전에서 갑자기 작동합니다. 지금까지 두 가지를 동시에 실행하는 데 문제가 없습니다.
웹 개발자 툴바는 어떻습니까?
https://addons.mozilla.org/en-US/firefox/addon/60
설치시 CSS-> 미디어 유형별 CSS 표시-> 인쇄로 이동합니다.
Firefox는 이제 방화범이 필요하지 않습니다.
- 를 눌러 개발자 도구 모음을 실행합니다.
Shift+F2 - 유형
media emulate print
media reset표준보기로 돌아가려면 입력하십시오 .
웹 개발자 플러그인을 사용합니다. 그런 다음 CSS 메뉴에서 페이지를 표시 할 미디어를 선택할 수 있습니다.
웹 개발자 도구 모음을 살펴보고보고 싶은 CSS를 선택할 수 있습니다. 방화범과 함께 인쇄 매체 CSS를 볼 수 있어야합니다.
Firefox (및 일부 다른 브라우저)에서 인쇄 미리보기를 사용하여 인쇄 스타일 시트의 정적 표시를 볼 수 있습니다. 웹 개발자 도구 모음만큼 유용하지는 않지만 인쇄 할 내용을 이해하는데도 도움이됩니다.
실제로 @media print예상하지 못한 CSS를 볼 수 있습니다.
SO 사용 처럼 :
[..] @ media print {# sidebar, # nav, [..], div.vote {display : none;}} [..]
... 따라서 Firebug의 CSS 패널에 다음과 같은 내용이 표시 될 것으로 예상 할 수 있습니다.
@media print {
#sidebar, #nav, [..], div.vote {
디스플레이 : 없음;
}
}
그러나 대신 다음과 같이 CSS @media print가 실제로 활성화 된 것처럼 표시됩니다.
#sidebar, #nav, [..], div.vote {
디스플레이 : 없음;
}
(관련 문제 보고서 : CSS 패널에 @media UI가 없음을 참조하십시오 .)
편집 2 Arjan 의 답변을 읽은 후이 솔루션이 @media printCSS를 사용하거나 남용하는 사이트를 올바르게 처리하지 못한다는 것을 알고 있습니다. (아래의 예를 참조하십시오.) 그러나이 솔루션은 무엇보다도 여러분이 작성한 코드에 대해 "불완전하고 신속하고 더러운 속임수"로 여전히 유효하다고 생각합니다. .
Firebug를 사용하면 <link rel="stylesheet" type="text/css" ...>및 <style>태그를 편리하게 편집 할 수도 있습니다 .
예를 들어 원본을 전환 할 수 있습니다.
<link rel="stylesheet" type="text/css" media="print">
...에
<link rel="stylesheet" type="text/css" media="screen">
브라우저가 적용합니다. 또한 화면 전용 항목도 비활성화해야합니다.
물론 이것은 스타일 시트 링크가 거의없는 몇 페이지 만 빠르게 확인하려는 경우에만 유용하지만 적어도 추가 플러그인을 설치할 필요는 없습니다.
편집 1 이 트릭은 이것을 자동화하기 위해 자바 스크립트를 사용하는 것을 제안합니다 ...
(면책 조항 : 단순성을 위해 JQuery를 사용할 것입니다. 저는 Javascript 전문가가 아닙니다.)
// Save all stylesheet links
allStylesheets = $('link[rel="stylesheet"], style');
// Save the print-stylesheet links
printStylesheets = $('link[media*="print"], link[media*="all"], style[media*="print"], style[media*="all"]');
// Set all stylesheet medias to something 'exotic'
if (null != allStylesheets) {
allStylesheets.attr("media", "aural");
}
// Switch the print-stylesheet medias to 'screen'
if (null != printStylesheets) {
printStylesheets.attr("media", "screen");
}
기본값 media은 "screen"( w3.org-media 속성 )입니다. 페이지 미리보기를 표시하는 버튼에 사용할 수 있습니다. 유일한 단점은 원래보기를 복원하려면 페이지를 다시로드해야한다는 것입니다.
As pointed out above, this solution does not work with html code like this, because the styling inside the @media print won't be applied by the browser:
<html>
<head>
<title>Hello world</title>
<style type="text/css" media="all">
@media print { h1 { color: red; }}
</style>
</head>
<body>
<h1>Hello world</h1>
</body>
</html>
Web developer toolbar has one big drawback for CSS debugging though: every time you refresh the page it reverts to the screen stylesheet.
What I tend to do these days is temporarily switch the media of the print stylesheet to screen while I'm developing, and then switch it back before going live.
참고URL : https://stackoverflow.com/questions/765349/how-to-see-the-print-media-css-in-firebug
'code' 카테고리의 다른 글
| CocoaPods에서 use_frameworks를 사용하는 이유는 무엇입니까? (0) | 2020.11.08 |
|---|---|
| 실행중인 Docker 컨테이너의 IP 주소를 얻는 방법 (0) | 2020.11.08 |
| 객체가 잠겼는지 (동기화 됨) Java에서 차단되지 않도록 어떻게 결정합니까? (0) | 2020.11.08 |
| 엔디안은 언제 요인이됩니까? (0) | 2020.11.08 |
| CSS에서 이미지의 최대 너비를 설정하는 방법 (0) | 2020.11.08 |