인쇄 스타일 시트를 개발하고 테스트하는 더 빠른 방법(매번 인쇄 미리 보기 사용 안 함)
이것이 현재 제 프로세스입니다.
- print.css에 변경 사항 저장
- 브라우저를 열고 페이지를 새로 고칩니다.
- 마우스 오른쪽 단추를 클릭하고 인쇄 > 인쇄 미리 보기를 선택합니다(Firefox, 하지만 브라우저는 실제로).
저를 괴롭히는 것은 3단계인데 플러그인 같은 것으로 공정에서 잘라내는 것이 가능한지 궁금합니다.페이지를 인쇄 매체로 표시하도록 선택한 다음 새로 고침하면 변경 내용을 볼 수 있습니다.
인쇄 스타일 시트는 어떻게 테스트합니까?새로 고침 후 항상 인쇄 미리 보기를 클릭합니까?
Chrome Media Type Emulation은 브라우저의 print css를 참조하십시오 게시물에서 승인된 대로 사용할 수 있습니다.
2017년 21월 11일 업데이트
업데이트된 DevTools 문서는 인쇄 모드의 페이지 보기에서 찾을 수 있습니다.
인쇄 모드에서 페이지를 보는 방법
명령 메뉴를 엽니다. (tl;drCmd+Shift+P(Mac) 또는 (Windows, Linux).
입력을 시작하고 선택Show Rendering.
에뮬레이트 CSS 미디어 드롭다운에서 인쇄를 선택합니다.
업데이트 29/02/2016
DevTools 문서가 이동되었으며 위 링크는 정확하지 않은 정보를 제공합니다.미디어 유형 에뮬레이션에 대한 업데이트된 문서는 더 많은 미디어 유형에 대한 미리 보기 스타일에서 찾을 수 있습니다.
브라우저 뷰포트의 오른쪽 상단 모서리에 있는 More overrides • • more overrides 아이콘을 클릭하여 DevTools 에뮬레이션 드로어를 엽니다.그런 다음 에뮬레이션 드로어에서 미디어를 선택합니다.
2016년 4월 12일 업데이트
안타깝게도 인쇄 에뮬레이션과 관련하여 문서가 업데이트되지 않은 것 같습니다.그러나 인쇄 미디어 에뮬레이터가 다음과 같이 이동했습니다(다시).
- Open Chrome DevTools
- 키보드를 누릅니다.
- ⋮ 클릭(수직 타원)
- 렌더링 선택
- 인쇄 매체 에뮬레이트 확인란
아래 스크린샷 참조:
업데이트 28/06/2016
Chrome DevTools 주변의 Google 개발자 문서 및 "미디어 에뮬레이트" 옵션이 Chrome > 51에 대해 업데이트되었습니다.
https://developers.google.com/web/tools/chrome-devtools/settings?hl=en#emulate-print-media
인쇄 미리 보기 모드에서 페이지를 보려면 DevTools 메인 메뉴를 열고 More Tools > Rendering Settings를 선택한 다음 인쇄하도록 설정된 드롭다운 메뉴로 미디어 에뮬레이트 확인란을 활성화합니다.
2016년 5월 24일 업데이트
설정 이름이 다시 변경되었습니다.
인쇄 미리 보기 모드에서 페이지를 보려면 DevTools 메인 메뉴를 열고 More Tools > Rendering을 선택한 다음 인쇄하도록 설정된 드롭다운 메뉴에서 Emulate CSS Media 확인란을 활성화합니다.
에서 Firefox 서다입있음력수습다니할에을을 입력할 수 .Shift+F2을 연 개자도모명을연줄다음령을 입력합니다.media emulate print
이러한 방식으로 다른 미디어 유형을 에뮬레이트할 수도 있습니다.
Firefox + Web Developer 도구 모음 확장에는 다양한 스타일시트를 활성화/비활성화할 수 있는 방법이 있습니다.
CSS 메뉴 아래를 보세요.개별 스타일시트를 비활성화 및 활성화하는 메뉴와 "미디어 유형별 표시" 메뉴도 있습니다.
또한 Firefox에서 PrintPreview로 이동하는 단계를 줄이려면 PrintPreview 확장을 사용하여 도구 모음 단추를 만듭니다.
Chrome의 경우 해당 확장 포트가 있습니다.Chrome 버전에서 알 수 있는 바로는 "인쇄 스타일 표시"를 선택할 수 있습니다.
인쇄 미리 보기가 포함되지 않는 테스트 방법은 사용하지 않을 것입니다.너무 많은 차이점이 있습니다. 배경 이미지는 인쇄에서 전혀 작동하지 않지만, 일반적인 화면 컨텍스트에 표시되는 것이 그 중 가장 중요합니다.
Chrome 에서,control+p인미리보기바로로이다니합동쇄. (메뉴 바에 .)(메뉴 모음에 마우스를 올리는 것은 잊어버립니다.)그것은 꽤 쉽습니다.
테스트하는 동안 화면 유형을 비활성화하고 인쇄 유형 시트에 대한 미디어 유형을 "화면"으로 변경하기만 하면 됩니다.이것은 실제 인쇄 미리 보기(페이지 구분, 문서 너비 등)를 사용하는 것과 완전히 같지는 않지만 그래도 좋은 아이디어를 제공합니다.
나에게 간단한 (가 없는)@screen부품 또는1 유사품)(FF 포함):
- CSS 콘텐츠의 끝에 해당 부분을 삽입합니다.
- 포장지 선언만 아웃소싱합니다.
- 따라서 해당되는 경우 스타일에 인쇄물을 즉시 적용합니다.
- (LiveReload를 사용하고 있으므로 변경 내용을 저장한 후 즉시 브라우저 페이지가 새로 고쳐집니다.)
- (그렇지 않은 경우 LiveReload를 사용하지 않는 경우:) 를 눌러 페이지를 다시 로드합니다.
- 이제 인쇄 미리보기가 아직 필요 없는 일반적인 인쇄 CSS 조정(글꼴, 글꼴 크기, 간격, 색상)을 이미 많이 수행할 수 있습니다.
- 인쇄 미리보기를 열고 다시 닫으려면 누릅니다.
테스트한 매체에 따라, 만약 그것들을 가지고 있다면, 그것들을 밖으로/안으로 보내는 것은 그렇지 않으면 큰 문제가 아닐 수도 1있습니다.
이 다른 게시물(인쇄 미리 보기 모드에서 Chrome의 요소 검사기 사용?)에서 설명한 대로 크롬을 사용하여 인쇄 스타일시트를 에뮬레이트할 수 있습니다.이것은 인쇄 대화상자가 나타나는 것을 볼 때 추측하는 것보다 검사기를 사용하여 스타일이 어디서 왔는지 확인할 수 있기 때문에 유용합니다.
Chrome의 Element Inspector(요소 검사기)의 오른쪽 아래 모서리에 있는 기어 아이콘을 클릭하여 Overrides Settings(재지정 설정) 대화 상자에 액세스합니다.그런 다음 대상 미디어 유형으로 인쇄를 선택합니다.
아주 좋아요!
적어도 Chrome에서는:개발 중에 바디 태그에 추가onload="window.print()"이렇게 하면 새로 고침 후 즉시 인쇄 모드가 열립니다.
안타깝게도 개발자 도구는 기본적으로 내장된 PDF이기 때문에 그다지 유용하지 않은 것 같습니다.
부수적으로 2단계를 제거하는 방법이 있습니다.인기 있는 것 중 하나는 LiveReload입니다.
일반 스타일시트를 일시적으로 제거하고 일반 링크 태그가 있는 인쇄 스타일시트만 로드할 수 있습니다.
Chrome 62에서 cmd-R/cmd-P는 Mac에서 잘 작동하여 @media print styled 페이지의 멋진 미리 보기를 표시합니다.
브라우저 창의 오른쪽 상단에 있는 수직 타원을 통해 액세스할 수 있습니다(개발자 도구가 아님) / 인쇄...
esc를 사용하여 미리보기 창을 취소합니다.
IntelliJ IDEA 및 Chrome을 사용하는 워크플로우의 경우 cmd-s, cmd-tab, cmd-r, cmd-p, esc, cmd-tab이 있으며 IDE로 돌아갑니다.
Windows 10의 Chrome 62에는 동일한 인쇄...ctrl-p로 액세스할 수 있는 동일한 위치의 메뉴:
언급URL : https://stackoverflow.com/questions/9519556/faster-way-to-develop-and-test-print-stylesheets-avoid-print-preview-every-time
'programing' 카테고리의 다른 글
| Powershell 모듈에서 "헬퍼" 기능을 숨기는 방법 (0) | 2023.08.20 |
|---|---|
| Grafana에 대해 SQL 쿼리로 선택한 시간 간격을 기반으로 동적으로 가동 시간 계산 (0) | 2023.08.20 |
| Ubuntu에서 apt-get 업데이트를 실행할 때 Docker Repository에 릴리스 파일이 없음 (0) | 2023.08.20 |
| 어떻게 하면 트위터 부트스트랩 하위 메뉴를 왼쪽에서 열 수 있습니까? (0) | 2023.08.20 |
| TypeScript를 사용하여 Angular 2 구성 요소에서 모델 클래스를 선언하려면 어떻게 해야 합니까? (0) | 2023.08.20 |