1. ホーム
  2. 質問と答え
  3. オンラインツールを使用してブラウザの印刷出力をテストするにはどうすればよいですか？

オンラインツールを使用してブラウザの印刷出力をテストするにはどうすればよいですか？

2012-05-27 10 views
16

私は、ウェブページの印刷がオンライン版とどのように異なるべきかを指定するために（通常通り）@media printの規則を使用しました。これはかなりうまくいくが、テストは本当に難しい。私は通常、関係していることは、次の手順は次のとおりです。オンラインツールを使用してブラウザの印刷出力をテストするにはどうすればよいですか？

  1. screenとprintのための別のスタイルを作成します。
  2. ページを画面モードで開始します。
  3. ページを印刷します。 PDFプリンタに転送します。
  4. 結果を確認してください。
  5. 正しく動作しないルールを見つけようとします。
    6. 私がやりたい（ただし、任意のブラウザでそれを行うことができませんでした）だろうか

：

  1. screenとprintのための別のスタイルを作成します。
    2. あなたのページが
  2. スクリーンモードで起動し
  3. プレビュー印刷モードに入ります（オペラ、利用できるFirefox用など）
  4. DOMを検査するFirebugの（Firefoxの）またはトンボ（オペラ）のような利用可能なツールを使用し、現在のスタイル。
  5. オンザフライでCSSを変更し、ページをリロードして、結果とDOMを再度確認します。

ブラウザ、ブラウザ、プラグイン、およびプロセスの組み合わせで、類似の結果が得られますか？あなたがファイルの組織を変更する方法を知っていれば、望む結果を得るために最小限の変更で、あなたは大歓迎です。

出典

2012-05-27 mliebelt

答えて

8

「Web Developer」（https://addons.mozilla.org/en-US/firefox/addon/web-developer/）と呼ばれるFirefoxプラグインには、「メディアタイプ別にCSSを表示」オプションがあります。

出典

2012-05-27 12:33:28 Pino

+0

私は今（DOMインスペクタと同様に）インストールしており、少なくとも部分的に私のために働いています。表示のバグはたくさんありますが、時には機能しなくなることもありますので、もう少し調べてみる必要があります。 – mliebelt

+0

うーん、ここでうまくいく。それは開発者のための最もホットなプラグインの1つです（Firebugの後、もちろん）。 – Pino

+0

初めてテストしたときに、メニュー項目の「メディアタイプによるCSSの表示」に違いは見られませんでした。私の答えに記載されている技術を使ってWebアプリケーションを修正した後、メディアタイプを切り替えるときと同じ結果になりました。グッドスタッフ:-) – mliebelt

1

Print Friendly Google Chrome拡張機能で試したことがありますか？

ボタンを追加し、クリックでウェブページのpdfを生成する素晴らしい拡張機能です。 あなたの現在のプロセスより簡単かもしれないと思っています。

出典

2012-05-27 12:27:54 Katti

+0

私はそれをインストールして、はい、それはどのようにそれは意志よりよい（より即時）ビューを提供します印刷されるが、それは理由を調べるのに役立ちません、DOMを参照してください... – mliebelt

+0

あの機能は、より役立つだろう。 – Katti

0

Using Rails 3.1 assets pipeline to conditionally use certain cssに触発された私の問題とは別の解決策を見つけました。ここではそれがどのように動作するかです：

  • メインHTMLはスタイルシートの次のディレクティブをファイルに

    使用：

    <link href="application.css" media="all" rel="stylesheet" type="text/css" /> 
<link href="screen.css" media="screen" rel="stylesheet" type="text/css" /> 
<link href="print.css" media="print" rel="stylesheet" type="text/css" />

  • は、画面に適した

    • あるあなたのスタイルシート内のすべてのルールを隔離印刷する（スタイルシート：application.css）
    • スクリーン専用（スタイルシート：screen.css）のみ印刷用
      • 適切な
    • （スタイルシート：print.css）

  • あなたのWebページのプリントアウトのテスト時には、あなたのメインのHTMLファイルにスタイルシートを切り替える：

    <link href="application.css" media="all" rel="stylesheet" type="text/css" /> 
