Suggestions for debugging print stylesheets?

by

There is an option for that in Chrome’s inspector.

  1. Open the DevTools inspector (mac: Cmd + Shift + C , windows: Ctrl + Shift + C)
  2. Click on the Toggle device mode icon Toggle device mode button, located on the upper left corner of the DevTools panel. (windows: Ctrl+Shift+M, mac: Cmd+Shift+M).
  3. Click on the More overrides more overrides icon in the top right corner of the browser viewport to open the devtools drawer.

  4. Then, select Media in the emulation drawer, and check the CSS media checkbox.

    enter image description here

This should do the trick.

Update: The menus have changed in DevTools.
It can now be found by clicking on the “three-dots” menu in the top right corner > More Tools > Rendering Settings > Emulate media > print.

Source: Google DevTools page*

More Related Contents:

  1. How to use HTML to print header and footer on every printed page of a document?
  2. How do I hide an element when printing a web page?
  3. CSS to set A4 paper size
  4. Remove header and footer from window.print()
  5. Google Chrome Printing Page Breaks
  6. How can I force browsers to print background images in CSS?
  7. See :hover state in Chrome Developer Tools
  8. Tools to selectively Copy HTML+CSS+JS From A Specific Element of DOM [closed]
  9. Browser Support for CSS Page Numbers
  10. Freeze screen in chrome debugger / DevTools panel for popover inspection?
  11. CSS Printing: Avoiding cut-in-half DIVs between pages?
  12. how to avoid extra blank page at end while printing?
  13. How to only show certain parts with CSS for Print?
  14. What do the crossed style properties in Google Chrome devtools mean?
  15. What is the purpose of this purple dashed line area?
  16. Why can’t I save CSS changes in Firebug? [closed]
  17. Good rules for setting up print css? [closed]
  18. How do I Make Firefox Print a Background-Color Style?
  19. Need to remove href values when printing in Chrome
  20. Print Background colours in Chrome
  21. Custom.css has stopped working in 32.0.1700.76 m Google Chrome update
  22. Safe width in pixels for printing web pages?
  23. Print styles: How to ensure image doesn’t span a page break
  24. CSS native variables not working in media queries
  25. Every item to have the same width as the widest element [duplicate]
  26. Why doesn’t the CSS calc() function work for me?
  27. Is there a way to use two CSS3 box shadows on one element?
  28. Using attr to set css variable inline that work with CSP
  29. word-wrap:break-word not working in IE8
  30. text overflow ellipsis: avoid word break

Leave a Comment