CSS-Änderungen mit Chrome-Entwicklertools beibehalten

Question

Ich versuche, ein Dropdown-Menü zu debuggen. Ich habe noch keinen Zugriff auf die Website. Daher versuche ich mithilfe der Google Chrome-Entwicklertools eine Lösung zu finden, die ich testen und dann auf die Website anwenden kann, wenn ich darauf zugreifen kann. Es ist nur CSS und vielleicht einige Javascript-Änderungen.

Das Problem ist, ich möchte einige neue CSS-Stil Regeln über dev-Tools anwenden, aber dann diese beim Aktualisieren der Webseite beibehalten. Gibt es eine Möglichkeit, Stile anzuwenden und zu erhalten? Ich habe mir den Ressourcenbereich angesehen, der mir vorschlägt, dass ich so etwas machen kann (vielleicht indem ich ein lokales Stylesheet als Ressource hinzufüge?), Aber ich kann einfach nicht herausfinden, wie es geht.

Kann mir hier jemand in die richtige Richtung zeigen?

Vielen Dank Leute ...

Answer 1

Tha nks für die Vorschläge. Ich probierte beides aus, hatte aber kleinere Probleme mit ihnen (nur nicht besonders einfach oder intuitiv für mich persönlich). Stattdessen summte ich auf Tincr, die ich gefunden habe, um besser zu passen. Danke Leute.

Answer 2

Versuchen Sie, die Erweiterung stylebot, die Sie für Websites schnell erstellen und speichern persistente benutzerdefinierte CSS ermöglicht.

Answer 3

können Sie installieren die Tampermonkey Chrome-Erweiterung, die für Chrom Greasemonkey ist, und Sie können userscripts laden, die css und Verwendung jquery verändern kann die Seite, und diese Änderungen sind permanent als das Skript ändern wird geladen und führen Sie es automatisch, wann immer Sie auf die Website gehen Sie in der @match Regelsatz finden Sie in der folgenden userscript, die nur die Hintergrundfarbe der Seite ändert:

// ==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

Es gibt auch eine Erweiterung namens hotfix. Sie können Änderungen von Chrome Dev Tools direkt in GitHub speichern.

Answer 5

Meine Lieblings-Tools für CSS überwiegendes ist Stilvolle https://chrome.google.com/webstore/detail/stylish/fjnbnpbmkenffdnngjfgmeleoegfcffe

Es ist für das Debugging und die Verbesserung der jede Web-Seite nützlich ist. Es gibt auch eine große Bibliothek vorhandener Stile mit einer bequemen Verknüpfung zu ihnen aus dem Erweiterungsmenü. Wie diese, für StackOverflow.com