Come mantenere le modifiche CSS con gli Strumenti per sviluppatori di Chrome

Question

Sto tentando di eseguire il debug di un menu a discesa. Non ho ancora accesso al sito web, quindi cerco di trovare una soluzione tramite gli Strumenti per sviluppatori di Google Chrome che posso testare e quindi applicare al sito quando ottengo l'accesso. Sono solo i CSS e forse alcuni cambiamenti di Javascript.

Il problema è che voglio applicare alcune nuove regole di stile CSS tramite gli strumenti di sviluppo, ma in tal caso persistono quando si aggiorna la pagina Web. C'è un modo per applicare gli stili e farli persistere? Ho esaminato la sezione delle risorse, il che suggerisce che posso fare qualcosa di simile (magari aggiungendo un foglio di stile locale come risorsa?), Ma non riesco a capire come farlo.

Qualcuno potrebbe indicarmi la giusta direzione qui?

Molte grazie ragazzi ...

Answer 1

Tha nks per i suggerimenti. Ho provato entrambi, ma ho avuto problemi minori con loro (non particolarmente facile o intuitivo per me personalmente). Invece ho riassunto su Tincr, che ho trovato per essere una soluzione migliore. Grazie gente.

Answer 2

provare l'estensione stylebot che permette di creare e salvare persistente CSS personalizzato per i siti in modo rapido.

Answer 3

È possibile installare l'estensione Tampermonkey Chrome, che è Greasemonkey per Chrome, e si può caricare userscripts che può alterare css e utilizzare jQuery per modificare la pagina di, e questo cambia sono permanenti dello script sarà essere caricato ed eseguirlo automaticamente ogni volta che si va al sito impostato nella regola @match, vedere il seguente userscript che cambia solo il colore di sfondo della pagina:

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

Answer 4

C'è anche un'estensione chiamata hotfix. Ti consente di salvare le modifiche da Chrome Dev Tools direttamente a GitHub.

Answer 5

I miei strumenti preferiti per superiori CSS è elegante https://chrome.google.com/webstore/detail/stylish/fjnbnpbmkenffdnngjfgmeleoegfcffe

E 'utile per il debug e valorizzare qualsiasi pagina web. C'è anche una grande libreria di stili esistenti, con un comodo collegamento ad essi dal menu di estensione. Come questi, per StackOverflow.com