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

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

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

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

Большое спасибо, спасибо...

Ответы

Ответ 1

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

Ответ 2

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

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

Ответ 3

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

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

Ответ 4

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

Ответ 5

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