Utilizzando l’Inspector di Chrome in modalità Anteprima di stampa?

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

C’è un plug-in Chrome o un altro modo per cambiare il tuo mezzo 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 in-browser.

In questo momento sono concentrato sul mezzo di anteprima di stampa, ma sarebbe ideale poter passare a qualsiasi tipo di supporto supportato (ad esempio tutti / braille / impresso / palmare / stampa / proiezione / schermo / parlato / tty / tv).

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

Chrome v52 +:

  • Apri gli Strumenti per sviluppatori (Windows: F12 o Ctrl + Maiusc + I , Mac: Cmd + Opt + I )
  • Fai clic sul pulsante Personalizza e controlla il menu degli hamburger DevTools e seleziona Altri strumenti> Impostazioni di rendering (o Rendering nelle versioni più recenti).
  • Seleziona la casella di controllo Emula supporti di stampa nella scheda Rendering e seleziona il tipo di supporto di stampa .

Chrome v52 +

Chrome v48 + (Grazie Alex per aver notato):

  • Apri gli Strumenti per sviluppatori ( CTRL SHIFT I o F12 )
  • Fai clic sul pulsante Attiva / distriggers modalità dispositivo nell’angolo in alto a sinistra ( CTRL SHIFT M ).
  • Assicurati che la console sia visualizzata facendo clic su Mostra console nel menu in (1) (il tasto ESC triggers o distriggers la console se la barra degli strumenti di sviluppo è triggers).
  • Selezionare Emula supporto di stampa nella scheda di rendering che può essere aperta selezionando Rendering nel menu in (2).

Chrome v48 +

Chrome v46 +:

  • Apri gli Strumenti per sviluppatori ( CTRL SHIFT I o F12 )
  • Fai clic sul pulsante Attiva / distriggers modalità dispositivo nell’angolo in alto a sinistra (1).
  • Assicurati che la console sia visualizzata facendo clic sul pulsante di menu (2)> Mostra console (3) o premendo il tasto ESC per triggersre la console (funziona solo quando la barra degli strumenti per sviluppatori ha lo stato attivo).
  • Apri le tabs Emulazione (4)> Media (5) , controlla i supporti CSS e seleziona print (3).

Supporto per Chrome v46 +

Chrome v43 +:

  • L’icona del cassetto nel passaggio 2 è stata modificata.

Emulazione della query sui supporti di stampa su Chrome v43

Chrome v42:

  • Apri gli Strumenti per sviluppatori ( CTRL SHIFT I o F12 )
  • Fai clic sul pulsante Attiva / distriggers modalità dispositivo nell’angolo in alto a sinistra (1).
  • Accertarsi che il cassetto sia visualizzato facendo clic sul pulsante Mostra cassetto (2) o premendo il tasto ESC per triggersre il cassetto.
  • In Emulazione> Controllo supporti CSS e seleziona stampa (3).

Emula query di stampa su Chrome v42

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. abilitare “Mostra vista emulazione nel cassetto della console”
  3. Chiudi le impostazioni, vai alla scheda ‘Elementi’
  4. Hit Esc per far apparire la console
  5. Scegli la scheda “Emulazione”, fai clic su “Schermo”
  6. Scorri verso il basso fino a “Supporti CSS”, seleziona “stampa”

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

Abilita sostituzioni

Dal momento che Chrome 32 hai l’opzione CSS media nella sezione Screen della scheda Emulation del cassetto.

Basta abilitarlo, selezionare la print come tipo di supporto di destinazione e – ecco – la pagina viene resa [quasi] come verrà stampata.

Usa Esc per aprire il cassetto se non è visibile.

Si prega di consultare questo articolo

Apri l'ispettore degli strumenti di chrome dev

Quindi vai alla scheda “sostituzioni”

Apri config / Impostazioni

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

I primi passaggi sono invariati:

  1. Premi F12 per visualizzare gli strumenti di sviluppo

  2. Premere ESC per aprire la console

Secondo le risposte precedenti, l’impostazione potrebbe essere trovata nella scheda “Emulazione”. Come mostrato nelle immagini sottostanti, ora è stato spostato nella scheda “Rendering”, che può essere richiamata facendo clic sui tre punti a sinistra della scheda “Console”.

Selezione scheda

Impostazione della selezione

A partire da Chrome 48+, puoi accedere all’anteprima di stampa tramite i seguenti passaggi:

  1. Apri gli strumenti di sviluppo – Ctrl / Cmd + Maiusc + I o fai clic con il pulsante destro del mouse sulla pagina e seleziona “Ispeziona”.

  2. Premi Esc per aprire il cassetto aggiuntivo.

  3. Se “Rendering” non è già visualizzato, fai clic sul 3 punti kebab 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 esaminare elementi e risolvere i problemi come faresti con la versione del browser.

Immagine di Chrome 49+ Anteprima di stampa in Dev Tools

Se esegui il debug del tuo CSS utilizzando Print As PDF in Google Chrome e i tuoi colors di sfondo dell’elemento CSS non vengono visualizzati, assicurati che la casella di controllo “Grafica in background” sia spuntata. Ho passato quasi 30 minuti a eseguire il debug del mio CSS e mi chiedevo cosa causasse l’ignoranza del mio background CSS.

Colore di sfondo di Google Chrome Print ignorato

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

Chrome v51 MacEmulazione del selettore multimediale appare in basso

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 v50:

Modo 1:

  1. Menu> Altri strumenti> Impostazioni di rendering (vedi immagine)
  2. Giù: scheda Rendering> Emula media “stampa”

Modo 2:

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

Chrome v67 (mac):

  1. Tieni premuto Cmd + opt + j per aprire gli strumenti di sviluppo
  2. fai clic sul ... sul lato destro e scegli: Altri strumenti >> Rendering
  3. Quando viene visualizzata la finestra di rendering nella parte inferiore dello schermo, emula la sezione Media CSS e scegli “Schermo” dal menu a discesa.
  4. Vai a “File >> Stampa” e dovresti vedere la vista che vuoi stampare.

Immagini della descrizione precedente per Chrome v67 su un Mac:

Dove trovare la scheda Rendering: Fare clic su ... sul lato destro e scegliere: Altri strumenti >> Rendering

screenshot 1

Come ottenere la vista “schermo” da stampare: Quando la finestra Rendering appare nella parte inferiore dello schermo, emula la sezione Media CSS e scegli “Schermo” dal menu a discesa.

screenshot 2

Spero che sia d’aiuto.