How to test the printable version of a page?

Question

Google Chrome

Attached a file with print styles to the page

<link href="css/print.css" rel="stylesheet" media="print">

In the chrome debugger, everything is fine, according to print.css (in the settings I choose Media: Print), but in the page preview everything is different:
1. Images are not visible
2. The mobile grid is used
Where to dig?

Answer 1

1. Pictures are not visible

This is configured in the print settings so that background images are shown, unless you have something like:

@media print {
    * {
        background-image: none !important;
    }
}

You need to fix media in your CSS, add print or remove screen where needed. And then on the press you will easily achieve the kind of page that you need.

/* Пример: принтеры и экраны >= 1024px */
@media print, (min-width: 1024px) {

}