웹 사이트를 개발 중이며 인쇄보기에서 작업해야합니다. 일반적으로 레이아웃 문제가 발생하면 Chrome의 요소 검사기를 사용합니다. 그러나 이것은 인쇄 미리보기 모드에는 존재하지 않습니다.
Chrome 플러그인 또는 크롬 자체에서보기 매체를 변경하여 프린터처럼 페이지를 볼 수있는 다른 방법이 있습니까? Chrome 전용 솔루션은 없지만 브라우저가 기본 솔루션이므로 브라우저 내 솔루션을 사용하는 것이 좋습니다.
지금은 인쇄 미리보기 매체에만 중점을두고 있지만 지원되는 용지 종류 (예 : 모든 / 점자 / 양각 / 핸드 헬드 / 인쇄 / 투영 / 스크린 / 음성 / tty /)로 변경하는 것이 이상적입니다. TV).
답변
참고 :이 답변은 여러 버전의 Chrome에 적용 되며 업데이트 된 변경 사항이있는 v52 , v48 , v46 , v43 및 v42 를 보려면 스크롤하십시오 .
크롬 v52 + :
- 개발자 도구를 엽니 다 (Windows : F12또는 Ctrl+ Shift+ I, Mac : Cmd+ Opt+ I)
- 클릭 사용자 정의 및 제어 DevTools로 햄버거 메뉴 버튼을 선택합니다 설정을 렌더링> 더보기를 (또는 렌더링 최신 버전에서).
- 체크 에뮬레이션 인쇄 용지 상기 체크 박스 렌더링 탭과 선택 인쇄 용지 종류를.
Chrome v48 이상 (알렉스에게 감사합니다) :
- 개발자 도구를 엽니 다 ( CTRLSHIFTI또는 F12)
- 왼쪽 상단 모서리에서 장치 모드 전환 버튼 ( CTRLSHIFTM)을 클릭하십시오 .
- (1)의 메뉴에서 콘솔 표시를 클릭하여 콘솔이 표시되는지 확인하십시오 ( ESC개발자 도구 모음에 초점이있는 경우 키가 콘솔을 토글 함).
- (2)의 메뉴에서 렌더링 을 선택하여 열 수있는 렌더링 탭에서 인쇄 매체 에뮬레이션을 확인하십시오 .
크롬 v46 + :
- 개발자 도구를 엽니 다 ( CTRLSHIFTI또는 F12)
- 왼쪽 상단 모서리에서 장치 모드 전환 버튼을 클릭하십시오 (1).
- 메뉴 버튼 (2)> 콘솔 표시 (3)를 클릭하거나 ESC키를 눌러 콘솔을 전환 하여 콘솔이 표시되는지 확인하십시오 ( 개발자 도구 모음에 초점이있는 경우에만 작동 함).
- 에뮬레이션 (4)> 미디어 (5) 탭을 열고 CSS 미디어를 확인한 후 인쇄 (3)를 선택하십시오 .
크롬 v43 + :
- 2 단계의 서랍 아이콘이 변경되었습니다.
크롬 v42 :
- 개발자 도구를 엽니 다 ( CTRLSHIFTI또는 F12)
- 왼쪽 상단 모서리에서 장치 모드 전환 버튼을 클릭하십시오 (1).
- 드로어 표시 단추 (2) 를 클릭 하거나 ESC키를 눌러 드로어를 전환하여 드로어 가 표시되는지 확인하십시오 .
- 아래에서 에뮬레이션> 미디어 체크 CSS 미디어 선택 인쇄 (3).
답변
Chrome 32 에서 변경 35+
Chrome 35 이상에서는 기본적으로 ‘에뮬레이션’탭이 있습니다. 또한 기본 탭에서 콘솔을 사용할 수 있습니다.
DevTools에서 설정-> 재정의로 이동하십시오.“콘솔 서랍에 에뮬레이션보기 표시”사용설정을 닫고 ‘요소’탭으로 이동하십시오.- 히트 Esc콘솔을 가지고
- “에뮬레이션”탭을 선택하고 “스크린”을 클릭하십시오.
- “CSS 미디어”로 스크롤하여 “인쇄”를 선택하십시오.
이 옵션은 콘솔 탭에서 사용할 수 없습니다 (아직?).
답변
Chrome 32부터 서랍 탭 섹션에 CSS media
옵션 이 있습니다 .Screen
Emulation
사용하도록 설정 print
하고 대상 미디어 유형으로 선택한 다음 페이지가 인쇄되는 방식과 거의 동일하게 렌더링됩니다.
사용 Esc이 보이지 않는 경우 서랍을 불러옵니다.
답변
Chrome 48 (그리고 아마도 몇 가지 이전 버전)부터는 기능이 다시 이동 한 것으로 보입니다.
처음 몇 단계는 변경되지 않았습니다.
-
F12개발자 도구를 불러 오려면 누르십시오
-
ESC콘솔을 열려면 누르 십시오
이전 답변에 따르면 설정은 “에뮬레이션”탭에서 찾을 수 있습니다. 아래 이미지에서 볼 수 있듯이 이제 “렌더링”탭으로 이동했습니다. “콘솔”탭의 왼쪽에있는 세 개의 점을 클릭하면 표시됩니다.
답변
답변
Chrome 48 이상에서는 다음 단계를 통해 인쇄 미리보기에 액세스 할 수 있습니다.
-
개발 도구 – Ctrl/Cmd+ Shift+를 I열거 나 페이지를 마우스 오른쪽 버튼으로 클릭하고 ‘검사’를 선택하십시오.
-
Esc추가 서랍을 열려면 누르 십시오.
-
‘렌더링’이 아직 표시되지 않은 경우 3 도트 케밥을 클릭하고 ‘렌더링’을 선택하십시오.
-
‘인쇄 매체 에뮬레이션’확인란을 선택하십시오.
여기에서 Chrome에 페이지의 인쇄 버전이 표시되며 브라우저 버전과 마찬가지로 요소를 검사하고 문제를 해결할 수 있습니다.