Расширения браузера для повторного рендеринга страницы с использованием обновленной версии моего CSS-файла без перезагрузки самой страницы

Question

Я хочу изучить дизайн веб-интерфейса. (Я знаю, я знаю. Будучи программистом, ставлю меня в невыгодное положение. Но я все равно хочу попробовать.) Таким образом, я хотел бы «отладить» мои CSS-файлы.

Одна из самых больших неприятностей, которые я обнаружил, заключается в том, что я не могу проверить изменения в моих CSS-файлах без перезагрузки всей страницы. Иногда страница слишком велика. Иногда, после множества нажатий на страницу было перенесено много элементов, потому что мои страницы слишком сильно зависят от AJAX. Иногда я просто ненавижу постоянно нажимать Ctrl + R.

Существует ли какое-либо расширение для любого из основных браузеров (предпочтительно Safari и / или Chrome), которое повторно отображает страницу, используя обновленную версию файла CSS, без перезагрузки самой страницы?

Answer 1

Попробуйте инструменты разработчика в Chrome, используя их, вы можете в реальном времени редактировать свои определения CSS.Хотя я не знаю расширения, позволяющего перезагрузить только таблицу стилей, это может сработать, если вы хотите протестировать только несколько изменений.Firebug для Firefox позволяет то же самое.

Answer 2

Плагин Firefox «Веб-разработчик» позволяет вам «Добавить таблицу стилей пользователя ...» из своего меню. Он также имеет функцию «Редактировать CSS», которая позволяет редактировать в реальном времени содержимое файлов css (например, file1.css и file2.css будут иметь две вкладки редактора - по одной для каждого файла) и позволяет сохранять отредактированный файл.

Я склонен чаще использовать Firebug, как предлагает Пол, и вы можете скопировать + вставить измененное содержимое css-файла из него обратно в ваш настоящий css-файл.

Answer 3

Stylebot расширение для Chrome тоже отлично.

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

Stylebot позволяет быстро манипулировать внешним видом любого веб-сайта (используя пользовательский CSS). Используя Stylebot, вы можете персонализировать внешний вид ваших любимых веб-сайтов. Это также отличный инструмент для изучения CSS и отладки дизайна вашего собственного сайта.