인쇄 미리보기 모드에서 Chrome의 요소 검사기를 사용하십니까?

인쇄 미리보기 모드에서 Chrome의 요소 검사기를 사용하십니까?

---

웹 사이트를 개발 중이며 인쇄보기 작업이 필요합니다. 일반적으로 레이아웃 문제가있을 때 Chrome의 Element Inspector를 사용합니다. 그러나 이것은 인쇄 미리보기 모드에는 존재하지 않습니다.

프린터처럼 페이지를보기 위해 크롬 플러그인 또는 크롬 자체 내에서보기 매체를 변경하는 다른 방법이 있습니까? Chrome 전용 솔루션이 아니라고 생각하지만 기본 브라우저이므로 브라우저 내 솔루션이 있으면 좋을 것입니다.

지금은 인쇄 미리보기 매체에만 초점을 맞추고 있지만 지원되는 모든 매체 유형 (예 : all / braille / embossed / handheld / print / projection / screen / speech / tty /)으로 변경하는 것이 이상적입니다. TV).

---

참고 :이 답변은 여러 버전의 Chrome을 다루며, 스크롤하여 v52 , v48 , v46 , v43 및 v42 각각 업데이트 된 변경 사항을 확인합니다.

Chrome v52 + :

• 개발자 도구를 엽니 다 (Windows : F12또는 Ctrl+ Shift+ I, Mac : Cmd+ Opt+ I).
• 클릭 사용자 정의 및 제어 DevTools로 햄버거 메뉴 버튼을 선택합니다 설정을 렌더링> 더보기를 (또는 렌더링 최신 버전에서).
• 체크 에뮬레이션 인쇄 용지 상기 체크 박스 렌더링 탭과 선택 인쇄 용지 종류를.

Chrome v48 + (알렉스에게 알려 주셔서 감사합니다) :

• 개발자 도구 ( CTRLSHIFTI또는 F12)를 엽니 다.
• 왼쪽 상단 모서리에 있는 Toggle device mode 버튼 ( CTRLSHIFTM)을 클릭합니다.
• (1)의 메뉴에서 콘솔 표시를 클릭하여 콘솔이 표시되는지 확인합니다 ( ESC개발자 도구 모음에 포커스가있는 경우 키를 누르면 콘솔이 전환됨).
• (2)의 메뉴에서 렌더링 을 선택하여 열 수있는 렌더링 탭에서 인쇄 매체 에뮬레이션을 확인 합니다.

Chrome v46 + :

• 개발자 도구 ( CTRLSHIFTI또는 F12)를 엽니 다.
• 왼쪽 상단 모서리에 있는 Toggle device mode 버튼 (1)을 클릭합니다.
• 메뉴 버튼 (2)> 콘솔 표시 (3)를 클릭하거나 ESC키를 눌러 콘솔을 전환 하여 콘솔이 표시되는지 확인합니다 ( 개발자 도구 모음에 포커스가있을 때만 작동 함).
• 에뮬레이션 (4)> 미디어 (5) 탭을 열고 CSS 미디어를 확인한 다음 인쇄 (3)를 선택 합니다.

Chrome v43 + :

• 2 단계의 서랍 아이콘이 변경되었습니다.

Chrome v42 :

• 개발자 도구 ( CTRLSHIFTI또는 F12)를 엽니 다.
• 왼쪽 상단 모서리에 있는 Toggle device mode 버튼 (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은 페이지의 인쇄 버전을 표시하고 브라우저 버전과 마찬가지로 요소를 검사하고 문제를 해결할 수 있습니다.

---

Google 크롬에서 PDF로 인쇄를 사용하여 CSS를 디버깅하고 CSS 요소 배경색이 표시되지 않는 경우 '배경 그래픽'확인란이 선택되어 있는지 확인하세요. 거의 30 분 동안 내 CSS를 디버깅하고 내 CSS 배경이 무시되는 원인이 무엇인지 궁금했습니다.

---

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

저를 이끈 다른 모든 포스터와 이미지없이 답변을 제공 한 포스터에 감사드립니다.

---

Chrome v67 (mac) :

1. Hold down Cmd+opt+j to open dev tools
2. click the ... on the righthand side, and choose: More Tools >> Rendering
3. When the Rendering window shows up at the bottom of the screen, Emulate CSS Media section and choose: "Screen" from the dropdown.
4. Go to "File >> Print" and you should see the view you want printing.

Images of the above description for Chrome v67 on a mac:

Where to find the Rendering tab: Click the ... on the righthand side, and choose: More Tools >> Rendering

How to get the "screen" view to print: When the Rendering window shows up at the bottom of the screen, Emulate CSS Media section and choose: "Screen" from the dropdown.

Hope it helps.

---

With shortcuts available, the quickest way is to

1. Open the Developer Tools

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

2. 명령 메뉴 열기

   • Windows : Ctrl+ Shift+P
   • Mac : Cmd+ Shift+P

3. 상황에 맞는 메뉴에서 CSS 인쇄 매체 유형 에뮬레이션을 입력 print하고 선택 합니다.

   

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

---

Chrome v50 :

방법 1 :

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

방법 2 :

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

참고 URL : https://stackoverflow.com/questions/9540990/using-chromes-element-inspector-in-print-preview-mode