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

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?

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 dispositivo , localizado no canto superior esquerdo do painel DevTools. (janelas: Ctrl+ Shift+ M, mac: Cmd+ Shift+ M).
3. Clique no ícone 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 .

   

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 *

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/

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

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

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.

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.

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

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

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.

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

3. Selecione More Tools

4. Selecione Rendering

5. Role para baixo até Emulate CSS Media

6. Selecione printna seta para baixo

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();
        });

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.

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