Estou trabalhando no desenvolvimento de um site e preciso trabalhar na visualização de impressão. Normalmente, quando tenho problemas de layout, uso o Element Inspector do Chrome. No entanto, isso não existe no modo de visualização de impressão.

Existe um plug-in do Chrome ou alguma outra maneira de alterar sua mídia de visualização no próprio chrome, para exibir uma página como uma impressora faria? Suponho que não tenha uma solução específica para o Chrome, mas esse é o meu navegador principal; portanto, seria bom ter uma solução no navegador.

No momento, estou focado apenas na mídia de visualização de impressão, mas seria ideal poder mudar para qualquer um dos tipos de mídia suportados (por exemplo, todos / braille / em relevo / portátil / de impressão / projeção / tela / fala / tty / televisão).

Nota: Esta resposta abrange várias versões do Chrome, vá até ver V52 , V48 , V46 , V43 e V42 cada um com suas alterações atualizadas.

Chrome v52 +:

• Abra as Ferramentas do desenvolvedor (Windows: F12ou Ctrl+ Shift+ I, Mac: Cmd+ Opt+I )
• Clique no botão Personalizar e controlar o hambúrguer do DevTools e escolha Mais ferramentas> Configurações de renderização (ou Renderização em versões mais recentes).
• Marque a caixa de seleção Emular mídia de impressão na guia Renderização e selecione o tipo de mídia de impressão .

Chrome v48 + (Obrigado Alex por perceber):

• Abra as Ferramentas do desenvolvedor ( CTRLSHIFTIouF12 )
• Clique no botão Alternar modo de dispositivo no canto superior esquerdo (CTRLSHIFTM ).
• Verifique se o console é mostrado clicando em Mostrar console no menu em (1) (ESC tecla alterna o console se a Barra de Ferramentas do Desenvolvedor estiver focada).
• Marque Emular mídia de impressão na guia Renderização, que pode ser aberta, selecionando Renderização no menu em (2).

Chrome v46 +:

• Abra as Ferramentas do desenvolvedor ( CTRLSHIFTIouF12 )
• Clique no modo Alternar dispositivobotão no canto superior esquerdo (1).
• Verifique se o console é exibido clicando no botão de menu (2)> Mostrar console (3) ou pressionando o botãoESC tecla para alternar o console (funciona apenas quando a barra de ferramentas do desenvolvedor estiver focada).
• Abra as guias Emulação (4)> Mídia (5) , verifique a mídia CSS e selecione imprimir (3).

Chrome v43 +:

• O ícone da gaveta na etapa 2 foi alterado.

Chrome v42:

• Abra as Ferramentas do desenvolvedor ( CTRLSHIFTIouF12 )
• Clique no botão Alternar modo de dispositivo no canto superior esquerdo (1).
• Verifique se a gaveta é mostrada clicando no botão Mostrar gaveta (2) ou pressionando a ESCtecla para alternar a gaveta.
• Em Emulação> Mídia, verifique a mídia CSS e selecione imprimir (3).

Alterado no Chrome 32 35+

(No Chrome 35 ou superior, a guia "Emulação" está presente por padrão. Além disso, o console está disponível em qualquer guia principal.)

1. No DevTools, vá para configurações-> Substituições
2. ative "Mostrar visualização de emulação na gaveta do console"
3. Feche as configurações, vá para a guia "Elementos"
4. Clique Escpara abrir o console
5. Escolha a aba "Emulação", clique em "Tela"
6. Role para baixo até "CSS Media", selecione "print"

Esta opção ainda não está disponível na guia console.

Desde o Chrome 32, você tem a CSS mediaopção na Screenseção da Emulationguia Gaveta .

Apenas ative-o, selecione printcomo o tipo de mídia de destino e - eis - sua página é renderizada [quase] da maneira como será impressa.

Use Escpara abrir a gaveta, se não estiver visível.

A partir do Chrome 48 (e talvez algumas versões anteriores), a função parece ter se movido mais uma vez:

Os primeiros passos não são alterados:

1. Pressione F12para exibir as ferramentas do desenvolvedor

2. Pressione ESCpara abrir o console

De acordo com as respostas anteriores, a configuração pode ser encontrada na guia "Emulação". Como mostrado nas imagens abaixo, ele agora foi movido para a guia "Renderização", que pode ser exibida clicando nos três pontos à esquerda da guia "Console".

Consulte este artigo

Vá para a guia "substituições"

A partir do Chrome 48+, você pode acessar a visualização de impressão através das seguintes etapas:

1. Abra as ferramentas de desenvolvimento - Ctrl/Cmd+ Shift+ Iou clique com o botão direito na página e escolha 'Inspecionar'.

2. Pressione Escpara abrir a gaveta adicional.

3. Se 'Rendering' ainda não estiver sendo exibido, clique no kebab de 3 pontos e escolha 'rendering'.

4. Marque a caixa de seleção 'Emular mídia de impressão'.

A partir daí, o Chrome mostrará uma versão impressa da sua página e você poderá inspecionar elementos e solucionar problemas como faria com a versão do navegador.

Se você estiver depurando seu CSS usando Imprimir como PDF no Google Chrome e as cores de plano de fundo do elemento CSS não estiverem aparecendo, verifique se a caixa de seleção 'Gráficos de plano de fundo' está marcada. Passei quase 30 minutos depurando meu CSS e me perguntando o que está fazendo com que meu background CSS fosse ignorado.

No Chrome v51 em um Mac, localizei as configurações de renderização clicando no canto superior direito, escolhendo Mais ferramentas> Configurações de renderização e verificando o botão Emular mídia nas opções oferecidas na parte inferior da janela.

Agradeço a todos os outros pôsteres que me levaram a isso e agradeço aos que forneceram a resposta sem as imagens.

Chrome v67 (mac):

1. Calma Cmd+opt+j para abrir as ferramentas de desenvolvimento
2. Clique no ... no lado direito e escolha: Mais ferramentas >> Renderização
3. Quando a janela Renderização aparecer na parte inferior da tela, emule a seção Mídia CSS e escolha: "Tela" na lista suspensa.
4. Vá em "Arquivo >> Imprimir" e você verá a exibição que deseja imprimir.

Imagens da descrição acima para Chrome v67 em um mac:

Onde encontrar a guia Renderização: Clique ...no lado direito e escolha: Mais Ferramentas >> Renderização

Como obter a visualização "tela" para imprimir: Quando a janela Renderização aparecer na parte inferior da tela, emule a seção Mídia CSS e escolha: "Tela" na lista suspensa.

Espero que ajude.

Com os atalhos disponíveis, a maneira mais rápida é

1. Abra as Ferramentas do desenvolvedor

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

2. Abra o menu de comandos

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

3. Digite printe selecione Emular tipo de mídia de impressão CSS no menu de contexto

   

Olhando para a excelente e atualmente mais votada resposta dos lmeurs , acho que essa solução também pode permanecer estável ao longo do tempo.

Chrome v50:

Caminho 1:

1. Menu> Mais Ferramentas> Configurações de renderização (veja a imagem)
2. Para baixo: Guia Renderização> Emular mídia "imprimir"

Caminho 2:

1. Console aberto [esc]
2. Menu Console> renderização