Come si esegue il debug di CSS stampabili?

Question

Uso sempre Firebug e IE Developer Toolbar per il debug di problemi complessi di CSS. Ma a volte compare un bug insidioso che appare solo quando vai a stampare la pagina.

Quali tecniche/strumenti utilizzate per diagnosticare problemi come questo? Esiste un modo per sfruttare maggiormente gli strumenti di debug CSS tradizionali nella visualizzazione di stampa?

Aggiornamento: utilizzo già una stampante PDF per evitare sprechi di carta; il mio problema è che non posso fare clic destro sul DOM stampato. Alcune delle altre risposte qui sotto sono abbastanza utili, grazie. :-)

Answer 1

appena trovato un commento di lee-penkman su una nuova funzione in Firefox here: Press Shift-F2 in Firefox per aprire la console, quindi immettere media emulate print. Funziona assolutamente alla grande!

Answer 2

Io uso la stampante virtuale Adobe PDF, perché è la cosa più vicina a una vera stampante che otterresti, senza spreco di inchiostro e carta.

In ogni caso, si consiglia di avere un CSS separato per le stampe, con una grafica molto più semplice e meno delle immagini che si utilizzano solo per scopi di progettazione.

Answer 3

Uso il plug-in WebDeveloper e il CSS -> Visualizza CSS per tipo di supporto -> Stampa per visualizzare il CSS come farebbe una volta stampato. Le utilità di ispezione di Firebug funzionano con il CSS come filtrato dal plugin.

Answer 4

Stampa su Microsoft XPS Document Writer se non si desidera pagare denaro. Oppure usa SnagIt se hai i fondi (prova gratuita sul sito).

Answer 5

Io uso Firefox e lo developer toolbar.

Io uso lo strumento di modifica css in tempo reale nella barra delle applicazioni, è piuttosto utile modificare i css al volo per vedere i risultati in tempo reale.

Io uso anche la funzione di struttura, che il div e cose del genere sul mouse sopra, sul tuo sito web. Davvero utile per trovare div.

Per il problema di stampa, vedere CSS -> Display di stile CSS da parte dei media -> stampa

Ci sono un sacco di altri strumenti disponibili in questo, probabilmente uso circa il 10% di esso.

Prova a trovare qualcosa di utile.

Answer 6

Che ne dici di elencare la stampa CSS e rimuovere la condizione di "stampa" dal tuo link CSS o dalla dichiarazione di importazione? Quindi esegui il debug del CSS di stampa nella finestra del browser.

Answer 7

Ho sempre utilizzato la barra degli strumenti di sviluppo Web (come descritto nelle altre risposte), ma Firebug sembra perdere alcuni stili di volta in volta. Così ho aggiunto un segnalibro al mio browser e aggiunto il seguente Javascript come URL del segnalibro. Ora posso semplicemente passare a stile di stampa facendo clic sul segnalibro:

javascript:(function(){var%20h,a,f;a=document.getElementsByTagName('link');for(h=0;h<a.length;h++){f=a[h];if(f.rel.toLowerCase().match(/stylesheet/)&&f.href&&(f.media=='print'||f.media=='screen')){var%20g=f.href.replace(/(&|%5C?)forceReload=\d+/,'');if(f.media.toLowerCase().match(/screen/))f.media="dontshow";if(f.media.toLowerCase().match(/print/))f.media="all";f.href=g+(g.match(/\?/)?'&':'?')+'forceReload='+(new%20Date().valueOf());}}})() 

Il codice trova sopra tutti i link fogli di stile, i test se si tratta di supporti = stampa e in tal caso si trasforma in un supporto = tutti (e nasconde tutti i media = schermo sostituendolo con media = dontshow) e ricarica i fogli di stile aggiungendo un token di tempo all'URL. Lo script di base di ricarica è di qualcun altro, ho aggiunto la parte multimediale. Questo funziona benissimo per me!

Questa sarebbe la versione più leggibile del URL JavaScript sopra per una spiegazione:

javascript: (function() { 
    var h, a, f; 
    a = document.getElementsByTagName('link'); 
    for (h = 0; h < a.length; h) { 
     f = a[h]; 
     if (f.rel.toLowerCase().match(/stylesheet/) && f.href && (f.media == 'print' || f.media == 'screen')) { 
      var g = f.href.replace(/(&|\?)forceReload=\d /, ''); 
      if (f.media.toLowerCase().match(/screen/)) f.media = "dontshow"; 
      if (f.media.toLowerCase().match(/print/)) f.media = "all"; 
      f.href = g(g.match(/\?/) ? '&' : '?') 
      'forceReload=' (new Date().valueOf()); 
     } 
    } 
})() 

Answer 8

In strumenti di Chrome per sviluppatori (F12 \ Ctrl (cmd su Mac) + Maiusc + C): Nella scheda di emulazione (Da Chrome 32 in poi IMHO), c'è una scheda per "Media".

Non c'è possibile controllare la casella di controllo di emulazione dei media e selezionare il supporto che si desidera emulare ('print', 'schermo', ecc)

Answer 9

In Chrome 51:

Aperto devtools (CTRL + F12 o CTRL + SHIFT + I) e fare clic sul menu ..., fare clic su More Tools > Rendering settings per aprire la scheda Rendering della console per sviluppatori (in alternativa, se la console è aperta, accedere a questa scheda).

In questa scheda, selezionare e selezionare la casella per Emulate Media: print.