Programing

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

lottogame 2020. 4. 12. 10:11
반응형

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

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

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

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

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

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

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 페이지 *

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/

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

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

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

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

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

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

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

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

HTH.

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

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

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

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

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

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

크롬 인쇄 CSS 에뮬레이션

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

2019-업데이트 된 지침

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

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

  3. 고르다 More Tools

  4. 고르다 Rendering

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

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

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

If you have a print function that rewrites the content of the page to a new window with your print style sheet referenced you'll get a much better idea of what its going to look like on paper , and you'll be able to debug it with the likes of firebug too.

Heres an example of how this can be done with 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();
        });

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

In DreamWeaver there is a toolbar that shows virtually any rendering option you want: screen, print, handheld media, projection screen, tv media, desitn time style sheets, etc. This is what I use especially because it: instantly shows a preview with 1 single press of a button.

I use macros to send keypress and mouse clicks repeatedly. Under Windows, AutoHotKey is a great software and under OS X you can read about Automator sort of an alternative AHK for OsX.

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

참고 URL : https://stackoverflow.com/questions/2452713/suggestions-for-debugging-print-stylesheets

반응형

'Programing' 카테고리의 다른 글

pytest에서 예외가 발생했다고 올바르게 주장하는 방법은 무엇입니까?  (0) 2020.04.12
Visual Studio에서 현재 프로젝트를 빌드하기위한 표준 키보드 단축키가 있습니까?  (0) 2020.04.12
우분투에서 GOPATH 환경 변수를 어떻게 설정합니까?  (0) 2020.04.12
TFS 바인딩을 완전히 제거하는 방법  (0) 2020.04.12
정규식-무엇이든 일치  (0) 2020.04.12

'Programing'의 다른글

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

관련글

댓글

티스토리툴바