web-dev-qa-db-de.com

CSS mit Chrome Developer Tool einspritzen?

Wo kann ich der angezeigten Seite CSS hinzufügen? Ich möchte einem Element keinen Stil direkt hinzufügen. Ich möchte einer Seite ein "Dokument" hinzufügen, um Änderungen zu debuggen, bevor die style.css der Site bearbeitet wird.

Beachten Sie, dass es hier viele Fragen zum 'Injizieren von CSS aus einer Chrome-Erweiterung' gibt, aber ich möchte dies speziell über das "Chrome Developer Tools" -Ding tun.

18
Dan Bolser

Ist es das, was Sie suchen ?: "So bearbeiten Sie Quelldateien direkt in Chrome" http://www.sitepoint.com/edit-source-files-in-chrome/

1
simonbell

Ich bin nicht sicher, ob es funktioniert, aber Sie müssten es versuchen.

Drücken Sie F12/ (Cmd + opt + I auf dem Mac), um die Entwicklerkonsole zu öffnen und zur Registerkarte Konsole zu wechseln.

Kopieren Sie den folgenden Code, und fügen Sie ihn ein (bearbeiten Sie den Pfad):

$(document.head).append('<link rel="stylesheet" href="path_to_my_css">');

Alternativ können Sie eine Eigenschaft bearbeiten, sodass die Datei inspector-stylesheet.css von Chrome erstellt wird, und dort Ihre CSS-Quelle einfügen.

28
larssy1

Warum nicht so eine Art einfacher Framework-agnostischer One-Liner?

document.body.appendChild(function() {var el = document.createElement('link'); el.setAttribute('ref', 'stylesheet'); el.setAttribute('href', 'http://domain/print.css'); return el;}())

Scheint wie ein Zauber zu arbeiten ...

3
Jonas Carlbaum

Dies ist ein Grund, warum ich Firefox zum Unterrichten und für meine eigene Entwicklungsarbeit benutze. Die Antwort ist eingebaut.

In Abweichung zu den obigen Antworten können Sie mit modernem JavaScript einen fest codierten Stil wie folgt hinzufügen:

document.head.insertAdjacentHTML('beforeend','<style> … </style>');

oder Sie können ein externes Stylesheet wie folgt hinzufügen:

document.head.insertAdjacentHTML('beforeend','<link rel="styleshet" href="…">');

Das Argument beforeend soll dem injizierten CSS helfen, zuvor geladene Stile zu überschreiben.

Wenn Sie dies wiederholt tun, können Sie es als Lesezeichen hinzufügen, indem Sie beispielsweise Bookmarklet Crunchinator verwenden.

Die Technik ähnelt derjenigen, die ich in einer JavaScript-Klasse unterrichte, in der ich afterbegin verwende, um einige Standard-CSS-Codes einzufügen, aber Benutzer-Stylesheets erlauben, die Standardeinstellungen zu überschreiben.

3
Manngo

Dies sollte funktionieren (in Konsole einfügen, Argumente in der letzten Zeile nach Bedarf bearbeiten):

(function(i,n,j,e,c,t,css){
  css=i.createElement(n);t=i.getElementsByTagName(c)[0];css.href=j;css.rel=e;
  t.insertAdjacentElement('beforeend',css);})
(document,'link','//fonts.googleapis.com/css?family=Roboto','stylesheet','head');

Dadurch wird ein <link> eingefügt.

mit einem href //fonts.googleapis.com/css?family=Roboto

vor dem Schluss </head>

Wenn das Dokument, dem Sie eine CSS-Datei hinzufügen möchten, kein Head-Tag enthält, versuchen Sie als letztes Argument body:

(document,'link','//fonts.googleapis.com/css?family=Roboto','stylesheet','body');
2
stereobird

Diese Dinge mögen kompliziert erscheinen, aber sie sind sehr einfach.

Erster Weg, Inspector-Stylesheet:

Öffnen Sie Inspect Element (F12 Oder CntrlShift+I)

Gehen Sie zur Registerkarte Elemente. Wenn Sie noch nicht dort sind, sehen Sie die Registerkarte Stile. In der rechten Ecke wird das Symbol + angezeigt Klicken Sie darauf (oder drücken Sie lange auf dieses Symbol, wenn nicht automatisch ein Inspector-Stylesheet ) hinzugefügt wird, wird ein Selektor hinzugefügt des aktuell markierten Elements, direkt neben dem Selektor, gibt es einen Link/Button Inspector-Stylesheet , klicken Sie darauf, es Sie erhalten ein Fenster, in dem Sie Stile hinzufügen können.

Zweiter Weg, Snippet:

Öffnen Sie Inspect Element (F12 Oder CntrlShift+I)

Gehen Sie zur Registerkarte Quelle, gehen Sie zur Registerkarte Snippets, klicken Sie auf + Neues Snippet, benennen Sie es, wie Sie möchten, und fügen Sie Folgendes hinzu:

(function(){
    let style = `<style>
/*change your style here*/
body{
        display:none;
    }
</style>`;

document.head.insertAdjacentHTML("beforeend", style);
})();

speichern Sie es, führen Sie es aus (Cntrl+Enter).


In FireFox ist es noch einfacher:

Öffnen Sie Inspect Element (F12)

Gehen Sie zu Style Editor, klicken Sie auf das Symbol + und Sie können den Style bearbeiten. Sie können Stile auch importieren, indem Sie einfach auf das Symbol neben + klicken.

0
Harry

Gehen Sie in den Dev-Tools zur Registerkarte sources und klicken Sie mit der rechten Maustaste in die linke Spalte. Fügen Sie dann dem Arbeitsbereich einen Ordner hinzu, und wählen Sie im Datei-Explorer den Ordner aus, der Ihre CSS-Datei enthält. Sie müssen Änderungen zulassen. Wenn Sie dies getan haben, sehen Sie Ihren Ordner im Quelltextbaum (MACHEN SIE SICHER, DASS SIE FILESYSTEM TAB UNTER SOURCES TAB AUSWÄHLEN) Zuordnung zur Netzwerkressource. Sobald Sie die Datei zugeordnet haben, können Sie sie öffnen und im Arbeitsbereich anzeigen. Von dieser Datei aus wirken sich Änderungen auf die Seitenstile aus. Grundsätzlich werden Ihre Stile die angebotenen Stile übertreffen.

0
Mike Baker