Как сохранить изменения CSS с помощью инструментов разработчика Chrome

Я пытаюсь отладить раскрывающееся меню. У меня пока нет доступа к веб-сайту, поэтому я пытаюсь найти решение через инструменты разработчика Google Chrome, которые я могу протестировать, а затем применить к сайту, когда получу доступ. Это только CSS и, возможно, некоторые изменения Javascript.

проблема в том, что я хочу применить некоторые новые правила стиля CSS через инструменты разработки, но затем они сохраняются при обновлении веб-страницы. Есть ли способ применить стили и заставить их сохраняться? Я посмотрел раздел ресурсов, который предполагает, что я могу сделать что-то вроде этого (возможно, добавив локальную таблицу стилей в качестве ресурса?), но я просто не могу понять, как это сделать.

может кто-нибудь мне точку в правильном направлении?

большое спасибо ребята...

10
css google-chrome-devtools javascript

5 ответов

Вы можете установить Tampermonkey расширение chrome, которое является greasemonkey для chrome, и вы можете загружать пользовательские скрипты, которые могут alter css и используйте jquery для изменения страницы и в постоянный как скрипт будет загружен и выполнить его автоматически в любое время вы идете на сайт, который вы установили в @match правило, видим следующее userscript который просто изменяет цвет фона страница:

// ==UserScript==
// @name       yourscript
// @namespace  http://yeeeee/
// @version    0.1
// @description  Change bacground color of page
// @require    http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js
// @match      http://yourtargetsite.com/*
// @copyright  2012+, Me and Brothers
// ==/UserScript==

(function () {
    $(document).ready(function(){
        style = '<style type="text/css"> body {background-color: #CC7777 ! important;} </style>';
        $('head').append(style);
    });
})();
10

мои любимые инструменты для переопределения CSS стильны https://chrome.google.com/webstore/detail/stylish/fjnbnpbmkenffdnngjfgmeleoegfcffe

Это полезно для отладки и улучшения любой веб-страницы. Существует также большая библиотека существующих стилей, с удобной ссылкой на них из меню Расширения. Как эти, для StackOverflow.com

4

Спасибо за пожелания. Я пробовал оба, но имел небольшие проблемы с ними (просто не особенно легко или интуитивно для меня лично). Вместо этого я sumbled на Tincr, который я нашел более подходящим. Спасибо ребята.

2

попробуйте расширение stylebot, который позволяет быстро создавать и сохранять постоянные пользовательские CSS для сайтов.

1

есть также расширение под названием исправления. Он позволяет сохранять изменения из инструментов Chrome Dev непосредственно в GitHub.

0