2013-05-11 5 views

Antwort

148

Dies ist ein bisschen eine Arbeit herum, aber eine Möglichkeit, die Sie erreichen können, ist, indem Sie einen Haltepunkt am Anfang der Javascript-Datei oder Block hinzufügen, die Sie manipulieren möchten.

Anschließend wird der Debugger beim erneuten Laden an diesem Haltepunkt angehalten, und Sie können die gewünschten Änderungen an der Quelle vornehmen, die Datei speichern und anschließend den Debugger über den geänderten Code ausführen.

Aber wie jeder gesagt hat, nächste laden die Änderungen werden weg sein - zumindest lassen Sie uns einige leicht modifizierte JS-Client-Seite ausführen.

+7

Es stellte sich heraus, dass dies die Antwort war, die ich suchte. Platzieren Sie einen Haltepunkt in der ersten Zeile des JavaScript-Codes. Wenn der Fehler auftritt, fügen Sie den geänderten Code ein. Unpause und es funktioniert! –

+0

'+ 1' das sollte die Antwort sein! –

+0

Dies ist eine gute Problemumgehung. –

-7

Ja, öffnen Sie einfach die Registerkarte "Quelle" in den Dev-Tools und navigieren Sie zu dem Skript, das Sie ändern möchten. Nehmen Sie Ihre Anpassungen direkt im dev tools-Fenster vor und drücken Sie dann Strg + s, um das Skript zu speichern - wissen Sie, dass die neue js verwendet wird, bis Sie die gesamte Seite aktualisieren.

+0

Welche Version von Chrom? Ja, Sie können‚Bearbeiten‘der Inhalt eines Skripts (keine Skripts auf der Seite selbst obwohl), aber Änderungen haben keine Auswirkungen, und ctrl -s/speichere nur, damit du das Skript lokal speichern kannst (als ctrl-wie im Hauptfenster) – davidkonrad

+0

Ich benutze Version 34 - wenn ich ein Skript bearbeite zB ein console.log zu einem click-Event (bereits bond) hinzufüge und speichere gibt die Konsole folgende Meldung aus: "Neukompilierung und Aktualisierung erfolgreich." - Wenn ich das Klickereignis auslöst, erhalte ich die Protokollausgabe in der Konsole. – jacksbox

+0

Wenn Sie die Seite neu laden, scheint sie die lokal geänderte Datei nicht zu verwenden. –

49

Die Resource Override Erweiterung ermöglicht es Ihnen, genau das zu tun:

  • eine Datei Regel für die gewünschte URL erstellen
  • bearbeiten die js/css/etc in der Verlängerung
  • reload so oft ersetzen wie Sie wollen :)
+0

Hat der Trick zu mir, danke. Früher habe ich Fiddler für Windows vor dieser Erweiterung benutzt. Im Moment kann ich entfernte Dateien auf jeder Plattform debuggen. –

+0

Danke. Cooles Zeug. – TiSer

0

ich weiß, es ist nicht der asnwer auf die genaue Frage (Chrome Developer tools), aber ich bin mit dieser Problemumgehung mit Erfolg: http://www.telerik.com/fiddler

(ziemlich sicher, dass einige der Web-Entwickler bereits über dieses Tool kennen)

  1. Speichern Sie die Datei lokal
  2. bearbeiten je nach Bedarf
  3. Profit!

enter image description here

Voll docs: http://docs.telerik.com/fiddler/KnowledgeBase/AutoResponder

PS. Ich würde es eher in Chrome als Flag preserve after reload implementiert haben, kann dies jetzt nicht tun, Foren und Diskussionsgruppen auf Firmennetzwerk blockiert :)

5

Große Nachrichten, wird das Update März 2018 kommen, sehen Sie diesen Link: https://developers.google.com/web/updates/2018/01/devtools

„Lokale Überschreibungen können Sie Änderungen in DevTools machen, und halten Sie diese Änderungen auf Seite geladen wird. Bisher alle Änderungen, die Sie in DevTools gemacht würde verloren gehen, wenn Sie die Seite neu geladen. Lokale Überschreibungen arbeiten für die meisten Dateitypen

Wie es funktioniert:

  • Sie geben ein Verzeichnis an, in dem DevTools Änderungen speichern soll. Wenn Sie in DevTools Änderungen vornehmen, speichert DevTools eine Kopie der modifizierten Datei in Ihrem Verzeichnis.
  • Wenn Sie die Seite neu laden, bedient DevTools die lokale, geänderte Datei und nicht die Netzwerkressource.

    1. Öffnen Sie die Quellen-Panel:

Um lokale Überschreibungen einzurichten.

  • Öffnen Sie die Registerkarte Überschreibungen.
  • Klicken Sie auf Setup-Überschreibungen.
  • Wählen Sie aus, in welchem ​​Verzeichnis Sie Ihre Änderungen speichern möchten.
  • Klicken Sie oben in Ihrem Ansichtsfenster auf Zulassen, damit DevTools Lese- und Schreibzugriff auf das Verzeichnis erhält.
  • Nehmen Sie die Änderungen.“
  • +0

    Mit der Veröffentlichung von Chrome 65 sollte dies die neue akzeptierte Antwort sein. (Funktionalität war bereits in Chrome Canary verfügbar) – Micros

    Verwandte Themen