인쇄 스타일시트를 디버깅하기 위한 제안사항은 무엇입니까?
저는 최근에 한 웹사이트의 인쇄 스타일시트를 작업하고 있었는데, 그것을 조정할 수 있는 효과적인 방법이 막막하다는 것을 깨달았습니다.화면 레이아웃 작업을 위해 다시 로드 주기를 갖는 것도 한 가지 방법입니다.
- 코드 변경
- 명령 탭
- 재장전
그러나 인쇄를 시도할 때는 전체 프로세스가 훨씬 더 어려워집니다.
- 코드 변경
- 명령 탭
- 재장전
- 인쇄물
- 인쇄된 이미지를 사팔뜨기
- 추가 검사를 위해 미리보기에서 PDF 열기
제가 놓친 도구가 있나요?WebKit의 인스펙터에 "페이징된 미디어인 것처럼 가장" 확인란이 있습니까?파이어버그가 할 수 있는 마법이 있나요?
Chrome의 검사관에 그것에 대한 옵션이 있습니다.
- DevTools 검사기(mac: + +, windows: + + )를 엽니다.
- 장치 모드 전환 아이콘을 클릭합니다.
DevTools 패널의 왼쪽 상단 모서리에 있습니다.(윈도우즈: +,ShiftM Mac:ShiftM ++). - More overrides 클릭
브라우저 뷰포트의 오른쪽 상단 모서리에 있는 아이콘을 클릭하여 devtools 드로어를 엽니다. 그런 다음 에뮬레이션 드로어에서 미디어를 선택하고 CSS 미디어 확인란을 선택합니다.
이 정도면 효과가 있을 겁니다.
업데이트: DevTools에서 메뉴가 변경되었습니다.이제 우측 상단 > More Tools > Rendering Settings > Emulate media > print에서 "3-dots" 메뉴를 클릭하면 확인할 수 있습니다.
출처: Google DevTools 페이지*
HTML - PDF 방식을 사용하지 않고도 인쇄 창을 최대한 제어할 수 있기를 바라는 것 같습니다.@media 화면을 사용하여 디버그 - @media print for final css
최신 브라우저는 인치와 pts를 사용하여 인쇄 시 발생할 일을 빠르게 시각화할 수 있습니다.@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" - 화면 을 참조 ." - @media /다니정하만면기paste면규수▁attribute▁-됩.
행운을 빌어요.웹은 인쇄용으로 제작되지 않았습니다.브라우저에 표시된 내용과 동일한 유형의 모든 컨텐츠를 제공하는 솔루션을 만드는 것은 때때로 불가능할 수 있습니다.예를 들어, 1280 x 1024 사용자를 위한 유동적인 레이아웃이 항상 멋지고 깔끔한 8.5 x 11 레이저 인쇄로 쉽게 변환되는 것은 아닙니다.
욕을 위한 W3C 참조: http://www.w3.org/TR/css3-mediaqueries/
Chrome 48 렌더링 탭에서 인쇄 스타일을 디버그할 수 있습니다.
검사자 및 렌더링 설정의 오른쪽 상단에 있는 메뉴 아이콘을 클릭합니다.
Chrome 58의 경우 Web Inspector > Menu > More Tools > Rendering으로 위치가 변경되었습니다.
Chrome v41에서, 그것은 거기에 있지만, 약간 다른 곳에 있습니다.
HTML 코드에서 미디어 속성을 전환하지 않고 인쇄 스타일시트를 쉽게 디버그할 수 있는 방법이 있습니다(물론 지적한 대로 너비/페이지 문제는 해결되지 않습니다).
- Firefox + Web Developer 확장을 사용합니다.
- 웹 개발자 메뉴에서 CSS / 미디어 유형별 CSS 표시 / 인쇄를 선택합니다.
- Web Developer 메뉴로 돌아가서 Options / Persist Features를 선택합니다.
이제 인쇄 CSS를 보고 페이지를 무한정 다시 로드할 수 있습니다.완료되면 "Persist Features"를 선택 취소하고 다시 로드하면 화면 CSS가 다시 표시됩니다.
HTH.
크롬의 UI는 v53 기준으로 다시 다릅니다.
이 기능을 자주 사용할 필요는 없지만, 사용할 때마다 크롬 팀이 마지막으로 이 기능을 추적하기 위해 사이클을 구웠을 때부터 이 기능을 어디로 이동했는지 파악하는 데 오랜 시간이 걸립니다.
Chrome Browser 창의 ... 메뉴가 아니라 Dev Tools 창의 ... 메뉴입니다.
이제 렌더링 섹션에서 아래로 스크롤합니다.그것은 종종 접힌 곳 아래에 있습니다.
rflnogueira의 답변에 따라 현재 Chrome 설정(40.0.*)은 다음과 같습니다.
다음을 사용하여 브라우저에서 인쇄 스타일시트를 표시합니다.media="screen"디버깅하는 동안.인쇄 미리보기 보기는 일반 검색 모드와 동일한 렌더링 엔진을 사용하므로 이를 사용하여 정확한 결과를 얻을 수 있습니다.
2019 - 업데이트된 지침
- Chrome 검사기 열기
- Mac에서 =>
option+command+i - Windows = >
F12
- Mac에서 =>
작은 점 3개를 클릭하면,
customize and control devTools
선택한다.
More Tools선택한다.
Rendering맨 아래로 스크롤하여
Emulate CSS Media선택한다.
print아래 화살표에서
인쇄 스타일 시트가 참조된 상태에서 페이지 내용을 새 창으로 다시 쓰는 인쇄 기능이 있으면 종이에 어떻게 표시될지 훨씬 더 잘 알 수 있고, 파이어버그와 같은 것으로 디버깅할 수도 있습니다.
다음은 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();
});
Firefox(87.0)에서 "DOM 및 스타일 검사기"에는 인쇄 매체 시뮬레이션을 위한 전환 버튼이 있습니다.
한 가지 단점은 페이지 경계를 명확하게 설명하지 않는다는 것입니다.
DreamWeaver에는 화면, 인쇄, 핸드헬드 미디어, 투영 화면, TV 미디어, 목적 시간 스타일 시트 등 사실상 원하는 모든 렌더링 옵션을 표시하는 도구 모음이 있습니다.이것이 제가 특히 사용하는 이유입니다. 버튼을 한 번만 누르면 바로 미리 보기가 표시됩니다.
나는 매크로를 사용하여 키 누르기와 마우스 클릭을 반복적으로 보냅니다.Windows에서 AutoHotKey는 훌륭한 소프트웨어이며 OS X에서 Automator와 같은 OS X의 대체 AHK에 대해 읽을 수 있습니다.
Windows에서(OS X에서 Ctrl을 Cmd로 대체) "Ctrl-s / 열려 있는 창 목록에 있는 Fx 창으로 전환 / Ctrl-r"을 1개의 사용하지 않는 키로 바인딩하면 흥미 없는 작업으로 인한 좌절을 피할 수 있으며 궁극적으로 RSI에서 팔을 보호할 수 있습니다. :)
언급URL : https://stackoverflow.com/questions/2452713/suggestions-for-debugging-print-stylesheets
'programing' 카테고리의 다른 글
| C++의 std:: 문자열로 전체 파일을 읽는 방법은 무엇입니까? (0) | 2023.08.05 |
|---|---|
| PowerShell에서 C# 코드 실행으로 개체 또는 여러 값을 반환하려면 어떻게 해야 합니까? (0) | 2023.07.31 |
| 현재 노드를 포함하는 jQuery find(...) 메서드를 찾고 있습니다. (0) | 2023.07.31 |
| 회전을 제대로 처리하는 아이폰용 뷰포트 메타를 설정하는 방법은? (0) | 2023.07.31 |
| 모든 파일 및 폴더 삭제, 하위 폴더 제외 (0) | 2023.07.31 |