Sugestie dotyczące debugowania arkuszy stylów drukowania?

Niedawno pracowałem nad arkuszem stylów drukowania dla strony internetowej i zdałem sobie sprawę, że brakuje mi skutecznych sposobów na jego ulepszenie. Cykl ponownego ładowania do pracy z układem ekranowym to jedna rzecz:

• zmień kod
• karta poleceń
• przeładować

ale cały proces staje się znacznie bardziej uciążliwy, gdy próbujesz drukować:

• zmień kod
• karta poleceń
• przeładować
• wydrukować
• zez na obrazie podglądu wydruku
• otwórz PDF w podglądzie w celu dalszej kontroli

Czy brakuje mi tutaj narzędzi? Czy inspektor WebKit ma pole wyboru „Udawaj, że to media stronicowane”? Czy jest jakaś magia, którą potrafi Firebug ( wzdrygnąć )?

Jest to możliwe w inspektorze Chrome.

1. Otwórz Inspektora DevTools (Mac: Cmd+ Shift+ C, Windows: Ctrl+ Shift+ C)
2. Kliknij ikonę Przełącz tryb urządzenia , znajdującą się w lewym górnym rogu panelu DevTools. (Windows: Ctrl+ Shift+ M, mac: Cmd+ Shift+ M).
3. Kliknij ikonę Więcej przesłonięć w prawym górnym rogu okna przeglądarki, aby otworzyć szufladę devtools.

4. Następnie wybierz Media w szufladzie emulacji i zaznacz pole wyboru Media CSS .

   

To powinno załatwić sprawę.

Aktualizacja: Menu uległy zmianie w DevTools. Można go teraz znaleźć, klikając menu „trzy kropki” w prawym górnym rogu> Więcej narzędzi> Ustawienia renderowania> Emuluj media> drukuj.

Źródło: strona Google DevTools *

Zakładam, że chcesz mieć jak największą kontrolę nad drukowanym oknem bez korzystania z HTML do PDF ... Użyj ekranu @media do debugowania - @media print do końcowego css

Nowoczesne przeglądarki można uzyskać szybkie wizualne, co wydarzy się w czasie drukowania za pomocą cali i pkt w krótkim czasie @media query.

@media screen and (max-width:8.5in) { /* resize your window until the event is triggered */
    html { width:8.5in; }
    body { font: 9pt/1.5 Arial, sans-serif; } /* Roughly 12px font */
 ...
}

Gdy przeglądarka wyświetli „cale”, będziesz mieć lepszy pomysł na to, czego się spodziewać. To podejście powinno prawie zakończyć metodę podglądu wydruku. Wszystkie drukarki będą współpracować z jednostkami pti in, a użycie techniki @media pozwoli Ci szybko zobaczyć, co się stanie, i odpowiednio je dostosować. Firebug (lub odpowiednik) absolutnie przyspieszy ten proces. Po dodaniu zmian do @media masz cały kod potrzebny do powiązanego pliku CSS za pomocą media = "print"atrybutu - wystarczy skopiować / wkleić reguły ekranu @media do pliku, do którego się odwołuje.

Powodzenia. Sieć nie została stworzona do druku. Stworzenie rozwiązania, które dostarcza całą twoją treść, style równe temu, co widać w przeglądarce, może być czasami niemożliwe. Na przykład płynny układ dla głównie 1280 x 1024 odbiorców nie zawsze łatwo przekłada się na ładny i schludny druk laserowy 8,5 x 11.

Referencje W3C dotyczące purusalu: http://www.w3.org/TR/css3-mediaqueries/

Chrome 48 możesz debugować style drukowania na karcie Rendering .

Kliknij ikonę menu w prawym górnym rogu Inspektora i Ustawienia renderowania .

Edytuj
dla Chrome 58 lokalizacja zmieniła się na Inspektora sieci> Menu> Więcej narzędzi> Renderowanie

W Chrome v41 jest tam, ale w nieco innym miejscu.

