Sto lavorando allo sviluppo di un sito Web e ho bisogno di lavorare sulla vista di stampa. In genere, quando ho problemi di layout, utilizzo Inspector Element di Chrome. Tuttavia, ciò non esiste nella modalità di anteprima di stampa.

Esiste un plug-in di Chrome o un altro modo per modificare il supporto di visualizzazione all'interno di Chrome stesso, per visualizzare una pagina come farebbe una stampante? Suppongo che non sia una soluzione specifica per Chrome, ma questo è il mio browser principale, quindi sarebbe bello avere una soluzione nel browser.

In questo momento mi concentro solo sul supporto di anteprima di stampa, ma sarebbe l'ideale per essere in grado di passare a uno qualsiasi dei tipi di supporto supportati (ad esempio tutti / braille / in rilievo / palmare / stampa / proiezione / schermo / discorso / tty / tv).

Nota: questa risposta copre diverse versioni di Chrome, scorrere per vedere v52 , v48 , v46 , v43 e v42 ciascuna con le loro modifiche aggiornate.

Chrome v52 +:

• Apri gli Strumenti di sviluppo (Windows: F12o Ctrl+ Shift+ I, Mac: Cmd+ Opt+I )
• Fare clic sul pulsante di menu Personalizza e controlla hamburger DevTools e selezionare Altri strumenti> Impostazioni rendering (o Rendering nelle versioni più recenti).
• Selezionare la casella di controllo Emula supporti di stampa nella scheda Rendering e selezionare il tipo di supporto di stampa .

Chrome v48 + (Grazie Alex per averlo notato):

• Apri gli Strumenti di sviluppo ( CTRLSHIFTIo F12)
• Fai clic sul pulsante Attiva / disattiva modalità dispositivo nell'angolo in alto a sinistra ( CTRLSHIFTM).
• Assicurarsi che la console sia visualizzata facendo clic su Mostra console nel menu in (1) (ESC tasto attiva o disattiva la console se Developer Toolbar è attivo).
• Selezionare Emula supporti di stampa nella scheda di rendering che può essere aperta selezionando Rendering nel menu in (2).

Chrome v46 +:

• Apri gli Strumenti di sviluppo ( CTRLSHIFTIo F12)
• Fai clic sul pulsante Attiva / disattiva modalità dispositivo nell'angolo in alto a sinistra (1).
• Assicurati che la console sia visualizzata facendo clic sul pulsante del menu (2)> Mostra console (3) o premendo il ESCtasto per attivare / disattivare la console (funziona solo quando Developer Toolbar ha lo stato attivo).
• Apri le schede Emulazione (4)> Media (5) , controlla i supporti CSS e seleziona stampa (3).

Chrome v43 +:

• L'icona del cassetto al passaggio 2 è cambiata.

Chrome v42:

• Apri gli Strumenti di sviluppo ( CTRLSHIFTIo F12)
• Fai clic sul pulsante Attiva / disattiva modalità dispositivo nell'angolo in alto a sinistra (1).
• Assicurarsi che il cassetto sia mostrato facendo clic sul pulsante Mostra cassetto (2) o premendo il ESCtasto per attivare / disattivare il cassetto.
• In Emulazione> Media controlla i media CSS e seleziona stampa (3).

Modificato in Chrome 32 35+

(In Chrome 35+ la scheda "Emulazione" è presente per impostazione predefinita. Inoltre, la console è disponibile da qualsiasi scheda principale.)

1. In DevTools, vai su Impostazioni-> Sostituzioni
2. abilita "Mostra vista emulazione nel cassetto della console"
3. Chiudi le impostazioni, vai alla scheda "Elementi"
4. Premi Escper aprire la console
5. Scegli la scheda "Emulazione", fai clic su "Schermo"
6. Scorri verso il basso fino a "CSS Media", seleziona "stampa"

Questa opzione non è (ancora?) Disponibile nella scheda della console.

Da Chrome 32 hai l' CSS mediaopzione nella Screensezione della Emulationscheda del cassetto .

