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

238

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

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

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

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

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

css  printing  firebug  google-chrome-devtools  web-inspector 
— ジム・プルス
ソース
4
対応しているブラウザ（Firefoxなど）の「印刷プレビュー」機能はどうですか？私は（ほとんど正確に）印刷するためにいくつかのWebページをデバッグしました。
— ハリルÖzgür
2
— outis
3
Firefoxで、Shift + F2を押して「開発者ツールバー」を開き、「media emulate print」（または「emu」+ Tab +「print」）と入力して、Enterキーを押します。
— Marcello Nuccio
@MarcelloNuccioこれは答えになるはずです。stackoverflow.com/a/28873496/1696030は、比較のためにかなりの賛成票を獲得しました。「開発者ツールバー」はコマンドラインインターフェイスであるため、少し誤解を招く可能性があります。
— Volker E.17年

回答:

327

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

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

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

    ここに画像の説明を入力してください

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

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

出典：Google DevToolsページ *

— ラファエル・ノゲイラ
ソース
5
ありがとう、それは私が探していたものです、それを見つけることができませんでした：/しかし、ショートカットはもう機能しません。右下隅にあるF12 +歯車のアイコンを実行するだけで、設定は[上書き]タブにあります
— Aurelien
18
残念ながら100％正確ではありません:(
— maazza
9
Chromeで32.0.1700.14 beta-m Aura、「CSSメディア[印刷]をエミュレート」が欠落しています:(
— Rocket Hazmat '15
11
この回答は修正する必要があります。Chrome 48以降、印刷スタイルシートエミュレータは[エミュレーション]ではなく、[レンダリング]にあります。
— chharvey、2016
13
インスペクターの3つのドットのメニュー（右側）>その他のツール>レンダリング設定>メディアのエミュレート>印刷
— allicarn
74

HTMLからPDFへのアプローチを使用せずに、印刷されたウィンドウをできるだけ多く制御したいと思います... @media screenを使用してデバッグ-@media print for final css

最近のブラウザは、あなたの使用して印刷時に発生する何が起こっているかをすばやく視覚的に与えることができますインチとPTSでを@media query。

@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スクリーンルールを参照ファイルにコピー/貼り付けするだけです。

幸運を。Webは印刷用に作成されていません。すべてのコンテンツを提供するソリューションを作成することは、ブラウザーで表示されるスタイルと同じスタイルを使用できない場合があります。たとえば、大部分が1280 x 1024のオーディエンス向けの滑らかなレイアウトは、常に見栄えの良い8.5 x 11のレーザープリントに簡単に変換できるとは限りません。

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

— ドーソン
ソース
このメソッドはかなり賢いことをコメントしたかっただけです。印刷プレビュー機能を使用するよりも、印刷スタイルを「切り替える」ためにウィンドウのサイズをわずかに変更する方がはるかに簡単です。IEとの互換性などのためにこれを行う必要がある場合もありますが、これは印刷スタイルの最初の反復に最適です。
— チャックネルソン、2011年
@チャック。ありがとう。ねえ、私は自分のデモがオフラインであることに気付いたので、そのためのフィドルを作成しました。jsfiddle.net/dNEmT
— ドーソン
20

Chrome 48では、[ レンダリング ]タブ内で印刷スタイルをデバッグできます。

インスペクタとレンダリング設定の右上にあるメニューアイコンをクリックします。

編集
のためにクローム58場所に変更していたWebインスペクタ>メニュー>その他のツール>レンダリング

— ミンレア
ソース
4
Chrome 49：F12（開発者コンソール）-> ESC（コンソール）->レンダリング->印刷メディアのエミュレート
— user1477388
19

Chrome v41にはありますが、少し異なります。

ここに画像の説明を入力してください

— ジョントレプレナー
ソース
3
v53では、代わりに[レンダリング]タブにあります。下部には、提供されているスクリーンショットと同様に、[印刷]を選択できるドロップダウンを有効にするEmulate Mediaのチェックボックスがあります
— James Grey
16

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

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

これで印刷CSSが表示され、ページをいつまでも再読み込みできます。完了したら、「機能の永続化」のチェックを外してリロードすると、画面のCSSが再び表示されます。

HTH。

— カプセル
ソース
7
印刷プレビューとは大幅に異なります。おそらくこれは私のcssの癖です。いずれにせよ、それは問題を解決しません。ありがとう。
— ハートパンク2011年
ええ、私にとってもまったく異なります。私はこのjsfiddle（jsfiddle.net/2wk6Q/3）に従い、印刷プレビューに赤い余白のあるページが表示されますが、これはまったく異なります。
— duality_ 2013年
1
この「回避策」は私にとって最も効果的だと言わざるを得ません。たぶん私は幸運で、それがネイティブの印刷画面とWeb開発者の印刷画面の間にわずかな違いしかない理由ですが、ギャップが表示される理由と最も重要なものを見つけるのに間違いなく役立ちました。オン
— ErikČerpnjak15年
13

ChromeのUIは、v53以降、再び異なります。

この機能を頻繁に使用する必要はありませんが、使用するたびに、追跡して最後にサイクルを実行してからChromeチームが移動した場所を突き止めるには、永遠に時間がかかります。

Chromeブラウザペインの...メニューではなく、Dev Toolsペインの ...メニューであることに注意してください。

MacOSのv53以降のプリンタープレビュー

次に、[レンダリング]セクションを下にスクロールします。多くの場合、スクロールせずに見える範囲にあります。

— TrophyGeek
ソース
1
print.cssデバッグの日を節約できました。あなたは素晴らしいです！
— zazvorniki 2018年
8

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

クロムプリントcssエミュレーション

— アニル・ヴァンガリ
ソース
「メディア」タブを特定するのに少し時間がかかりました。「デバイス」タブで探し続けました。
— Lorin Rivers、
5

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

— タツ・ウルマネン
ソース
14
通常のブラウジングモードにはページがないので、コンテンツがどのように流れるかわかりません。通常のブラウジングモードの幅は特定のピクセル数ですが、ページの幅は特定のインチまたはセンチメートルです。画面と印刷の間には、実装に依存しない基本的な違いがあります。それらの間のデバッグは私が求めているものです。
— Jim Puls
1
クロムでは、この提案だけを使用してもレンダリングはかなり異なります。うまくいきません。
— ハートパンク
「ページ」の幅は簡単に見つけることができますが、高さは本当に難しいです。ブラウザとプリンタの両方が11インチの頭痛の種となるでしょう。Webページは連続した長さです。出力デバイスの種類とブラウザが保証されていなければ、毎回そのようなことが起こるとは思いません。HTMLからPDFへのアプローチを使用しても機能しますが、それはあなたの質問の範囲を超えています。
— ドーソン、
3

2019-更新された手順

  1. Chromeインスペクターを開く
    • Macから=> option+ command+i
    • Windowsから=>F12

  2. 小さな3つの点をクリックします。 customize and control devTools ここに画像の説明を入力してください

  3. 選択する More Tools

  4. 選択する Rendering

  5. 下にスクロールして Emulate CSS Media

  6. print下矢印から選択

ここに画像の説明を入力してください

— jso1919
ソース
0

印刷スタイルシートを参照して、ページのコンテンツを新しいウィンドウに書き換える印刷関数がある場合、紙に表示される様子がよくわかり、デバッグすることができます。 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();
        });
