인쇄 스타일 시트를 개발하고 테스트하는 더 빠른 방법 (매번 인쇄 미리보기를 피하십시오)?

이것은 지금 내 프로세스입니다.

1. print.css에 변경 사항 저장
2. 브라우저를 열고 페이지를 새로 고칩니다.
3. 마우스 오른쪽 버튼을 클릭하고 인쇄> 인쇄 미리보기 (Firefox, 그러나 모든 브라우저)를 선택하십시오.

나에게 버그가되는 3 단계이며 플러그인이나 무언가로 프로세스에서 잘라낼 수 있는지 궁금합니다. 페이지를 인쇄 매체로 보도록 선택한 다음 변경 내용을 보려면 새로 고치기 만하면됩니다.

인쇄 스타일 시트를 어떻게 테스트합니까? 새로 고침 후 항상 인쇄 미리보기를 클릭합니까?

게시물에 허용 된대로 Chrome 미디어 유형 에뮬레이션 을 사용할 수 있습니다 . 브라우저의 인쇄 CSS를 참조하십시오 .

업데이트 21/11/2017

업데이트 된 DevTools 문서는 다음 위치에서 찾을 수 있습니다 . 인쇄 모드에서 페이지보기 .

인쇄 모드에서 페이지를 보려면 :
1. 명령 메뉴를 엽니 다 . ( tl; dr Cmd+Shift+P (Mac) 또는 Ctrl+Shift+P(Windows, Linux))
2. 입력을 시작하고을 Rendering선택 Show Rendering합니다.
3. CSS 미디어 에뮬레이션 드롭 다운에서 인쇄를 선택 합니다.

업데이트 29/02/2016

DevTools 문서가 이동했으며 위의 링크가 부정확 한 정보를 제공합니다. 미디어 유형 에뮬레이션과 관련하여 업데이트 된 문서는 여기에서 찾을 수 있습니다 . 더 많은 미디어 유형에 대한 스타일 미리보기 .

브라우저 뷰포트의 오른쪽 상단 모서리에있는 재정의 ••• 재정의 아이콘 을 클릭하여 DevTools 에뮬레이션 서랍을 엽니 다 . 그런 다음 에뮬레이션 드로어 에서 매체 를 선택하십시오 .

2016 년 12 월 4 일 업데이트

불행히도 인쇄 에뮬레이션과 관련하여 문서가 업데이트되지 않은 것 같습니다. 그러나 인쇄 매체 에뮬레이터가 다시 이동되었습니다.

1. Chrome 개발자 도구 열기
2. esc키보드를 누르 십시오
3. ⋮ (수직 줄임표)을 클릭하십시오.
4. 렌더링 선택
5. Tick Emulate 인쇄 매체

아래 스크린 샷을 참조하십시오 :

2016 년 6 월 28 일 업데이트

Chrome 개발자 도구 관련 Chrome 개발자 도구 및 "미디어 에뮬레이션"옵션이 Chrome> 51에 대해 업데이트되었습니다.

https://developers.google.com/web/tools/chrome-devtools/settings?hl=ko#emulate-print-media

인쇄 미리보기 모드에서 페이지를 보려면 DevTools 기본 메뉴를 열고 추가 도구 > 렌더링 설정 을 선택한 다음 드롭 다운 메뉴가 인쇄로 설정된 상태에서 미디어 에뮬레이션 확인란 을 활성화하십시오 .

2016 년 5 월 24 일 업데이트

설정 이름이 다시 한 번 변경되었습니다.

인쇄 미리보기 모드에서 페이지를 보려면 DevTools 기본 메뉴를 열고 추가 도구 > 렌더링 을 선택한 다음 드롭 다운 메뉴가 인쇄로 설정된 상태에서 CSS 미디어 에뮬레이션 확인란 을 활성화하십시오 .

Firefox에서는 Shift+F2개발자 도구 모음 명령 줄을 열고 입력 한 다음media emulate print

이 방법으로 다른 매체 유형을 에뮬레이트 할 수도 있습니다.

Firefox + Web Developer 도구 모음 확장 프로그램에는 다양한 스타일 시트를 활성화 / 비활성화하는 방법이 있습니다.

CSS 메뉴를보십시오. 개별 스타일 시트를 비활성화 및 활성화하는 메뉴와 "미디어 유형별 표시"메뉴도 있습니다.

