Suggerimenti per il debug dei fogli di stile di stampa?

Di recente ho lavorato su un foglio di stile di stampa per un sito Web e mi sono reso conto di non essere in grado di modificare in modo efficace. Una cosa è avere un ciclo di ricarica per lavorare sul layout su schermo:

• cambia codice
• command-scheda
• ricaricare

ma l'intero processo diventa molto più arduo quando si tenta di stampare:

• cambia codice
• command-scheda
• ricaricare
• Stampa
• strizzare gli occhi all'immagine di anteprima di stampa
• apri il PDF in Anteprima per ulteriori controlli

Ci sono strumenti che mi sto perdendo qui? L'ispettore di WebKit ha una casella di controllo "fingi che si tratti di supporti di paging"? C'è qualche magia che Firebug ( brivido ) può fare?

C'è un'opzione per quello nell'ispettore di Chrome.

1. Apri la finestra di ispezione DevTools (mac: Cmd+ Shift+ C, windows: Ctrl+ Shift+ C)
2. Fare clic sull'icona Attiva / disattiva modalità dispositivo , situata nell'angolo in alto a sinistra del pannello DevTools. (windows: Ctrl+ Shift+ M, mac: Cmd+ Shift+ M).
3. Fare clic sull'icona Altre sostituzioni nell'angolo in alto a destra della finestra del browser per aprire il cassetto di Devtools.

4. Quindi, seleziona Media nel riquadro di emulazione e seleziona la casella di controllo Media CSS .

   

Questo dovrebbe fare il trucco.

Aggiornamento: i menu sono stati modificati in DevTools. Ora può essere trovato facendo clic sul menu "tre punti" nell'angolo in alto a destra> Altri strumenti> Impostazioni rendering> Emula media> stampa.

Fonte: pagina di Google DevTools *

Presumo che tu voglia il maggior controllo possibile della finestra stampata senza usare un approccio da HTML a PDF ... Usa lo schermo @media per eseguire il debug - Stampa @media per css

I browser moderni possono darti una rapida visione di ciò che accadrà al momento della stampa usando pollici e punti in a @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 */
 ...
}

Una volta che il tuo browser visualizza "pollici" avrai un'idea migliore di cosa aspettarti. Questo approccio dovrebbe quasi terminare il metodo di anteprima di stampa. Tutte le stampanti funzioneranno con pte le inunità e l'utilizzo della tecnica @media ti consentirà di vedere rapidamente cosa accadrà e di adeguarti di conseguenza. Firebug (o equivalente) accelererà assolutamente questo processo. Quando hai aggiunto le modifiche a @media, hai tutto il codice necessario per un file CSS collegato usando l' media = "print"attributo - basta copiare / incollare le regole dello schermo @media nel file di riferimento.

In bocca al lupo. Il web non è stato creato per la stampa. Creare una soluzione che offra tutti i tuoi contenuti, a volte è impossibile creare stili uguali a quelli visualizzati nel browser. Ad esempio, un layout fluido per un pubblico prevalentemente 1280 x 1024 non si traduce sempre facilmente in una bella e ordinata stampa laser 8.5 x 11.

Riferimento W3C per purusal: http://www.w3.org/TR/css3-mediaqueries/

Chrome 48 è possibile eseguire il debug degli stili di stampa nella scheda Rendering .

Fai clic sull'icona del menu in alto a destra nella finestra di ispezione e Impostazioni rendering .

Modifica
Per Chrome 58 la posizione è stata cambiata in Impostazioni Web> Menu> Altri strumenti> Rendering

In Chrome v41, è lì, ma in un punto leggermente diverso.

C'è un modo semplice per eseguire il debug del foglio di stile di stampa senza cambiare alcun attributo multimediale nel tuo codice HTML (ovviamente, come sottolineato, non risolve il problema di larghezza / pagine):

• Usa l'estensione Firefox + Web Developer.
• Nel menu Sviluppatore Web, selezionare CSS / Visualizza CSS per tipo di supporto / stampa
• Torna al menu Sviluppatore Web, seleziona Opzioni / Funzioni persistenti

Ora stai visualizzando il CSS di stampa e puoi ricaricare la tua pagina indefinitamente. Una volta terminato, deseleziona "Caratteristiche persistenti" e ricaricato, otterrai di nuovo lo schermo CSS.

HTH.

L'interfaccia utente di Chrome è di nuovo diversa dalla v53.

Non ho bisogno di usare questa funzione spesso, ma ogni volta che lo faccio, mi ci vuole un'eternità per capire dove il team Chrome l'ha spostata dall'ultima volta che ho bruciato i cicli cercando di rintracciarla.

Notare che è il menu ... nel riquadro Strumenti Dev non il menu ... nel riquadro Browser Chrome.

Ora scorri verso il basso nella sezione Rendering. Spesso è sotto l'ovile.

In seguito alla risposta di rflnogueira, le impostazioni di Chrome correnti (40.0. *) Appariranno come di seguito:

Mostra solo il foglio di stile di stampa nel tuo browser usando media="screen"durante il debug. La vista di anteprima di stampa utilizza lo stesso motore di rendering della normale modalità di navigazione in modo da poter ottenere risultati accurati usando quello.

2019 - Istruzioni aggiornate

1. Apri la finestra di ispezione di Chrome
   • Da Mac => option+ command+i
   • Da Windows =>F12

2. Fai clic sui 3 punti piccoli, customize and control devTools

3. Selezionare More Tools

4. Selezionare Rendering

5. Scorri verso il basso fino a Emulate CSS Media

6. Seleziona printdalla freccia in giù

Se hai una funzione di stampa che riscrive il contenuto della pagina in una nuova finestra a cui fa riferimento il tuo foglio di stile di stampa, avrai un'idea molto migliore di come apparirà sulla carta e sarai in grado di eseguirne il debug con artisti del calibro di firebug.

Ecco un esempio di come ciò può essere fatto con 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();
        });

In DreamWeaver c'è una barra degli strumenti che mostra praticamente qualsiasi opzione di rendering desiderata: schermo, stampa, supporti portatili, schermo di proiezione, supporti TV, fogli di stile meritn time, ecc. Questo è ciò che uso soprattutto perché: mostra istantaneamente un'anteprima con 1 semplice pressione di un pulsante.

Uso le macro per inviare ripetutamente i tasti premuti e i clic del mouse. In Windows, AutoHotKey è un ottimo software e in OS X è possibile leggere informazioni su Automator come un AHK alternativo per OsX .

Sotto Windows (sostituisci Ctrl con Cmd sotto OS X) "Ctrl-s / passa alla finestra Fx ovunque sia nell'elenco delle finestre aperte / Ctrl-r" associato a 1 tasto inutilizzato evita la frustrazione da compiti poco interessanti e alla fine salverà le mie braccia da RSI :)