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

Program / 글쓴이

웹 사이트를 개발 중이며 인쇄보기에서 작업해야합니다. 일반적으로 레이아웃 문제가 발생하면 Chrome의 요소 검사기를 사용합니다. 그러나 이것은 인쇄 미리보기 모드에는 존재하지 않습니다.

Chrome 플러그인 또는 크롬 자체에서보기 매체를 변경하여 프린터처럼 페이지를 볼 수있는 다른 방법이 있습니까? Chrome 전용 솔루션은 없지만 브라우저가 기본 솔루션이므로 브라우저 내 솔루션을 사용하는 것이 좋습니다.

지금은 인쇄 미리보기 매체에만 중점을두고 있지만 지원되는 용지 종류 (예 : 모든 / 점자 / 양각 / 핸드 헬드 / 인쇄 / 투영 / 스크린 / 음성 / tty /)로 변경하는 것이 이상적입니다. TV).

답변

참고 :이 답변은 여러 버전의 Chrome에 적용 되며 업데이트 된 변경 사항이있는 v52 , v48 , v46 , v43 및 v42 를 보려면 스크롤하십시오 .

크롬 v52 + :

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

크롬 v52 +

Chrome v48 이상 (알렉스에게 감사합니다) :

  • 개발자 도구를 엽니 다 ( CTRLSHIFTI또는 F12)
  • 왼쪽 상단 모서리에서 장치 모드 전환 버튼 ( CTRLSHIFTM)을 클릭하십시오 .
  • (1)의 메뉴에서 콘솔 표시를 클릭하여 콘솔이 표시되는지 확인하십시오 ( ESC개발자 도구 모음에 초점이있는 경우 키가 콘솔을 토글 함).
  • (2)의 메뉴에서 렌더링 을 선택하여 열 수있는 렌더링 탭에서 인쇄 매체 에뮬레이션을 확인하십시오 .

크롬 v48 +

크롬 v46 + :

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

Chrome v46 + 지원

크롬 v43 + :

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

Chrome v43에서 인쇄 매체 쿼리 에뮬레이션

크롬 v42 :

  • 개발자 도구를 엽니 다 ( CTRLSHIFTI또는 F12)
  • 왼쪽 상단 모서리에서 장치 모드 전환 버튼을 클릭하십시오 (1).
  • 드로어 표시 단추 (2) 를 클릭 하거나 ESC키를 눌러 드로어를 전환하여 드로어 가 표시되는지 확인하십시오 .
  • 아래에서 에뮬레이션> 미디어 체크 CSS 미디어 선택 인쇄 (3).

Chrome v42에서 인쇄 매체 쿼리 에뮬레이션

답변

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 개발자 도구 관리자 열기

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

설정 / 설정 열기

답변

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

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

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

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

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

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

개발자 도구의 Chrome 49+ 인쇄 미리보기 옵션 이미지

답변

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

Chrome 인쇄 배경색이 무시되었습니다.