Usando o Element Inspector do Chrome no modo de visualização de impressão?

666

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).

David Stinemetze
fonte

Respostas:

1158

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 v52 +

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 v48 +

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).

Suporte do Chrome v46 +

Chrome v43 +:

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

Emular a consulta da mídia de impressão no Chrome v43

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).

Emular a consulta da mídia de impressão no Chrome v42

lmeurs
fonte
14
Posso confirmar isso, por isso fiz a resposta aprovada. Não sei por que eles continuam insistindo em movê-lo a cada poucos lançamentos.
David Stinemetze
8
Foi encontrado no Chrome 48, mas eles foram movidos novamente: vá para "renderização" na gaveta, marque "Emular mídia de impressão".
51316 Olemak
7
Essas mudanças frequentes são a coisa mais idiota que já vi sair do google! Que desperdício do meu tempo.
Isapir
8
Infelizmente, isso nem sempre emula a mesma coisa que a visualização de impressão mostra, portanto, não é tão bom para depuração. É bom ver quais são os estilos e o layout geral.
Confuzing 10/10
18
Este emulador de 'impressão' é completamente inútil. Ele não emula adequadamente a página, pois o que você vê no navegador não será nada parecido com o que você vê na visualização de impressão. Alguém tem uma solução funcional?
Ian S
168

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.

Ativar substituições

Noco
fonte
1
Para refletir esta atualização, fui adiante e marquei esta como a resposta correta agora.
David Stinemetze
3
A guia Substituições não existe mais no Chrome 36 (não sei quando isso foi alterado). A guia Emulação está presente por padrão.
ebruchez
1
Sou eu ou a opção de mídia CSS está no Chrome 36? Agora só é possível selecionar com base em um dispositivo móvel específico. ATUALIZAÇÃO: doh. Conforme as instruções acima, literalmente, clique em "Tela". Não é imediatamente óbvio que é clicável.
Ted
1
O único problema que encontrei, agora que estou usando, é que não é exatamente o que o Chrome imprime. Isto é extremamente evidente com Bootstrap 3.x onde a mídia usará grid-md enquanto a visualização de impressão utiliza grid-sm
Sammaye
3
O Chrome 39 está em "mídia". você deve ativar a emulação do dispositivo clicando no pequeno ícone do telefone à esquerda da barra superior do devtools e depois clique nos 3 pontos no canto superior direito do emulador de dispositivo.
Danny Staple
73

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.

Alexander Pavlov
fonte
Eu esperava que fosse mais simples do que isso, mas acho que terá que ser feito por enquanto. Seria bom se isso fosse incorporado automaticamente a uma das ferramentas.
David Stinemetze 14/03/12
Quando tiver a chance, vou tentar. Eu posso apenas ficar com o método de Jon-YYC até então.
David Stinemetze
Estou usando a versão 28 no mac e não vê esta opção ... mais alguém tem esse problema?
21413 Aaron Hill
2
@AaronHill Estou usando a versão 28 em um Mac e não tenho nenhum problema. Embora talvez você não tenha realmente entrado na caixa de diálogo de configurações. Você pode encontrar isso clicando no ícone de engrenagem no canto inferior direito do Element Inspector.
David Stinemetze
2
Esta resposta está desatualizada.
Flimm
23

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".

Seleção de guias

Seleção de configuração

Halle Knast
fonte
20

Consulte este artigo

Inspetor de ferramentas de desenvolvimento do Chrome aberto

Vá para a guia "substituições"

Abrir config / Settings

adardesign
fonte
3
Esta resposta está desatualizada.
Flimm
14

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.

Imagem da opção Chrome 49+ Print Preview nas Ferramentas de Desenvolvimento

NilsyNils
fonte
Você tem uma fonte para obter instruções atualizadas do DevTools? Eu posso descobrir a maioria deles, mas eu estava procurando por tudo isso e sinto que há muitos novos recursos úteis que estão me escondendo.
Crystal Miller
1
A melhor fonte que encontrei para informações gerais sobre ferramentas de desenvolvimento é developers.google.com/web/tools/chrome-devtools/?hl=pt-BR . Também gostei muito de assistir as atualizações da versão mais recente deste vídeo: youtube.com/watch?v=dJR-n8szgBc .
NilsyNils
7

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.

Cor de fundo do Google Chrome Print ignorada

Rosdi Kasim
fonte
6

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.

Chrome v51 Mac O seletor de emulação de mídia aparece na parte inferior

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

user2182349
fonte
Se eu selecionar impressão ou tela em "emular mídia", ela ainda será impressa com a folha de estilo de impressão. Acabei usando uma extensão de captura de tela de página inteira. chrome.google.com/webstore/detail/full-page-screen-capture/…
niknah 21/02/19
4

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

captura de tela 1

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.

captura de tela 2

Espero que ajude.

Matt
fonte
4

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

    Alterar emulação de tipo de mídia via menu de comando

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.

Kariem
fonte
1

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
Ben Richter
fonte