인쇄 가능한 CSS를 어떻게 디버깅합니까?

인쇄 가능한 CSS를 어떻게 디버깅합니까?

---

저는 항상 Firebug와 IE Developer Toolbar를 사용하여 까다로운 CSS 문제를 디버깅합니다. 그러나 때때로 페이지를 인쇄 할 때만 나타나는 까다로운 버그가 나타납니다.

이와 같은 문제를 진단하기 위해 어떤 기술 / 도구를 사용하십니까? 인쇄보기에서 기존 CSS 디버깅 도구를 더 많이 사용할 수있는 방법이 있습니까?

업데이트 : 용지 낭비를 피하기 위해 이미 PDF 프린터를 사용하고 있습니다. 내 문제는 인쇄 된 DOM을 마우스 오른쪽 버튼으로 클릭 할 수 없다는 것입니다. 아래의 다른 답변 중 일부는 매우 유용합니다. 감사합니다. :-)

---

Chrome 51에서 :

devtools ( CTRL + F12또는 CTRL + SHIFT + I) 를 열고 ...메뉴를 클릭 한 다음 클릭 하여 개발자 콘솔 More Tools > Rendering settings의 Rendering탭 을 엽니 다 (또는 콘솔이 열려있는 경우이 탭으로 이동).

해당 탭에서 확인란을 선택하고 선택합니다 Emulate Media: print.

---

그냥 의해 코멘트 발견 리 - penkman 파이어 폭스의 새로운 기능에 대한 여기를 누르세요 Shift-F2파이어 폭스에서 다음, 브라우저 콘솔 (안 자바 스크립트 콘솔)를 엽니 다 입력 media emulate print. 절대적으로 훌륭하게 작동합니다!

---

2018 년 9 월 업데이트 : Firefox 62부터 개발자 콘솔이 사라졌습니다. 지금은 인쇄 스타일 에뮬레이션을 활성화하는 방법이없는 것 같습니다.

---

WebDeveloper 플러그인과 CSS-> 미디어 유형별 CSS 표시-> 인쇄를 사용하여 인쇄 할 때처럼 CSS를 봅니다. Firebug의 검사 유틸리티는 플러그인에 의해 필터링 된 CSS와 함께 작동합니다.

---

Firefox와 개발자 도구 모음을 사용 합니다.

작업 표시 줄에서 실시간 CSS 편집 도구를 사용합니다. 실시간으로 결과를 확인하면서 즉시 CSS를 수정하는 것이 매우 유용합니다.

또한 웹 사이트에서 div 및 마우스 위에있는 것과 같은 개요 기능을 사용합니다. div를 찾는 데 정말 도움이됩니다.

인쇄 문제는 CSS-> 미디어 별 CSS 스타일 표시-> 인쇄로 이동하십시오.

이 도구에는 다른 많은 도구가 있습니다. 아마 약 10 %를 사용합니다.

유용한 것을 찾으십시오.

---

크롬 개발자 도구 (Mac의 경우 F12 \ Ctrl (Mac의 경우 cmd) + Shift + C) : 에뮬레이션 탭 (Chrome 32부터 IMHO)에는 '미디어'탭이 있습니다.

여기에서 미디어 에뮬레이션 확인란을 선택하고 에뮬레이션하려는 미디어 ( '인쇄', '화면'등)를 선택할 수 있습니다.

---

인쇄 CSS를 마지막에 나열하고 CSS 링크 또는 가져 오기 문에서 "인쇄"조건을 제거하는 것은 어떻습니까? 그런 다음 브라우저 창에서 인쇄 CSS를 디버깅합니다.

---

저는 Adobe PDF 가상 프린터를 사용합니다. 잉크와 종이를 낭비하지 않고 실제 프린터에 가장 가까운 프린터이기 때문입니다.

어쨌든 인쇄용으로 별도의 CSS를 사용하는 것이 좋습니다. 그래픽은 훨씬 단순하고 디자인 용도로만 사용하는 이미지는 적습니다.

---

나는 항상 웹 개발자 도구 모음을 사용했지만 (다른 답변에서 설명했듯이) Firebug는 때때로 일부 스타일을 놓치는 것 같습니다. 그래서 브라우저에 북마크를 추가하고 북마크의 URL로 다음 자바 스크립트를 추가했습니다. 이제 북마크를 클릭하여 인쇄 스타일로 간단히 전환 할 수 있습니다.

javascript:(function(){var%20h,a,f;a=document.getElementsByTagName('link');for(h=0;h<a.length;h++){f=a[h];if(f.rel.toLowerCase().match(/stylesheet/)&&f.href&&(f.media=='print'||f.media=='screen')){var%20g=f.href.replace(/(&|%5C?)forceReload=\d+/,'');if(f.media.toLowerCase().match(/screen/))f.media="dontshow";if(f.media.toLowerCase().match(/print/))f.media="all";f.href=g+(g.match(/\?/)?'&':'?')+'forceReload='+(new%20Date().valueOf());}}})()

위의 코드는 모든 스타일 시트 링크를 찾고 그것이 media = print인지 테스트하고 만약 그렇다면 media = all로 변경하고 (그리고 media = dontshow로 대체하여 모든 media = screen을 숨 깁니다) 시간 토큰을 추가하여 스타일 시트를 다시로드합니다. URL. 기본 재로드 스크립트는 다른 사람의 것이므로 미디어 부분을 추가했습니다. 이것은 나를 위해 잘 작동합니다!

설명을 위해 위의 JavaScript URL에서 더 읽기 쉬운 버전입니다.

javascript: (function() {
    var h, a, f;
    a = document.getElementsByTagName('link');
    for (h = 0; h < a.length; h++) {
        f = a[h];
        if (f.rel.toLowerCase().match(/stylesheet/) && f.href && (f.media == 'print' || f.media == 'screen')) {
            var g = f.href.replace(/(&|\?)forceReload=\d /, '');
            if (f.media.toLowerCase().match(/screen/)) f.media = "dontshow";
            if (f.media.toLowerCase().match(/print/)) f.media = "all";
            f.href = g(g.match(/\?/) ? '&' : '?')
            'forceReload=' (new Date().valueOf());
        }
    }
})()

---

돈을 지불하지 않으려면 Microsoft XPS Document Writer로 인쇄하십시오. 또는 자금이있는 경우 SnagIt을 사용 하십시오 (사이트에서 무료 평가판 사용).

---

Firefox 69에서 인쇄 매체를 시뮬레이션하는 버튼을 찾았습니다. 개발자 도구 (F12)를 열고 Inspector를 클릭하세요.

참고 URL : https://stackoverflow.com/questions/726825/how-do-you-debug-printable-css