Sugestões para depuração de folhas de estilo de impressão?


238

Recentemente, estive trabalhando em uma folha de estilo de impressão para um site e percebi que não tinha meios de ajustá-lo. Uma coisa é ter um ciclo de recarga para trabalhar no layout da tela:

  • mudar código
  • guia de comando
  • recarregar

mas todo esse processo fica muito mais árduo quando você está tentando imprimir:

  • mudar código
  • guia de comando
  • recarregar
  • impressão
  • estrabismo na imagem de visualização de impressão
  • abra o PDF na visualização para inspeção adicional

Existem ferramentas que estou perdendo aqui? O inspetor do WebKit tem uma caixa de seleção "fingir que é mídia paginada"? Existe alguma mágica que o Firebug ( arrepio ) pode fazer?


4
Que tal a função "Visualizar impressão" de um navegador que suporta (por exemplo, Firefox)? Depurei (principalmente com precisão) algumas páginas da Web para impressão.
Halil Özgür 28/02

2
possível duplicata de Como depurar CSS imprimível?
Out

3
No Firefox, abra a "Barra de Ferramentas do Desenvolvedor" com Shift + F2, digite "mídia emula impressão" (ou "emu" + Tab + "impressão"), pressione Enter.
Marcello Nuccio


@MarcelloNuccio Esta deve ser uma resposta. stackoverflow.com/a/28873496/1696030 obteve alguns votos positivos para comparação. A "Barra de Ferramentas do Desenvolvedor" é um pouco enganadora, pois é uma interface de linha de comando.
Volker E.

Respostas:


327

Existe uma opção para isso no inspetor do Chrome.

  1. Abra o inspetor do DevTools (mac: Cmd+ Shift+ C, windows: Ctrl+ Shift+ C)
  2. Clique no ícone Alternar modo de dispositivoBotão de alternância do modo do dispositivo , localizado no canto superior esquerdo do painel DevTools. (janelas: Ctrl+ Shift+ M, mac: Cmd+ Shift+ M).
  3. Clique no ícone Mais substituições mais substituições no canto superior direito da janela de exibição do navegador para abrir a gaveta do devtools.
  4. Em seguida, selecione Mídia na gaveta de emulação e marque a caixa de seleção Mídia CSS .

    insira a descrição da imagem aqui

Isso deve fazer o truque.

Atualização: os menus foram alterados no DevTools. Agora ele pode ser encontrado clicando no menu "três pontos" no canto superior direito> Mais Ferramentas> Configurações de renderização> Emular mídia> imprimir.

Fonte: página do Google DevTools *


5
Obrigado, é o que eu estava procurando, não consegui encontrar: / O atalho não funciona mais. Eu apenas faço o ícone de engrenagem F12 + no canto inferior direito, então a configuração está na guia Substituições, #
Aurelien 28/02

