Zeigen Sie alle änderungen, die über Chrome Entwickler-Tools

Wie zeige ich alle änderungen, die ich gemacht habe mit Chrome Developer tools?

Beispiel:

  1. eine website öffnen.
  2. öffnen Chrome Developer Tool.
  3. ändern style-Attribut eines Tags.
  4. fügen Sie neue Stil auf einige css-Datei.
  5. ändern Sie eine JavaScript-Funktion.

Wie sehen Sie diese änderungen? So etwas wie:

    page.html:56 Change style attribute of foo to bar.
    page.css:21 Lines added: 21,22,23,24.
    page.js:12 Line modified.
InformationsquelleAutor MaciejLisCK | 2014-07-29
  1. 14

    So, lokale änderungen arbeiten, um änderungen an den Dateien, die Sie machen, aber Sie helfen nicht, wenn Sie fügen Sie inline-Stile, oder ändern Sie Ihre DOM in keiner Weise.

    Ich mag zu verwenden, eine Methode, wo ich erfassen der DOM vor und nach meinen änderungen.

    copy(document.getElementsByTagName('html')[0].outerHTML)

    Orte, die dem aktuellen Stand der DOM in den copy-buffer.

    Fügen Sie diese in die linke Spalte ein diff-tool wie vimdiff, http://www.mergely.com/ oder Meld.

    Dann beende ich meine änderungen, und führen Sie den copy-Befehl wieder. Ich fügen Sie in der rechten Spalte des diff-tool, dann sehe ich meine änderungen.

    Zeigen Sie alle änderungen, die über Chrome Entwickler-Tools

    Vollen Artikel hier: https://medium.com/@theroccob/get-code-out-of-chrome-devtools-and-into-your-editor-defaf5651b4a

    • oh, ich Schätze, wenn du mich nicht mehr erinnern, es zu tun, bevor, Sie können einfach kopieren(html) und dann die Seite neu laden und kopieren Sie es erneut. Dank
    InformationsquelleAutor RoccoB
  2. 12

    Als der Chrome-65 gibt es eine Registerkarte änderungen!!

    Ja wirklich, es ist erstaunlich 🙂

    https://developers.google.com/web/updates/2018/01/devtools#changes

    • Dies sollte die akzeptierte Antwort heute.
    • funktioniert immer noch nicht bei dom/css-änderungen
    • Sie auch klicken Sie auf die Veränderungen zu öffnen und die Datei ändern! Dann können Sie die änderungen speichern, sehr schön! (Version 72.0.3626.109 (Offizieller Build) (64-bit))
    InformationsquelleAutor CrazyTim
  3. 9

    Möchten Sie vielleicht, um zu versuchen, die Lokale Änderungen feature:

    Den DevTools unterhält auch eine revisions-Historie aller änderungen
    lokale Dateien. Wenn Sie bearbeitet hast eine Skript-oder stylesheet-und gespeicherten änderungen
    mithilfe der Werkzeuge können Sie mit der rechten Maustaste auf einen Dateinamen in den Quellen (oder
    innerhalb der source-Bereich) und wählen Sie "Lokale änderungen", um diese
    Geschichte.

    Zeigen Sie alle änderungen, die über Chrome Entwickler-Tools

    Lokale änderungen werden angezeigt Anzeige:

    • Ein diff der änderungen
    • Die Zeit der änderung an
    • Die domain aus, unter dem eine Datei geändert wurde
    • Danke für die Antwort, aber das ist teilweise Antwort, die ich bewusst war, vor. Als ich modifizieren mehrere Dateien, die ich gerne sehen würde alle Dateien, die änderungen in einer Liste der änderungshistorie.
    • Dies ist auch nicht sehr umfassend, da es nur zeigt, was sich geändert hat, und nicht, wo (außer für die Zeilennummern). Es ist auch eine Zeitleiste, nicht das endgültige ändern - so ändert man einen parameter mehrmals, erscheint es auch mehrmals.
    • Gibt es wirklich keine Möglichkeit zu sehen, eine kombinierte diff, sondern als eine Reihe von einzelnen änderungen?
    • Dies funktioniert, um zu sehen, was sich verändert... aber nicht alle änderungen unbedingt auf dem letzten Stand des Dokumentes. Also, wenn Sie einige änderungen machen, es wird eine Weile dauern, zu finden, den Endzustand der einzelnen Elemente. Es wäre einfacher, wenn alle änderungen, die Sie gerade an hatte, in der inspector-Stylesheet.
    InformationsquelleAutor apaul
Schreibe einen Kommentar