<link href="screen.css" media="print" rel="stylesheet" type="text/css" /> 
<link href="print.css" media="screen" rel="stylesheet" type="text/css" />

2行目と3行目のスイッチがmedia="print|screen"であることに注目してください。

これで、メインのHTMLファイルを呼び出すことができ、通常の状態で印刷するとどのように見えるかを確認することができます。 Firefox Firebug、Chrome Developer Tools、Opera DragonFlyなどの通常使用するすべてのツールは正常に動作しますので、DOMを確認したり、ボックスを表示したり、その場でCSSを変更したり、ページをリロードしたりできます。

私はかなりうまく動作しますが、もし私がいくつかの欠点を乗り越えれば、私は戻ってきて、そのことにも気付くでしょう。

出典

2012-05-28 08:06:07 mliebelt

+0

CSSファイルをメディアで区切ることがベストプラクティスです。 HTMLコード内のメディアを切り替えることは明らかな解決策ですが、私はあなたがより自動なものを探していたと思います。 – Pino

1

Print &スクリーンのCSSルールを別々のファイルに指定すると、Chromeデベロッパーツールを使用して簡単に行うことができます。あなたのページをロードし、開発者ツールを開きます。 "Elements"ビューから、media = "print"行を編集して、media = "all"と読んでください。例えば

、あなたのようなあなたのスタイルシートをリンクする場合：

<link href="/static/global/css/theme.css" media="all" rel="stylesheet" type="text/css" /> 
<link href="/static/global/css/print.css" media="print" rel="stylesheet" type="text/css" />

変更：

<link href="/static/global/css/print.css" media="print" rel="stylesheet" type="text/css" />

を読むために：

<link href="/static/global/css/print.css" media="all" rel="stylesheet" type="text/css" />

あなたは今に適用された印刷スタイルを持っていますブラウザのウィンドウにコピーします。他のウェブページと同じように、スタイルや要素をナビゲートすることができます。

出典

2012-10-01 15:29:29

1

ここでは、プリントレイアウトを汎用スタイリングの変更にする必要がある場合に、スタイリングに役立つことが分かっています。

  1. は
  2. 適用最後にそのスタイルシートを印刷スタイルをフレームに@media印刷を{}使用した印刷スタイルシートを作成します
  3. 一時的に印刷スタイルをフレームの行をコメントアウトし、印刷スタイルに取り組んでいますが以下のよう

何かをブラケット

  • 使用Firebugは、あなたでWeb開発者慣れ道
  • のコメントを解除メディア：

     
/* @media print { */ 

    #sidebar {display:none;} 

/* } */

    • 出典

    2013-02-17 03:14:23

    +0

    これは、Firefox独自のスタイルエディタ（Shift-F7キーストローク）を使用してCSSファイルを直接編集する方法です。 このように、 "@Media Print"を "@Media All"に変更して、画面に実装された印刷CSSを表示することができます。 – ChillyPenguin

    15

    Chrome開発ツールにはこの機能があります。

    1. テストするページのChromeデベロッパーツールを開きます。
    2. 引き出しまだ開いていない場合は開きます。 （Esc）
    3. タブを開きます。
    4. 左メニューのメディアをクリックします。
    5. チェックCSSメディアと選択ボックスから印刷を選択
      6.

    出典：https://developers.google.com/web/tools/chrome-devtools/iterate/device-mode/media-queries#preview-styles-for-more-media-types

    出典

    2014-03-07 00:24:32 jordanbtucker

    +3

    Chromeでは、ステップ3のタブは「レンダリング」と呼ばれ、ステップ4でチェックする設定は「メディアをエミュレートする」です。ステップ5は選択ボックスから「印刷」を選択するだけです。 – febeling

    関連する問題

     関連する問題