— ブロージー
ソース
2
この方法の問題は、ユーザーがブラウザで単に「印刷...」を選択した場合、このJavaScript関数が呼び出されないことです。
— Ken Liu
ユーザーに印刷機能を表示する必要はありません。必要に応じて、デバッグ機能に使用できます
— Blowsie
これは、ブラウザがすでに行っていることに対する過度に設計されたソリューションです。ただ、使用media="print"して media="screen"、それぞれ自分のスタイルシートのためにだけ呼び出し、印刷プレビューにブラウザのメニューやキーコンボを使用しています。（この場合、ポップアップを開くことと同じです）そして、デバッグしているだけなら、media="screen"デバッグが完了するまで、印刷スタイルに属性を適用し ます。
— ORyan
-1

ここに画像の説明を入力してください

：これはので、私は特に使用するものであるスクリーン、印刷、携帯用メディア、投影スクリーン、テレビメディア、desitnタイムスタイルシートなど：Dreamweaverでのショーあなたが望む事実上すべてのレンダリングオプションというツールバーがあり、即座に1にプレビューが表示されますがボタンを1回押す。

— サム
ソース
1
知っておくと便利ですが、開発するレンダリングエンジンとは異なるレンダリングエンジンを使用する必要があり、リロード以上のものが必要です。ありがとう。
— ハートパンク2011年
1
これは2011年にすでに限定されたプラットフォームでのみ購入可能な専用のソフトウェアであり、オープンウェブをデバッグするために必要な機能を取得するために支払う必要がありました。
— Volker E.17年
-7

マクロを使用して、キープレスとマウスクリックを繰り返し送信します。Windowsでは、AutoHotKeyは優れたソフトウェアであり、OS XではOsXの代替AHKの一種である Automatorについて読むことができます。

Windowsでは（OS XではCtrlをCmdに置き換えます）、「Ctrl-s /開いているウィンドウのリストにある場合は常にFxウィンドウに切り替えます/ Ctrl-r」を1つの未使用のキーにバインドすると、興味のないタスクによるフラストレーションを回避し、最終的に腕を節約できますRSIから:)

— FelipeAls
ソース
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.