인쇄 스타일 시트 디버깅에 대한 제안?

238

나는 최근에 웹 사이트를위한 인쇄 스타일 시트를 연구하고 있는데, 그것을 효과적으로 조정할 수있는 방법을 잃어 버렸다는 것을 깨달았다. 화면 레이아웃 작업을위한 재로드주기를 갖는 것이 한 가지입니다.

  • 코드 변경
  • 명령 탭
  • 새로 고침

그러나 인쇄하려고 할 때 전체 프로세스가 훨씬 어려워집니다.

  • 코드 변경
  • 명령 탭
  • 새로 고침
  • 인쇄
  • 인쇄 미리보기 이미지에서 곁눈질
  • 추가 검사를 위해 미리보기에서 PDF 열기

여기에 빠진 도구가 있습니까? WebKit의 인스펙터에 "이것이 페이징 미디어 인 척"체크 상자가 있습니까? Firebug ( shudder )가 할 수있는 마술 이 있습니까?

css  printing  firebug  google-chrome-devtools  web-inspector 
— 짐 풀스
소스
4
지원하는 브라우저 (예 : Firefox)의 "인쇄 미리보기"기능은 어떻습니까? 나는 인쇄를 위해 일부 웹 페이지를 (정확하게) 디버깅했습니다.
— Halil Özgür
2
— outis
3
Firefox에서 Shift + F2로 "개발자 도구 모음"을 열고 "media emulate print"(또는 "emu"+ Tab + "print")를 입력 한 후 Enter를 누르십시오.
— Marcello Nuccio
@MarcelloNuccio 답변이되어야합니다. stackoverflow.com/a/28873496/1696030 는 비교에 대해 꽤 긍정적 인 표를 얻었습니다. “개발자 도구 모음”은 명령 줄 인터페이스이므로 약간 오해의 소지가 있습니다.
— Volker E.

답변:

327

Chrome 관리자에 해당 옵션이 있습니다.

  1. DevTools 인스펙터를 엽니 다 (mac : Cmd+ Shift+ C, windows : Ctrl+ Shift+ C)
  2. DevTools 패널의 왼쪽 상단에있는 장치 모드 전환 아이콘을 클릭하십시오 장치 모드 버튼 전환. (Windows : Ctrl+ Shift+ M, mac : Cmd+ Shift+ M).
  3. 브라우저 뷰포트의 오른쪽 상단 에있는 추가 재정의 더 많은 재정의 아이콘을 클릭 하여 devtools 드로어를여십시오.

  4. 그런 다음, 선택 미디어를 에뮬레이션 서랍 및 확인 CSS 미디어 확인란을.

    여기에 이미지 설명을 입력하십시오

이것은 트릭을해야합니다.

업데이트 : 메뉴가 DevTools에서 변경되었습니다. 오른쪽 상단 모서리에있는 "세 점"메뉴> 추가 도구> 렌더링 설정> 미디어 에뮬레이션> 인쇄를 클릭하면 찾을 수 있습니다.

출처 : Google DevTools 페이지 *