Istnieje prosty sposób debugowania arkusza stylów drukowania bez przełączania żadnego atrybutu media w kodzie HTML (oczywiście, jak wskazano, nie rozwiązuje to problemu z szerokością / stronami):

• Użyj rozszerzenia Firefox + Web Developer.
• W menu Web Developer wybierz CSS / Wyświetl CSS według typu nośnika / Drukuj
• Wróć do menu Web Developer, wybierz Opcje / Zachowaj funkcje

Teraz przeglądasz drukowany CSS i możesz przeładować swoją stronę w nieskończoność. Gdy skończysz, odznacz „Zachowaj funkcje” i załaduj ponownie, otrzymasz ponownie ekran CSS.

HTH.

Chrome UI różni się znowu jak w V53.

Nie muszę często używać tej funkcji, ale zawsze, gdy to robię, zajęło mi wieczność ustalenie, gdzie zespół Chrome przeniósł ją od czasu ostatniego spalania cykli, próbując ją wyśledzić.

Zauważ, że jest to ... menu w panelu Narzędzia deweloperskie, a nie ... menu w panelu Przeglądarka Chrome.

Teraz przewiń w dół w sekcji Rendering. Często jest poniżej zakładki.

Zgodnie z odpowiedzią rflnogueira bieżące ustawienia Chrome (40.0. *) Będą wyglądać następująco:

Wystarczy pokazać arkusz stylów drukowania w przeglądarce, używając media="screen"podczas debugowania. Widok podglądu wydruku korzysta z tego samego mechanizmu renderowania, co normalny tryb przeglądania, dzięki czemu można uzyskać dokładne wyniki za jego pomocą.

2019 - Zaktualizowane instrukcje

1. Otwórz inspektora Chrome
   • Z komputera Mac => option+ command+i
   • Z systemu Windows =>F12

2. Kliknij małe 3 kropki, customize and control devTools

3. Wybierz More Tools

4. Wybierz Rendering

5. Przewiń w dół do Emulate CSS Media

6. Wybierz printze strzałki w dół

Jeśli masz funkcję drukowania, która przepisuje zawartość strony do nowego okna z odniesieniem do arkusza stylów wydruku, uzyskasz o wiele lepsze wyobrażenie o tym, jak będzie wyglądać na papierze, i będziesz mógł ją debugować z takimi jak firebug.

Oto przykład tego, jak można to zrobić za pomocą JavaScript / jquery

        $("#Print").click(function () {
            var a = window.open('', '', 'scrollbars=yes,width=1024,height=768');
            a.document.open("text/html");
            a.document.write("<html><head>");
            a.document.write('<link rel="stylesheet" href="css/style.css" />');
            a.document.write('<link rel="stylesheet" href="css/print.css" />');
            a.document.write("</head><body>");
            a.document.write($('#Content').html());
            a.document.write('</body></html>');
            a.document.close();
            a.print();
        });

W DreamWeaver znajduje się pasek narzędzi, który pokazuje praktycznie każdą opcję renderowania, którą chcesz: ekran, druk, media podręczne, ekran projekcyjny, media telewizyjne, arkusze stylów czasu itp. Tego właśnie używam, ponieważ: natychmiast pokazuje podgląd za pomocą 1 pojedyncze naciśnięcie przycisku.

Używam makr, aby wielokrotnie wysyłać naciśnięcia klawiszy i myszy. W systemie Windows AutoHotKey jest świetnym oprogramowaniem, a pod OS X możesz przeczytać o Automatorze jako alternatywnym AHK dla OsX .

Pod Windows (zamień Ctrl na Cmd w OS X) „Ctrl-s / przełącz się do okna Fx gdziekolwiek jest na liście otwartych okien / Ctrl-r” przypisany do 1 nieużywanego klucza pozwala uniknąć frustracji związanej z nieciekawymi zadaniami i ostatecznie uratuje moje ramiona od RSI :)