Abilitalo, seleziona printcome tipo di supporto di destinazione e - ecco - la tua pagina viene visualizzata [quasi] come sarà stampata.

Utilizzare Escper richiamare il cassetto se non è visibile.

A partire da Chrome 48 (e forse alcune versioni precedenti), la funzione sembra essersi spostata di nuovo:

I primi passaggi sono invariati:

1. Premere F12per visualizzare gli strumenti di sviluppo

2. Premere ESCper aprire la console

Secondo le risposte precedenti, l'impostazione potrebbe essere trovata nella scheda "Emulazione". Come mostrato nelle immagini seguenti, ora è stato spostato nella scheda "Rendering", che può essere visualizzata facendo clic sui tre punti a sinistra della scheda "Console".

Vedi questo articolo

Quindi vai alla scheda "sostituzioni"

A partire da Chrome 48+, puoi accedere all'anteprima di stampa procedendo come segue:

1. Apri gli strumenti di sviluppo - Ctrl/Cmd+ Shift+ Io fai clic con il pulsante destro del mouse sulla pagina e scegli "Ispeziona".

2. Premi Escper aprire il cassetto aggiuntivo.

3. Se "Rendering" non è già stato mostrato, fai clic sul kebab a 3 punti e scegli "rendering".

4. Seleziona la casella di controllo "Emula supporti di stampa".

Da lì Chrome ti mostrerà una versione stampata della tua pagina e potrai ispezionare l'elemento e risolvere i problemi come faresti con la versione del browser.

Se esegui il debug del CSS utilizzando Stampa come PDF in Google Chrome e i colori di sfondo dell'elemento CSS non vengono visualizzati, assicurati che la casella di controllo "Grafica di sfondo" sia selezionata. Ho impiegato quasi 30 minuti a eseguire il debug del mio CSS e mi chiedevo cosa stesse facendo ignorare il mio background CSS.

In Chrome v51 su un Mac, ho trovato le impostazioni di rendering facendo clic nell'angolo in alto a destra, scegliendo Altri strumenti> Impostazioni di rendering e selezionando il pulsante Emula media nelle opzioni offerte nella parte inferiore della finestra.

Grazie a tutti gli altri poster che mi hanno portato a questo, e merito a quelli che hanno fornito la risposta senza le immagini.

Chrome v67 (mac):

1. Tenere premuto Cmd+opt+jper aprire gli strumenti di sviluppo
2. clicca il ... sul lato destro e scegli: Altri strumenti >> Rendering
3. Quando viene visualizzata la finestra Rendering nella parte inferiore dello schermo, emula la sezione CSS Media e scegli: "Schermo" dal menu a discesa.
4. Vai su "File >> Stampa" e dovresti vedere la vista che vuoi stampare.

Immagini della descrizione sopra per Chrome v67 su un mac:

Dove trovare la scheda Rendering: fai clic ...sul lato destro e scegli: Altri strumenti >> Rendering

Come stampare la vista "schermo": Quando viene visualizzata la finestra Rendering nella parte inferiore dello schermo, emula la sezione CSS Media e scegli: "Schermo" dal menu a discesa.

Spero che sia d'aiuto.

Con le scorciatoie disponibili, il modo più veloce è farlo

1. Apri gli Strumenti di sviluppo

   • Windows: F12o Ctrl+ Shift+I
   • Mac: Cmd+ Opt+I

2. Apri il menu dei comandi

   • Windows: Ctrl+ Shift+P
   • Mac: Cmd+ Shift+P

3. Digitare printe selezionare Emula tipo di supporto di stampa CSS dal menu di scelta rapida

   

Guardando l'eccellente e attualmente la risposta più votata da Lmeurs , penso che questa soluzione potrebbe anche rimanere stabile nel tempo.

Chrome v50:

Modo 1:

1. Menu> Altri strumenti> Impostazioni rendering (vedi immagine)
2. Giù: Scheda Rendering> Emula "stampa" multimediale

Modo 2:

1. Open Console [esc]
2. Menu console> rendering