또한 Firefox에서 PrintPreview에 도달하는 단계를 줄이려면 PrintPreview 확장 기능을 사용해보십시오. 그러면 도구 모음 단추가 만들어집니다.

Chrome 의 경우 해당 확장 의 포트가 있습니다 . Chrome 버전으로 알 수있는 내용에서 '인쇄 스타일 표시'를 선택할 수 있습니다.

인쇄 미리보기가 포함되지 않은 테스트 방법을 사용하지 않습니다. 너무 많은 차이점이 있습니다. 배경 이미지가 인쇄에서 전혀 작동하지 않지만 그 중에서 가장 중요한 일반 화면 컨텍스트에 표시됩니다.

Chrome에서는 control+p즉시 인쇄 미리보기로 이동합니다. (메뉴 막대까지 마우스를 올리는 것을 잊지 마십시오). 꽤 쉽습니다.

테스트하는 동안 단순히 화면 스타일을 비활성화하고 인쇄 스타일 시트에 대해 미디어 유형을 "스크린"으로 변경할 수 있습니다. 실제 인쇄 미리보기 (페이지 나누기, 문서 너비 등)를 사용하는 것과 정확히 같지는 않지만 여전히 좋은 아이디어입니다.

FF 로 나를 위해 간단합니다 ( @screen부품이 없거나 유사한 ¹ ) .

• CSS 내용의 끝에 부분을 넣어@media print { ...
• 랩퍼 선언 만 주석 처리 하십시오./*@media print {*/ ... /*}*/
  • 따라서 인쇄물을 스타일에 적용하면 해당하는 경우 즉시 덮어 씁니다.
• ( LiveReload 를 사용 하고 있으므로 변경 사항 을 저장 한 직후 브라우저 페이지가 새로 고쳐집니다 )
• ( 그렇지 않으면 LiveReload를 사용하지 않는 경우)를 눌러 CTRL+R페이지를 다시로드하십시오.
• 이제 인쇄 미리보기가 필요하지 않은 일반적인 인쇄 CSS 조정 (글꼴 스타일, 글꼴 크기, 간격, 색상)을 이미 많이 수행 할 수 있습니다.
• 을 눌러 ALT+F+V인쇄 미리보기를 열고 ALT+W다시 닫습니다.

¹ : 테스트 된 미디어에 따라 주석 처리 / 주석 처리가없는 것이 큰 문제가되지 않을 수 있습니다

이 다른 게시물 ( 인쇄 미리보기 모드에서 Chrome의 요소 검사기 사용? )에 설명 된대로 크롬을 사용하여 인쇄 스타일 시트를 에뮬레이션 할 수 있습니다. 이것은 인쇄 대화 상자가 나타날 때 추측하지 않고 관리자를 사용하여 스타일이 어디에서 왔는지 확인할 수 있기 때문에 좋습니다.

Chrome Element Inspector의 오른쪽 하단에있는 톱니 바퀴 아이콘을 클릭하여 재정의 설정 대화 상자에 액세스합니다. 그런 다음 대상 미디어 유형으로 인쇄를 선택하십시오.

대박!

적어도 Chrome에서 : 개발 중에 body 태그에 추가 onload="window.print()" . 이렇게하면 새로 고친 직후에 인쇄 모드가 열립니다.

불행히도 개발자 도구는 본질적으로 포함 된 PDF이기 때문에 개발자 도구가 많이 사용되는 것처럼 보이지 않습니다.

우연히도 2 단계를 제거 할 수있는 방법이 있습니다. 가장 인기있는 것은 LiveReload입니다.

일반 스타일 시트를 일시적으로 제거하고 일반 링크 태그가있는 인쇄 스타일 만로드 할 수 있습니다.

Chrome 62에서 cmd-R / cmd-P는 Mac에서 잘 작동하여 @media 인쇄 스타일 페이지를 미리 볼 수 있습니다.

브라우저 창의 오른쪽 위에있는 세로 줄임표 (개발자 도구 아님) / 인쇄를 통해 액세스 할 수 있습니다.

미리보기 창을 취소하려면 esc를 사용하십시오.

따라서 IntelliJ IDEA 및 Chrome의 워크 플로우의 경우 cmd-s, cmd-tab, cmd-r, cmd-p, esc, cmd-tab이며 IDE로 돌아갑니다.

Windows 10의 Chrome 62에는 동일한 위치에 동일한 인쇄 ... 메뉴가 있으며 ctrl-p로 액세스 할 수 있습니다.