web-dev-qa-db-ja.com

印刷スタイルシートをデバッグするための提案はありますか？

私は最近、ウェブサイトの印刷スタイルシートに取り組んでおり、それを微調整する効果的な方法に途方に暮れていることに気付きました。画面上のレイアウトを操作するためのリロードサイクルを設定することは1つのことです。

  • 変更コード
  • コマンドタブ
  • リロード

しかし、印刷しようとすると、そのプロセス全体がはるかに困難になります。

  • 変更コード
  • コマンドタブ
  • リロード
  • 印刷する
  • 印刷プレビュー画像に目を細める
  • プレビューでPDFを開いて、さらに検査します

ここで見逃しているツールはありますか？ WebKitのインスペクターには「これはページングされたメディアであるかのように」チェックボックスがありますか？ Firebug（shudder）でできる魔法はありますか？

cssprintingfirebuggoogle-chrome-devtoolsweb-inspector
237
Jim Puls

Chromeのインスペクターにはそのためのオプションがあります。

  1. DevToolsインスペクターを開きます（mac： Cmd + Shift + C 、ウィンドウ： Ctrl + Shift + C）
  2. デバイスモードの切り替えアイコンをクリックします Toggle device mode button、DevToolsパネルの左上隅にあります。 （ウィンドウ： Ctrl+Shift+M、 マック： Cmd+Shift+M）。
  3. その他のオーバーライドをクリックします more overrides ブラウザビューポートの右上隅にあるアイコンをクリックして、devtoolsドロワーを開きます。

  4. 次に、エミュレーションドロワーでMediaを選択し、CSS mediaチェックボックスをオンにします。

    enter image description here

これでうまくいくはずです。

更新：DevToolsのメニューが変更されました。右上隅にある[3つのドット]メニューをクリックして、[その他のツール]をクリックすると表示されます。 >レンダリング設定>メディアのエミュレート>印刷。

ソース： Google DevToolsページ *

325
Rafael Nogueira

HTMLを使用してPDFアプローチを使用せずに、印刷されたウィンドウをできるだけ制御したい場合、@ media画面を使用してデバッグする-最終的なcssの@media print

最新のブラウザでは、@media queryでinchesおよびptsを使用して、印刷時に何が起こるかをすばやく視覚的に確認できます。

@media screen and (max-width:8.5in) { /* resize your window until the event is triggered */
    html { width:8.5in; }
    body { font: 9pt/1.5 Arial, sans-serif; } /* Roughly 12px font */
 ...
}

ブラウザに「インチ」が表示されると、何が期待できるのかがよくわかります。このアプローチでは、印刷プレビューの方法がすべて終了するはずです。すべてのプリンターはptおよびinユニットで動作し、@ mediaテクニックを使用すると、何が起こるかをすばやく確認し、それに応じて調整できます。 Firebug（または同等のもの）は、そのプロセスを完全に促進します。 @mediaに変更を追加すると、media = "print"属性を使用して、リンクされたCSSファイルに必要なすべてのコードが得られます。@ media画面ルールを参照ファイルにコピー/貼り付けするだけです。

幸運を。ウェブは印刷用に構築されていません。ブラウザーで見られるものと同じスタイル、スタイル、すべてのコンテンツを配信するソリューションを作成することは、時には不可能な場合があります。たとえば、主に1280 x 1024のオーディエンス向けの流動的なレイアウトは、常にニースで端正な8.5 x 11レーザープリントに簡単に変換できるとは限りません。

PurusalのW3Cリファレンス： http://www.w3.org/TR/css3-mediaqueries/

72
Dawson

Chrome 48Renderingタブ内で印刷スタイルをデバッグできます。

インスペクターの右上にあるメニューアイコンをクリックし、Rendering Settingsをクリックします。

編集
Chrome 58の場所はWebインスペクター>メニュー>その他のツール>レンダリングに変更されました

20
minlare

Chrome v41にはありますが、わずかに異なる場所にあります。

enter image description here

19
johntrepreneur

HTMLコードのメディア属性を切り替えることなく印刷スタイルシートをデバッグする簡単な方法があります（もちろん、指摘されているように、幅/ページの問題は解決しません）。

  • Firefox + Web Developer拡張機能を使用します。
  • [Web開発者]メニューで、[CSS]/[メディアタイプ別CSSを表示]/[印刷]を選択します。
  • Web Developerメニューに戻り、Options/Persist Featuresを選択します

これで印刷CSSが表示され、ページを無期限にリロードできます。完了したら、「機能の保持」のチェックを外してリロードすると、画面CSSが再び表示されます。

HTH。

16
Capsule

Rflnogueiraによる回答に続いて、現在のChrome設定（40.0。*）は次のようになります。

chrome print css emulation

8
Anil Vangari

デバッグ中にmedia="screen"を使用してブラウザに印刷スタイルシートを表示するだけです。印刷プレビュービューでは、通常のブラウジングモードと同じレンダリングエンジンが使用されるため、それを使用して正確な結果を得ることができます。

5
Tatu Ulmanen

2019-更新された手順

  1. Chromeインスペクターを開きます
    • FromMac=> option + command + i
    • FromWindows=> F12

  2. customize and control devToolsenter image description here

  3. More Toolsを選択します

  4. Renderingを選択します

  5. Emulate CSS Mediaまで下にスクロールします

  6. 下矢印からprintを選択します

enter image description here

1
jso1919

ページのコンテンツを参照する印刷スタイルシートを使用して新しいウィンドウに書き換える印刷機能がある場合は、紙の上でどのように見えるかをよりよく理解でき、デバッグすることができますfirebugも好きです。

JavaScript/jqueryでこれを行う方法の例を次に示します

        $("#Print").click(function () {
            var a = window.open('', '', 'scrollbars=yes,width=1024,height=768');
            a.document.open("text/html");
            a.document.write("<html><head>");
            a.document.write('<link rel="stylesheet" href="css/style.css" />');
            a.document.write('<link rel="stylesheet" href="css/print.css" />');
            a.document.write("</head><body>");
            a.document.write($('#Content').html());
            a.document.write('</body></html>');
            a.document.close();
            a.print();
        });
0
Blowsie