68

Firebugは、一部のHTML要素の画面メディアCSSを表示するための優れたツールですが、印刷メディアCSSを確認する方法もありますか？または、印刷メディアのCSSを表示する他のツールはありますか？

4

10 に答える 10

35

Web開発者ツールバーはどうですか？
https://addons.mozilla.org/en-US/firefox/addon/60
インストール時に、[CSS]->[メディアタイプ別にCSSを表示]->[印刷]に移動します

于 2009-04-19T12:41:01.520 に答える
32

新しいFirefox

  1. F12でdevtoolsを開きます。
  2. [インスペクター]タブに移動します。
  3. [ルール]サブタブを開きます。
  4. 印刷メディアボタンがあります。

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

古いFirefox

Firefoxは今ではfirebugを必要としません。

  1. を押して開発者ツールバーを実行しますShift+F2
  2. タイプmedia emulate print

media reset標準ビューに戻るために入力します。

于 2016-11-02T10:42:35.557 に答える
31

これが機能するとは思ってもみませんでしたが、機能します。FirebugとWebDeveloperの1.5ベータ版の両方をインストールします。Web Developerから印刷CSSを選択すると、Firebugのツールがページの新しい印刷バージョンで突然機能します。これまでのところ、両方を同時に実行しても問題は見つかりませんでした。

于 2009-12-16T17:33:33.183 に答える
4

Web Developerプラグインを使用します。次に、CSSメニューから、ページを表示するメディアを選択できます。

于 2009-04-19T12:40:16.403 に答える
3

webdeveloperツールバーを確認することをお勧めします。表示するCSSを選択できます。Firebugと組み合わせて、印刷メディアのCSSを表示できるようにする必要があります。

于 2009-04-19T12:40:15.530 に答える
3

Firefox（およびその他のブラウザ）では、印刷プレビューを使用して、印刷スタイルシートの静的表示を確認できます。Web開発者ツールバーほど便利ではありませんが、何が印刷されるかを理解するのにも役立ちます。

于 2009-04-19T14:22:41.447 に答える
3

@media print実際、予期しないときにCSSが表示される可能性があることに注意してください。

SOが使用するように：

[..] @ media print {＃sidebar、＃nav、[..]、div.vote {display：none;}} [..]

...したがって、FirebugのCSSパネルに次のように表示されると予想される場合があります。

@media print {
  ＃sidebar、＃nav、[..]、div.vote {
    表示：なし;
  }
}

ただし、代わりに、CSS@media printが実際にアクティブであるかのように表示されます。

＃sidebar、＃nav、[..]、div.vote {
  表示：なし;
}

（関連する問題レポートも参照してください：CSSパネルには@media UIがありません。）

于 2010-05-02T17:21:26.290 に答える
3

編集2Arjanの回答を読んだ後、このソリューションは@media printCSSを使用（または悪用）しているサイトに正しく対応していないことに気付きました。（以下の例を参照してください。）しかし、このソリューションは、特にあなたが書いたコードに対して、そしてそれがこれを持っていないことを事前に知っている場合、「不完全なクイックアンドダーティトリック」としてまだ有効であると思います。

<link rel="stylesheet" type="text/css" ...>Firebugを使用すると、便利なようにタグとタグを編集することもできます<style>。

たとえば、オリジナルを切り替えることができます

<link rel="stylesheet" type="text/css" media="print">

に

<link rel="stylesheet" type="text/css" media="screen">

ブラウザがそれを適用します。また、画面のみを非アクティブ化する必要があります。

もちろん、これは、スタイルシートのリンクが非常に少ないいくつかのページをすばやくチェックしたい場合にのみ役立ちますが、少なくとも、追加のプラグインをインストールする必要はありません。

編集1このトリックは、これを自動化するためにjavascriptを使用することを示唆しています...

（免責事項：簡単にするためにJQueryを使用します。私はJavascriptの専門家ではありません。）

// Save all stylesheet links
allStylesheets   = $('link[rel="stylesheet"], style');
// Save the print-stylesheet links
printStylesheets = $('link[media*="print"], link[media*="all"], style[media*="print"], style[media*="all"]');

// Set all stylesheet medias to something 'exotic'
if (null != allStylesheets) {
    allStylesheets.attr("media", "aural");
}
// Switch the print-stylesheet medias to 'screen'
if (null != printStylesheets) {
    printStylesheets.attr("media", "screen");
}

デフォルトmediaは"screen"（w3.org --media attribute）であることに注意してください。これをボタンで使用して、ページのプレビューを表示できます。唯一の欠点は、元のビューを復元するためにページをリロードする必要があることです。

上で指摘したように、このソリューションは、このようなhtmlコードでは機能しません。これは、内部のスタイル@media printがブラウザによって適用されないためです。

<html>
    <head>
        <title>Hello world</title>
        <style type="text/css" media="all">
            @media print { h1 { color: red; }}
        </style>
    </head>
    <body>
        <h1>Hello world</h1>
    </body>
</html>
于 2012-05-22T16:44:06.343 に答える
2

ただし、Web開発者ツールバーにはCSSデバッグの大きな欠点が1つあります。ページを更新するたびに、画面スタイルシートに戻ります。

最近私がしがちなのは、開発中に印刷スタイルシートのメディアを一時的に画面に切り替えてから、ライブに移行する前に元に戻すことです。

于 2009-04-19T14:09:18.233 に答える
0

Firefox 68は、ページインスペクターのルールビューに「ページの印刷メディアシミュレーションを切り替える」ボタンを追加しました（バグ1534984）。

Firefoxページインスペクターのスクリーンショット

「CSSの調査と編集」ページの「印刷用の@mediaルールの表示」セクションにボタンの使用方法のビデオがあります。

于 2021-11-22T17:58:27.237 に答える