웹 사이트를 개발 중이며 인쇄보기에서 작업해야합니다. 일반적으로 레이아웃 문제가 발생하면 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 이상에서는 기본적으로 '에뮬레이션'탭이 있습니다. 또한 기본 탭에서 콘솔을 사용할 수 있습니다.

1. DevTools에서 설정-> 재정의로 이동하십시오.
2. "콘솔 서랍에 에뮬레이션보기 표시"사용
3. 설정을 닫고 '요소'탭으로 이동하십시오.
4. 히트 Esc콘솔을 가지고
5. "에뮬레이션"탭을 선택하고 "스크린"을 클릭하십시오.
6. "CSS 미디어"로 스크롤하여 "인쇄"를 선택하십시오.

이 옵션은 콘솔 탭에서 사용할 수 없습니다 (아직?).

Chrome 32부터 서랍 탭 섹션에 CSS media옵션 이 있습니다 .ScreenEmulation

사용하도록 설정 print하고 대상 미디어 유형으로 선택한 다음 페이지가 인쇄되는 방식과 거의 동일하게 렌더링됩니다.

사용 Esc이 보이지 않는 경우 서랍을 불러옵니다.

Chrome 48 (그리고 아마도 몇 가지 이전 버전)부터는 기능이 다시 이동 한 것으로 보입니다.

처음 몇 단계는 변경되지 않았습니다.

1. F12개발자 도구를 불러 오려면 누르십시오

2. ESC콘솔을 열려면 누르 십시오

이전 답변에 따르면 설정은 "에뮬레이션"탭에서 찾을 수 있습니다. 아래 이미지에서 볼 수 있듯이 이제 "렌더링"탭으로 이동했습니다. "콘솔"탭의 왼쪽에있는 세 개의 점을 클릭하면 표시됩니다.

이 기사를 참조 하십시오

그런 다음 '재정의'탭으로 이동하십시오.

Chrome 48 이상에서는 다음 단계를 통해 인쇄 미리보기에 액세스 할 수 있습니다.

1. 개발 도구 – Ctrl/Cmd+ Shift+를 I열거 나 페이지를 마우스 오른쪽 버튼으로 클릭하고 '검사'를 선택하십시오.

2. Esc추가 서랍을 열려면 누르 십시오.

3. '렌더링'이 아직 표시되지 않은 경우 3 도트 케밥을 클릭하고 '렌더링'을 선택하십시오.

4. '인쇄 매체 에뮬레이션'확인란을 선택하십시오.

여기에서 Chrome에 페이지의 인쇄 버전이 표시되며 브라우저 버전과 마찬가지로 요소를 검사하고 문제를 해결할 수 있습니다.

Chrome에서 PDF로 인쇄를 사용하여 CSS를 디버깅하고 CSS 요소 배경색이 표시되지 않으면 '배경 그래픽'확인란이 선택되어 있는지 확인하십시오. CSS를 디버깅하고 CSS 배경이 무엇을 무시하는지 궁금해하는 데 거의 30 분이 걸렸습니다.

Mac의 Chrome v51에서 오른쪽 상단 모서리를 클릭하고 추가 도구> 렌더링 설정을 선택하고 창 하단에 제공된 옵션에서 미디어 에뮬레이션 단추를 확인하여 렌더링 설정을 찾았습니다.

나를 이끌어 준 다른 모든 포스터에 감사하고 이미지없이 대답을 제공 한 사람들에게 감사드립니다.

Chrome v67 (mac) :

1. Cmd+opt+j개발 도구를 열려면 길게
2. ...오른쪽의을 클릭하고 추가 도구 >> 렌더링을 선택하십시오.
3. 화면 하단에 렌더링 창이 나타나면 CSS 미디어 에뮬레이션 섹션을 선택하고 드롭 다운에서 "화면"을 선택하십시오.
4. "파일 >> 인쇄"로 이동하면 인쇄 할보기가 나타납니다.

Mac에서 Chrome v67에 대한 위 설명 이미지 :

렌더링 탭을 찾는 위치 : ...오른쪽에서을 클릭하고 추가 도구 >> 렌더링을 선택하십시오.

"화면"보기를 인쇄하는 방법 : 화면 하단에 렌더링 창이 나타나면 CSS 미디어 에뮬레이션 섹션을 선택하고 드롭 다운에서 "화면"을 선택하십시오.

도움이 되길 바랍니다.

바로 가기를 사용할 수있는 가장 빠른 방법은

1. 개발자 도구를 엽니 다

   • Windows : F12또는 Ctrl+ Shift+I
   • 맥 : Cmd+ Opt+I

2. 명령 메뉴를 엽니 다

   • 윈도우 : Ctrl+ Shift+P
   • 맥 : Cmd+ Shift+P

3. 상황에 맞는 메뉴에서 CSS 인쇄 용지 종류 에뮬레이션을 입력 print하고 선택 합니다

   

lmeurs 의 우수하고 현재 가장 많이지지 되는 답변을 보면 이 솔루션은 시간이 지남에 따라 안정적으로 유지 될 수 있다고 생각합니다.

크롬 v50 :

방법 1 :

1. 메뉴> 기타 도구> 렌더링 설정 (이미지 참조)
2. 아래 : 렌더링 탭> 미디어 "인쇄"에뮬레이션

방법 2 :

1. 콘솔 열기 [esc]
2. 콘솔 메뉴> 렌더링