4

Long story short. I'm working on a huge project. Yes I have a print.css and it works very nice. But in the end it is so frustrating to always preview the print page.

And even works you can not inspect the page. Some elements totally look diffrent. Been overwriting them now have an extra 160 lines in my print.css however they just keep displaying vertical instead of horizontal.

It would be so nice, and I would be so happy if chrome had an extension or something to use so I could inspect a print preview or make my browser act as if it is a print.

user3806549
  • 1,428
  • 1
  • 17
  • 25

3 Answers3

12

See this answer, I believe this is what you are looking for.

Using Chrome's Element Inspector in Print Preview Mode?

Chrome v46+:

  • Open the Developer Tools (CTRL+SHIFT+I or F12)
  • Click the Toggle device mode button in the left top corner (1).
  • Make sure the console is shown by clicking the menu button (2) > Show console (3) or pressing the ESC key to toggle the console (only works when Developer Toolbar has the focus).
  • Open the Emulation (4) > Media (5) tabs, check CSS media and select print (3).

enter image description here

Community
  • 1
  • 1
Daniel Congrove
  • 3,519
  • 2
  • 35
  • 59
0

While testing, you could just load your print.css file in the document like a regular old stylesheet. Take off the media="print" and make it apply to the screen as normal and it should display.

Bryce
  • 6,440
  • 8
  • 40
  • 64
0

I'm not sure if your using any server side code, if you have add a switch which allows you to jump between css files as the main stylesheet then just use the print.css as your main stylesheet.

If your using just pure html add the print.css stylesheet as well as your "main.css" then just comment out the one you dont want at the time.

cconolly
  • 366
  • 1
  • 9