— 라파엘 노게이라
소스
5
고마워, 그것이 내가 찾던 것인데 찾을 수 없었습니다 : / 단축키는 더 이상 작동하지 않습니다. 오른쪽 하단에서 F12 + 톱니 바퀴 아이콘을 설정 한 다음 설정이 재정의 탭 아래에 있습니다.
— Aurelien
18
불행히도 그것은 100 % 정확하지 않습니다 :(
— maazza
9
Chrome 32.0.1700.14 beta-m Aura에서 "CSS 미디어 에뮬레이션 [print]"이 누락되었습니다 :(
— Rocket Hazmat
11
이 답변은 수정해야합니다. Chrome 48부터 인쇄 스타일 시트 에뮬레이터는 더 이상 "에뮬레이션"이 아니라 "렌더링"에 있습니다.
— chharvey
13
인스펙터의 3 점 메뉴 (오른쪽)> 추가 도구> 렌더링 설정> 미디어 에뮬레이션> 인쇄
— allicarn
74

HTML에서 PDF로 접근하지 않고 가능한 한 인쇄 된 창을 최대한 제어하고 싶다고 가정합니다 ... @media screen을 사용하여 디버깅하십시오-@media print for final css

현대 브라우저는 당신에게 사용하여 인쇄 시간에 무슨 일이 일어날에 대한 빠른 시각적으로 제공 할 수 있습니다 인치 와 점 A의를 @media query.

@media screen and (max-width:8.5in) { /* resize your window until the event is triggered */
    html { width:8.5in; }
    body { font: 9pt/1.5 Arial, sans-serif; } /* Roughly 12px font */
 ...
}

브라우저에 "인치"가 표시되면 무엇을 기대해야하는지 더 잘 알 수 있습니다. 이 방법은 인쇄 미리보기 방법을 모두 종료해야합니다. 모든 프린터에서 작동 pt및 in단위, 그리고 @media 기술을 사용하면 신속하게 발생하고 그에 따라 조정 무슨 일이 일어나고 있는지 볼 수 있습니다. Firebug (또는 이와 동등한)는 해당 프로세스를 신속하게 처리합니다. @media에 변경 사항을 추가하면 media = "print"속성을 사용하여 연결된 CSS 파일에 필요한 모든 코드가 있습니다 . @media 화면 규칙을 참조 된 파일에 복사 / 붙여 넣기 만하면됩니다.

행운을 빕니다. 웹은 인쇄용으로 제작되지 않았습니다. 모든 컨텐츠를 제공하는 솔루션을 작성하면 브라우저에서 보이는 것과 동일한 스타일이 때때로 불가능할 수 있습니다. 예를 들어, 주로 1280 x 1024 청중을위한 유동적 인 레이아웃이 항상 멋지고 깔끔한 8.5 x 11 레이저 인쇄로 쉽게 변환되는 것은 아닙니다.

purusal에 대한 W3C 참조 : http://www.w3.org/TR/css3-mediaqueries/

— 도슨
소스
이 방법은 매우 영리하다고 언급하고 싶었습니다. 인쇄 미리보기 기능을 사용하는 것보다 인쇄 스타일을 "토글"하기 위해 창의 크기를 약간 조정하는 것이 훨씬 쉽습니다. 때때로 IE 호환성 등을 위해 그렇게해야하지만 인쇄 스타일의 초기 반복에 좋습니다.
— chucknelson
@척. 고마워요 이봐, 내 데모가 오프라인이라는 것을 깨달았고, 그것을 위해 바이올린을 만들었습니다. jsfiddle.net/dNEmT
— Dawson
20

Chrome 48 의 렌더링 탭 에서 인쇄 스타일을 디버깅 할 수 있습니다 .

인스펙터 오른쪽의 메뉴 아이콘과 렌더링 설정을 클릭하십시오 .

편집
을 위해 크롬 58 위치가 변경되었습니다 웹 관리자> 메뉴> 추가 도구> 렌더링

— Minlare
소스
4
Chrome 49 : F12 (개발자 콘솔)-> ESC (콘솔)-> 렌더링-> 인쇄 매체 에뮬레이션
— user1477388
19

Chrome v41에는 있지만 약간 다른 위치에 있습니다.

여기에 이미지 설명을 입력하십시오

— Johntrepreneur
소스
3
v53에서 당신이 제공되는 스크린 샷과 유사에서 인쇄, 선택할 수있는 드롭 다운을 가능하게 할 것이다 에뮬레이션 매체에 대한 확인란있다 하단에 대신 렌더링 탭의
— 제임스 그레이
16

HTML 코드에서 미디어 속성을 전환하지 않고 인쇄 스타일 시트를 쉽게 디버깅 할 수있는 방법이 있습니다 (물론 지적했듯이 너비 / 페이지 문제를 해결하지 못함).

  • Firefox + Web Developer 확장을 사용하십시오.
  • 웹 개발자 메뉴에서 CSS / 미디어 유형별 인쇄 / 인쇄로 CSS 표시를 선택하십시오.
  • 웹 개발자 메뉴로 돌아가서 옵션 / 지속 기능을 선택하십시오.

이제 인쇄 CSS를보고 있으며 페이지를 무기한으로 다시로드 할 수 있습니다. 완료되면 "기능 유지"를 선택 해제하고 다시로드하면 화면 CSS가 다시 나타납니다.

HTH.

— 캡슐
소스
7
인쇄 미리보기와 크게 다르게 렌더링됩니다. 아마도 이것은 내 CSS의 기발한 것입니다. 어쨌든 문제가 해결되지 않습니다. 그래도 고마워.
— heartpunk
그래, 나도 완전히 달라 나는이 jsfiddle ( jsfiddle.net/2wk6Q/3 )을 따르고 인쇄 미리보기에는 빨간색 여백이있는 페이지가 표시되지만 완전히 다릅니다.
— duality_
1
이 "해결 방법"이 가장 효과적이라고 말해야합니다. 어쩌면 운이 좋기 때문에 네이티브 인쇄 화면과 웹 개발자 인쇄 화면 사이에 작은 차이가 있지만 왜 간격이 나타나는지, 가장 중요한 것이 무엇인지 알아내는 데 도움이되었습니다. 에
— 에릭 Čerpnjak
13

Chrome의 UI는 v53부터 다시 다릅니다.

이 기능을 자주 사용할 필요는 없지만, 사용할 때마다 Chrome 팀이 마지막으로 추적을 시도한 이후로 크롬 팀이 어디로 옮겼는지 파악해야합니다.

공지 사항이있는 ... 메뉴의 개발 도구는 정보 창 하지 크롬 브라우저 창에서 ... 메뉴를 선택합니다.

MacOS에서 v53부터 프린터 미리보기

이제 렌더링 섹션에서 아래 로 스크롤 하십시오. 폴드 아래에있는 경우가 많습니다.

— TrophyGeek
소스
1
방금 print.css 디버깅을 저장했습니다. 당신은 굉장합니다!
— zazvorniki
8

rflnogueira의 답변에 이어 현재 Chrome 설정 (40.0. *)은 다음과 같습니다.

크롬 인쇄 CSS 에뮬레이션

— 아닐 반 가리
소스
"미디어"탭을 식별하는 데 약간의 시간이 걸렸습니다. "장치"탭에서 계속 찾았습니다.
— Lorin Rivers
5

media="screen"디버깅 하는 동안 사용하여 브라우저에 인쇄 스타일 시트를 표시하십시오 . 인쇄 미리보기보기는 일반 브라우징 모드와 동일한 렌더링 엔진을 사용하므로 정확한 결과를 얻을 수 있습니다.

— 타투 울 마넨
소스
14
일반 브라우징 모드에는 페이지가 없으므로 콘텐츠가 어떻게 흐르는 지 전혀 모릅니다. 일반 브라우징 모드의 너비는 특정 픽셀 수이며 페이지의 너비는 특정 인치 또는 센티미터입니다. 화면과 인쇄 사이에는 구현에 독립적 인 근본적인 차이점이 있습니다. 그 사이의 디버깅은 내가 따르는 것입니다.
— Jim Puls
1
크롬에서는이 제안 만 사용하여 렌더링이 상당히 다릅니다. 작동하지 않습니다.
— heartpunk
"페이지"너비는 고정하기 어렵지 않으며 높이는 정말 어렵습니다. 브라우저와 프린터 모두 11in 두통에 중요한 역할을합니다. 웹 페이지는 연속 길이입니다. 출력 장치 유형과 브라우저를 보장하지 않으면 매번 마크에 부딪 칠 것이라고 생각하지 않습니다. HTML에서 PDF로 접근 방식을 사용하면 효과가 있지만 질문의 범위를 벗어납니다.
— 도슨
3

2019-업데이트 된 지침

  1. Chrome 관리자 열기
    • 에서 맥 => option+ command+i
    • 에서 윈도우 =>F12

  2. 작은 3 개의 점을 클릭하십시오. customize and control devTools 여기에 이미지 설명을 입력하십시오

  3. 고르다 More Tools

  4. 고르다 Rendering

  5. 아래로 스크롤하여 Emulate CSS Media

  6. print아래쪽 화살표에서 선택

여기에 이미지 설명을 입력하십시오

— jso1919
소스
0

인쇄 스타일 시트를 참조하여 페이지의 내용을 새 창에 다시 쓰는 인쇄 기능이있는 경우 paper에서 용지의 모양을 훨씬 더 잘 알 수 있으며이를 디버깅 할 수 있습니다 파이어 버그도 좋아합니다.

JavaScript / jquery로 어떻게 수행 할 수 있는지에 대한 예는 다음과 같습니다.

        $("#Print").click(function () {
            var a = window.open('', '', 'scrollbars=yes,width=1024,height=768');
            a.document.open("text/html");
            a.document.write("<html><head>");
            a.document.write('<link rel="stylesheet" href="css/style.css" />');
            a.document.write('<link rel="stylesheet" href="css/print.css" />');
            a.document.write("</head><body>");
            a.document.write($('#Content').html());
            a.document.write('</body></html>');
            a.document.close();
            a.print();
        });
— 블로우 지
소스
2
이 접근법의 문제점은 사용자가 브라우저에서 "인쇄 ..."를 선택하면이 자바 스크립트 함수가 호출되지 않는다는 것입니다.
— Ken Liu
인쇄 기능을 사용자에게 표시 할 필요가 없으며 원하는 경우 디버깅 목적으로 간단히 사용할 수 있습니다.
— Blowsie
이것은 브라우저가 이미하고있는 것에 대한 과도하게 설계된 솔루션입니다. 그냥 사용 media="print"하고 media="screen"스타일 시트에 대한 각각을 바로 호출 인쇄 미리보기로 브라우저 메뉴 또는 키 콤보를 사용합니다. (이 경우 팝업을 여는 것과 다르지 않습니다.) 디버깅 중일 경우 디버깅 media="screen"이 완료 될 때까지 속성을 인쇄 스타일에 적용하십시오 .
— ORyan
-1

여기에 이미지 설명을 입력하십시오

: 화면 등 인쇄, 휴대용 미디어, 프로젝션 스크린, 텔레비젼 미디어, desitn 시간 스타일 시트, 이것은 내가 특히 그것 때문에 사용하는 것입니다 : 드림위버에서 쇼 거의 모든 렌더링 옵션을 사용하면 원하는 도구 모음이 즉시 1로 미리보기를 보여줍니다 버튼을 한 번 누릅니다.

— 샘
소스
1
알아두면 좋지만, 우리가 개발 한 것과 다른 렌더링 엔진을 사용해야하지만 여전히 재로드 이상의 것이 필요합니다. 그래도 고마워.
— heartpunk
1
이미 2011 년에이 소프트웨어는 제한된 플랫폼에서만 독점적 인 구매 전용 소프트웨어였으며, 오픈 웹을 디버깅하기 위해 요청 된 기능을 사용하기 위해 비용을 지불해야했습니다.
— Volker E.
-7

매크로를 사용하여 키 누르기와 마우스 클릭을 반복적으로 보냅니다. Windows에서 AutoHotKey는 훌륭한 소프트웨어이며 OS X에서는 Automator에 대한 대체 AHK for OsX에 대해 읽을 수 있습니다 .

Windows에서 (OS X에서 Cmd로 Ctrl 대체) "Ctrl-s / 열려있는 창 목록에있는 Fx 창으로 전환 / Ctrl-r"은 사용하지 않는 키 1 ​​개로 묶여있어 무관심한 작업으로 인한 좌절을 피하고 궁극적으로 팔을 절약합니다 에서 RSI :)

— FelipeAls
소스
당사 사이트를 사용함과 동시에 당사의 쿠키 정책과 개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.