729

私はウェブサイトの開発に取り組んでおり、印刷ビューで作業する必要があります。通常、レイアウトの問題がある場合は、Chrome の Element Inspector を使用します。ただし、これは印刷プレビュー モードには存在しません。

プリンターのようにページを表示するために、Chrome プラグインまたは Chrome 自体の表示媒体を変更する他の方法はありますか? Chrome 固有のソリューションはないと思いますが、それが私の主要なブラウザーなので、ブラウザー内のソリューションがあればいいと思います。

今は印刷プレビュー メディアだけに集中していますが、サポートされているメディア タイプ (つまり、すべて/点字/エンボス/ハンドヘルド/印刷/投影/スクリーン/音声/tty/) のいずれかに変更できることが理想的です。テレビ）。

4

11 に答える 11

1249

注: この回答は Chrome のいくつかのバージョンを対象としています。スクロールしてv52、v48、v46、v43 、およびv42をそれぞれ更新された変更とともに確認してください。

Chrome v52+:

  • 開発者ツールを開きます(Windows:F12またはCtrl+ Shift+ I、Mac: Cmd+ Opt+ I)
  • [ DevToolsハンバーガー メニューのカスタマイズと制御] ボタンをクリックし、[その他のツール] > [レンダリング設定] (または新しいバージョンでは[レンダリング]) を選択します。
  • [レンダリング] タブの [印刷メディアをエミュレート]チェックボックスをオンにして、印刷メディア タイプを選択します。

クローム v52+

Chrome v48+ (気づいてくれてありがとうアレックス):

  • 開発者ツール (CTRLSHIFTIまたはF12)を開きます。
  • 左上隅にある[デバイス モードの切り替えCTRLSHIFTM] ボタン ( ) をクリックします。
  • (1) の [メニューにコンソールを表示]をクリックして、コンソールが表示されていることを確認します (ESC開発者ツールバーにフォーカスがある場合は、キーでコンソールを切り替えます)。
  • (2) のメニューで[レンダリング] を選択して開くことができる [レンダリング] タブで [印刷メディアをエミュレートする] をオンにします。

クロム v48+

Chrome v46+:

  • 開発者ツール (CTRLSHIFTIまたはF12)を開きます。
  • 左上隅にある[デバイス モードの切り替え] ボタンをクリックします (1)。
  • メニューボタン (2) >コンソールの表示(3) をクリックするか、ESCキーを押してコンソールを切り替えて、コンソールが表示されていることを確認します (開発者ツールバーにフォーカスがある場合にのみ機能します)。
  • エミュレーション (4) > メディア (5)タブを開き、CSS メディアをチェックして、印刷(3)を選択します。

Chrome v46+ のサポート

Chrome v43+:

  • 手順 2 のドロワー アイコンが変更されました。

Chrome v43 で印刷メディア クエリをエミュレートする

クローム v42:

  • 開発者ツール (CTRLSHIFTIまたはF12)を開きます。
  • 左上隅にある[デバイス モードの切り替え] ボタンをクリックします (1)。
  • ドロワーの表示ボタン (2) をクリックするか、ESCキーを押してドロワーを切り替えて、ドロワーが表示されていることを確認します。
  • [エミュレーション] > [メディア]で[ CSS メディア] をチェックし、[印刷] (3)を選択します。

Chrome v42 で印刷メディア クエリをエミュレートする

于 2015-04-30T07:53:38.560 に答える
169

Chrome 32 35+で変更

(Chrome 35 以降では、[エミュレーション] タブがデフォルトで表示されます。また、コンソールはどのプライマリ タブからでも利用できます。)

  1. DevTools で、[設定] -> [オーバーライド] に移動します。
  2. 「コンソールドロワーにエミュレーションビューを表示」を有効にします
  3. 設定を閉じて、「要素」タブに移動します
  4. ヒットEscしてコンソールを表示する
  5. 「エミュレーション」タブを選択し、「画面」をクリックします
  6. [CSS メディア] まで下にスクロールし、[印刷] を選択します。

このオプションは、(まだ?) コンソール タブでは使用できません。

オーバーライドを有効にする

于 2014-01-16T08:38:21.397 に答える
74

Chrome 32 以降、引き出しタブCSS mediaのセクションにオプションがあります。ScreenEmulation

それを有効にして、ターゲット メディア タイプとして選択するだけで、print見よ、あなたのページは [ほぼ] 印刷されるようにレンダリングされます。

Esc引き出しが表示されていない場合は、引き出しを表示するために使用します。

于 2012-03-09T14:54:42.873 に答える
24

Chrome 48 (およびおそらくそれ以前のいくつかのバージョン) の時点で、関数は再び移動したようです。

最初のいくつかの手順は変更されていません。

  1. 押すF12と開発者ツールが表示されます

  2. を押しESCてコンソールを開きます

以前の回答によると、設定は「エミュレーション」タブの下にあります。下の画像に示すように、[レンダリング] タブに移動しました。このタブは、[コンソール] タブの左側にある 3 つのドットをクリックして表示できます。

タブの選択

設定選択

于 2016-01-27T14:55:06.483 に答える
20

こちらの記事をご覧ください

Chrome 開発ツール インスペクターを開く

次に、「オーバーライド」タブに移動します

構成/設定を開く

于 2013-02-26T18:27:32.720 に答える
7

Google Chrome で Print As PDF を使用して CSS をデバッグしていて、CSS 要素の背景色が表示されない場合は、[背景グラフィック] チェックボックスがオンになっていることを確認してください。CSS のデバッグに約 30 分を費やし、CSS の背景が無視される原因を探りました。

Google Chrome Print の背景色を無視

于 2015-10-18T06:27:56.930 に答える
7

利用可能なショートカットを使用すると、最も簡単な方法は次のとおりです。

  1. 開発者ツールを開く

    • Windows:F12またはCtrl+ Shift+I
    • マック: Cmd+ Opt+I

  2. コマンド メニューを開く

    • 窓: Ctrl+ Shift+P
    • マック: Cmd+ Shift+P

  3. コンテキスト メニューから「Emulate CSS print media type」を入力printして選択します。

    コマンド メニューからメディア タイプ エミュレーションを変更する

lmeursによる優れた、現在最も支持されている回答を見ると、このソリューションも時間の経過とともに安定したままになる可能性があると思います。

于 2019-04-25T06:29:59.593 に答える
6

Mac の Chrome v51 では、右上隅をクリックしてレンダリング設定を見つけ、[その他のツール] > [レンダリング設定] を選択し、ウィンドウの下部にあるオプションで [メディアをエミュレート] ボタンをオンにしました。

Chrome v51 Mac エミュレート メディア セレクターが下部に表示されます

私をこれに導いた他のすべてのポスターに感謝し、画像なしで答えを提供してくれた人に感謝します.

于 2016-05-27T12:45:11.357 に答える