18
infelizmente não é 100% exato :(
maazza

9
No Chrome 32.0.1700.14 beta-m Aura, "Emulate CSS media [print]" está ausente :(
Rocket Hazmat

11
Esta resposta precisa ser corrigida. No Chrome 48, o emulador de folha de estilo de impressão não está mais em "Emulação", mas em "Renderização".
chharvey

13
Menu de três pontos (lado direito) no Inspetor> Mais Ferramentas> Configurações de Rendering> media Emulate> print
allicarn

74

Estou assumindo que você deseja o máximo controle possível da janela impressa sem usar uma abordagem HTML para PDF ... Use a tela @media para depurar - @media print para css final

Os navegadores modernos podem fornecer um visual rápido do que acontecerá no momento da impressão usando polegadas e pontos em um @media query.

@media screen and (max-width:8.5in) { /* resize your window until the event is triggered */
    html { width:8.5in; }
    body { font: 9pt/1.5 Arial, sans-serif; } /* Roughly 12px font */
 ...
}

Quando o navegador exibir "polegadas", você terá uma idéia melhor do que esperar. Essa abordagem deve terminar, exceto o método de visualização da impressão. Todas as impressoras trabalharão com as unidades pte in, e usando a técnica @media, você poderá ver rapidamente o que vai acontecer e ajustar em conformidade. O Firebug (ou equivalente) agilizará absolutamente esse processo. Ao adicionar suas alterações ao @media, você obtém todo o código necessário para um arquivo CSS vinculado usando o media = "print"atributo - basta copiar / colar as regras da tela @media no arquivo referenciado.

Boa sorte. A web não foi criada para impressão. Criando uma solução que entrega todo o seu conteúdo, estilos iguais aos vistos no navegador podem ser impossíveis às vezes. Por exemplo, um layout fluido para um público predominantemente de 1280 x 1024 nem sempre se traduz facilmente em uma impressão a laser agradável e elegante de 8,5 x 11.

Referência do W3C para fins purinos: http://www.w3.org/TR/css3-mediaqueries/


Só queria comentar que esse método é bastante inteligente. Muito mais fácil redimensionar a janela para "alternar" estilos de impressão do que usar uma função de visualização de impressão. Embora você ainda precise fazer isso algumas vezes para obter compatibilidade com o IE e outras coisas, isso é ótimo para a iteração inicial dos estilos de impressão.
chucknelson

@Mandril. Obrigado cara. Ei, eu percebi que minha demo estava off-line, então criei um violino para ela. jsfiddle.net/dNEmT
Dawson

20

Chrome 48, você pode depurar os estilos de impressão na guia Renderização .

Clique no ícone do menu no canto superior direito do inspetor e nas Configurações de renderização .

Editar
No Chrome 58, o local foi alterado para Web Inspector> Menu> Mais Ferramentas> Renderização


4
Chrome 49: F12 (console do desenvolvedor) -> ESC (console) -> Renderização -> Emular mídia de impressão
user1477388

19

No Chrome v41, está lá, mas em um local um pouco diferente.

insira a descrição da imagem aqui


3
Em V53 é na guia Renderização em vez disso, na parte inferior há uma caixa de seleção para Emulate de mídia que permitirá uma lista suspensa que você pode selecionar Imprimir em, semelhante à captura de tela fornecido
James Gray

16

Existe uma maneira fácil de depurar sua folha de estilo de impressão sem alterar nenhum atributo de mídia no seu código HTML (é claro, como indicado, isso não resolve o problema da largura / páginas):

  • Use a extensão Firefox + Web Developer.
  • No menu Desenvolvedor da Web, escolha CSS / Exibir CSS por Tipo de mídia / Impressão
  • Volte ao menu Desenvolvedor da Web, escolha Opções / Persistir recursos

Agora você está visualizando o CSS impresso e pode recarregar sua página indefinidamente. Quando terminar, desmarque "Persistir recursos" e recarregue, você obterá o CSS da tela novamente.

HTH.


7
torna diferente da visualização de impressão, substancialmente. talvez isso seja uma peculiaridade no meu css. de qualquer forma, não resolve o problema. obrigado embora.
heartpunk

Sim, completamente diferente para mim também. Eu segui este jsfiddle ( jsfiddle.net/2wk6Q/3 ) e a visualização de impressão mostra páginas com margens vermelhas, mas isso é totalmente diferente.
duality_

1
Devo dizer que essa "solução alternativa" funciona melhor para mim. Talvez eu tenha sorte e seja por isso que existem apenas pequenas diferenças entre a tela de impressão nativa e a tela de impressão dos desenvolvedores da web, mas isso definitivamente me ajudou a descobrir por que as lacunas aparecem e o que é mais importante - posso passar pelo código com o firebug e ver o que está acontecendo on
Erik Čerpnjak 02/12/2015

13

A interface do usuário do Chrome é diferente novamente a partir da v53.

Não preciso usar esse recurso com frequência, mas sempre que faço isso, levo uma eternidade para descobrir onde a equipe do Chrome o moveu desde a última vez que queimei ciclos tentando localizá-lo.

Observe que é o menu ... no painel Ferramentas de Desenvolvimento, não o menu ... no painel Navegador Chrome.

Visualização da impressora a partir da v53 no MacOS

Agora role para baixo na seção Renderização. Geralmente está abaixo da dobra.


1
Você acabou de me salvar dias de depuração do print.css. Você é demais!
21818 zazvorniki

8

Seguindo a resposta de rflnogueira, as configurações atuais do Chrome (40.0. *) Terão a seguinte aparência:

cromo impressão emulação css


Demorei um pouco para identificar a guia "Mídia". Continuei procurando na aba "Dispositivo".
Rios Lorin

5

Apenas mostre a folha de estilo de impressão no seu navegador usando media="screen"durante a depuração. A visualização de visualização de impressão usa o mesmo mecanismo de renderização do modo de navegação normal, para que você possa obter resultados precisos usando isso.


14
Exceto que o modo de navegação normal não tem páginas, então não tenho idéia de como o conteúdo fluirá. O modo de navegação normal tem uma largura de um certo número de pixels, enquanto uma página tem uma largura de um certo número de polegadas ou centímetros. Existem diferenças fundamentais independentes da implementação entre tela e impressão. Depuração entre esses é o que eu estou procurando.
Jim Puls

1
No chrome, a renderização é bem diferente usando apenas esta sugestão. Não vai funcionar.
22611 heartpunk

A largura da página não é difícil de definir, é a altura realmente difícil. Navegadores e impressoras desempenharão um papel na dor de cabeça de 11 polegadas. As páginas da Web são de tamanho contínuo. Sem uma garantia do tipo de dispositivo de saída e do navegador, acho que você nunca acertará em cheio o tempo todo. Usar uma abordagem de HTML para PDF funcionaria, mas isso está além do escopo da sua pergunta.
Dawson

3

2019 - Instruções atualizadas

  1. Abrir o inspetor Chrome
    • Do Mac => option+ command+i
    • No Windows =>F12
  2. Clique nos pequenos 3 pontos, customize and control devTools insira a descrição da imagem aqui

  3. Selecione More Tools

  4. Selecione Rendering

  5. Role para baixo até Emulate CSS Media

  6. Selecione printna seta para baixo

insira a descrição da imagem aqui


0

Se você tiver uma função de impressão que reescreva o conteúdo da página em uma nova janela com a folha de estilos de impressão referenciada, terá uma idéia muito melhor de como será a aparência no papel e poderá depurá-la também com firebug.

Aqui está um exemplo de como isso pode ser feito com JavaScript / jquery

        $("#Print").click(function () {
            var a = window.open('', '', 'scrollbars=yes,width=1024,height=768');
            a.document.open("text/html");
            a.document.write("<html><head>");
            a.document.write('<link rel="stylesheet" href="css/style.css" />');
            a.document.write('<link rel="stylesheet" href="css/print.css" />');
            a.document.write("</head><body>");
            a.document.write($('#Content').html());
            a.document.write('</body></html>');
            a.document.close();
            a.print();
        });

2
O problema dessa abordagem é que, se um usuário simplesmente selecionar "Imprimir ..." em seu navegador, essa função javascript nunca será chamada.
Ken Liu

você não precisa exibir a função de impressão para o usuário, você pode simplesmente usá-lo para fins de depuração, se desejar
Blowsie

Essa é uma solução projetada para algo que o navegador já faz. Basta usar um media="print"e media="screen", respectivamente, para suas folhas de estilo e usar apenas o menu do navegador ou combos chave para visualização invocação de impressão. (Nesse caso, não é diferente de abrir um pop-up). E se você estiver apenas depurando, aplique o media="screen"atributo aos seus estilos de impressão até concluir a depuração.
#

-1

insira a descrição da imagem aqui

No DreamWeaver, existe uma barra de ferramentas que mostra praticamente qualquer opção de renderização desejada: tela, impressão, mídia portátil, tela de projeção, mídia de TV, folhas de estilo de hora, etc. É isso que eu uso especialmente porque: mostra instantaneamente uma visualização com 1 toque único de um botão.


1
É bom saber, mas exigiria o uso de um mecanismo de renderização diferente daquele para o qual desenvolvemos e ainda requer mais do que uma recarga. obrigado embora.
heartpunk

1
Já em 2011, esse software era exclusivo para compra, apenas em plataformas limitadas, pelas quais você precisava pagar para obter a funcionalidade solicitada para depurar a Web aberta.
Volker E.

-7

Eu uso macros para enviar pressionamentos de tecla e cliques do mouse repetidamente. No Windows, o AutoHotKey é um ótimo software e, no OS X, você pode ler sobre o Automator, uma espécie de AHK para OsX alternativo .

No Windows (substitua Ctrl por Cmd no OS X) "Ctrl-s / alterna para a janela Fx onde quer que esteja na lista de janelas abertas / Ctrl-r" vinculada a 1 tecla não utilizada evita frustração de tarefas desinteressantes e, finalmente, salva meus braços do RSI :)

Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.