Как увидеть печатный носитель CSS в Firebug?

Firebug - отличный инструмент для показа CSS-экранного экрана для некоторого HTML-элемента, но есть ли способ взглянуть на печатный носитель CSS тоже? Или есть ли другой инструмент для просмотра печатного носителя CSS?

Ответ 1

Я бы никогда не ожидал, что это сработает, но это так. Установите -both- 1.5 beta Firebug и Web Developer. Когда вы выбираете print css из Web Developer, инструменты в Firebug неожиданно работают над новой версией страницы. До сих пор я не обнаружил проблем с запуском обоих одновременно.

Ответ 2

Как насчет панели инструментов веб-разработчиков?
https://addons.mozilla.org/en-US/firefox/addon/60
при установке перейти в CSS → Показать CSS по типу мультимедиа → Печать

Ответ 3

Теперь Firefox не нуждается в firebug.

Запустите панель инструментов разработчика, нажав Shift+F2
Тип media emulate print

Введите media reset, чтобы вернуться к стандартным представлениям.

Ответ 4

Используйте подключаемый модуль веб-разработчика. Затем вы можете выбрать из меню CSS, на каком носителе вы хотите, чтобы страница отображалась как.

Ответ 5

Возможно, вы захотите взглянуть на панель инструментов webdeveloper - она позволяет вам выбрать, какой CSS вы хотите видеть. В сочетании с firebug должно быть возможно увидеть печатный носитель CSS.

Ответ 6

В Firefox (и некоторых других браузерах) вы можете увидеть статическое отображение таблицы стилей печати, используя Предварительный просмотр. Это нигде не так полезно, как панель инструментов веб-разработчика, но также может помочь вам понять, что будет напечатано.

Ответ 7

Собственно, помните, что вы можете видеть @media print CSS, когда вы этого не ожидаете.

Как SO использует:

[..]@media print{#sidebar,#nav,[..],div.vote{display:none;}}[..]

... и, следовательно, можно ожидать, что панель CSS в Firebug каким-то образом покажет:

@media print {
  #sidebar, #nav, [..], div.vote {
    display: none;
  }
}

Но вместо этого он показывает CSS, как будто @media print фактически активен, например:

#sidebar, #nav, [..], div.vote {
  display: none;
}

(См. также соответствующий отчет о проблеме: В панели CSS нет интерфейса @media.)

Ответ 8

Изменить 2 После чтения Arjan , я понимаю, что это решение неправильно адресует сайты, используя (или злоупотребляя) CSS @media print. (См. Пример ниже.) Но я думаю, что это решение по-прежнему действует как "не идеальный быстрый и грязный трюк", прежде всего для кода, который вы написали, и что вы заранее знаете, что у него нет этого.

С Firebug вы также можете редактировать теги <link rel="stylesheet" type="text/css" ...> и <style> для удобства.

Например, вы можете переключать оригинал

<link rel="stylesheet" type="text/css" media="print">

<link rel="stylesheet" type="text/css" media="screen">

и браузер применит его. Вам также придется отключать только экраны.

Конечно, это полезно, только если вы хотите быстро проверить несколько страниц с очень небольшим количеством ссылок на стили, но, по крайней мере, вам не нужно устанавливать какие-либо дополнительные плагины.

Изменить 1 Этот трюк предлагает мне использовать javascript для автоматизации этого...

(Отказ от ответственности: я буду использовать JQuery для простоты. Я не эксперт по Javascript.)

// Save all stylesheet links
allStylesheets   = $('link[rel="stylesheet"], style');
// Save the print-stylesheet links
printStylesheets = $('link[media*="print"], link[media*="all"], style[media*="print"], style[media*="all"]');

// Set all stylesheet medias to something 'exotic'
if (null != allStylesheets) {
    allStylesheets.attr("media", "aural");
}
// Switch the print-stylesheet medias to 'screen'
if (null != printStylesheets) {
    printStylesheets.attr("media", "screen");
}

Обратите внимание, что по умолчанию media есть "screen" (w3.org - атрибут мультимедиа). Это можно использовать кнопкой, чтобы показать предварительный просмотр страницы. Единственный недостаток - перезагрузка страницы для восстановления исходного вида.

Как указано выше, это решение не работает с html-кодом, как это, потому что стиль внутри @media print не будет применяться браузером:

<html>
    <head>
        <title>Hello world</title>
        <style type="text/css" media="all">
            @media print { h1 { color: red; }}
        </style>
    </head>
    <body>
        <h1>Hello world</h1>
    </body>
</html>

Ответ 9

Панель инструментов веб-разработчика имеет один большой недостаток для отладки CSS: каждый раз, когда вы обновляете страницу, она возвращается к таблице стилей экрана.

То, что я обычно делаю в эти дни, временно переключает носители таблицы стилей печати на экран во время разработки, а затем переключитесь обратно, прежде чем переходить в живую.