☰

Laden Sie ein Skript/Stylesheet in Chrome neu

tag-icon • tag-icon google-chrome
Laden Sie ein Skript/Stylesheet in Chrome neu

Ist es mit den Devtools von Chrome möglich, nur ein (oder mehrere) der in eine Seite eingefügten Skripts oder Stylesheets neu zu laden, ohne die ganze Seite neu zu laden? Wenn ich mich also auf befinde, das und page.htmlverwendet , ist es dann möglich, beispielsweise neu zu laden , ohne zu aktualisieren ?script.jsstyle.cssscript.jspage.html

Antwort1

Eine einfache Möglichkeit, die mit fast allen funktionieren sollteStylesheets und Bilderbesteht darin, den Dateinamen durch Hinzufügen einer Abfrage zur URL zu ändern.

Im Superuser lautet das CSS beispielsweise:

<link rel="stylesheet" type="text/css" href="//cdn.sstatic.net/superuser/all.css?v=a5d649727a07">

Ändern Sie das in

<link rel="stylesheet" type="text/css" href="//cdn.sstatic.net/superuser/all.css?v=a5d649727a07&refresh">

Und erhalten Sie einen neu aufgelegten (wenn auch unveränderten) Stil der Regeln.

Dies kann in ein Bookmarklet umgewandelt oder in die Konsole kopiert werden

[].forEach.call(document.querySelectorAll("link[rel=stylesheet]"), function(link) {
   link.href+=(link.href.indexOf("?") > -1) ? "&refresh" : "?refresh";
})

Bei Skripten sollten Sie das nicht tun. Fast alleSkripteändern die Seite beim Laden oder hängen sich an einen Handler an. Sie können problemlos eine andere JS-Datei laden, aber die von der vorherigen vorgenommenen Änderungen sind sehr schwer rückgängig zu machen.

Antwort2

Ich kann mir vorstellen, dass dies nützlich ist, wenn man versucht, ein mehrseitiges Formular oder etwas zu debuggen, das von Ajax als Antwort auf eine Reihe von Fragen geladen wird. Ich persönlich habe jedoch Fälle erlebt, in denen das Ändern von CSS oder Skripten in den Entwicklertools von Chrome zu einem anderen Ergebnis führt, als wenn dieselben Änderungen der entsprechenden Datei hinzugefügt und die Seite von Grund auf neu geladen wird. Das passiert nicht immer, aber ich habe es oft genug gesehen, sodass ich den Ergebnissen nach mehreren Änderungen in den Entwicklertools nicht mehr traue.

Ich bin mir nicht sicher, warum Sie das tun möchten, aber vorausgesetzt, es dient dem Debuggen eines langkettigen Prozesses, würde ich vorschlagen, einen einfachen Test hinzuzufügen, um festzustellen, ob Sie debuggen. Je nachdem, wie Ihr Code eingerichtet ist, würde ich versuchen, Debugpunkte hinzuzufügen, die wie das folgende grobe Beispiel funktionieren:

If (current-point != debug-point && debugging === true) Then
   ---code to bypass steps here---
Else
   ---other code to aid the debug process or allow regular execution---
End If

Natürlich wäre es ideal, eine Funktion zu erstellen. Das Einrichten dieser Funktion kann etwas aufwändig sein und Sie müssen sie entfernen oder anderweitig deaktivieren, bevor Sie live gehen, aber es würde Zeit sparen, da Sie eine Seite nicht immer wieder neu laden und eine lange Kette von Schritten wiederholen müssen.

Dies ist möglicherweise nicht möglich, wenn Ihr Code sehr kompliziert ist (durch die Verwendung externer Bibliotheken oder einfach schlampigen Code) oder wenn Sie an einem Live-System arbeiten müssen. Wenn es jedoch möglich ist, können Sie durch die Automatisierung oder Umgehung der Schritte bis zu dem Punkt, den Sie benötigen, schneller debuggen und mit genaueren Ergebnissen arbeiten, als wenn Sie sich darauf verlassen, dass die Entwicklertools von Chrome alle Änderungen, die Sie nach dem Laden der Seite vornehmen, genau interpretieren und wiedergeben.

verwandte Informationen