Finden von Javascript-angewandten Inline-Stilen zum Debuggen von Javascript

8

SZENARIO: Ich übernehme die Verwaltung einer Website, auf der der ehemalige Webentwickler leider viele relevante Funktionen über viele lange JS-Dateien verteilt hat. Es ist schwer für mich herauszufinden, woher ein Inline-CSS-Stil in JS kommt oder welche Funktion diesen Stil direkt auf das Element anwendet.

FRAGE: Gibt es eine Methode zum Reverse-Engineering der Inline-Stile eines Elements, um zu sehen, woher sie kommen?

    
JLF 15.04.2015, 18:26
quelle

1 Antwort

18

Eine Möglichkeit besteht darin, einen DOM-Haltepunkt in den Chrome-Entwicklungstools hinzuzufügen

Damit das funktioniert, müssen Sie den Haltepunkt hinzufügen, bevor der Stil hinzugefügt wird. Das kann schwierig sein, aber Sie können einen Haltepunkt erzwingen, bevor Sie JavaScript laden, indem Sie unmittelbar nach dem betreffenden HTML-Element Folgendes hinzufügen:

%Vor%

Probieren Sie es im folgenden Code

aus
  • Klicken Sie auf die Schaltfläche "Code-Snippet ausführen" unter
  • Offene Dev Tools
  • Klicken Sie mit der rechten Maustaste auf den Absatz
  • Wählen Sie Pause ein ... - & gt; Attributänderungen
  • Klicken Sie auf die Schaltfläche "Rahmenfarbe hinzufügen"
  • Voila, Ihr Debugger stoppt bei dem Code, der den Stil ändert

%Vor% %Vor%
    
Juan Mendes 15.04.2015, 18:29
quelle

Tags und Links

Django: Verwenden von Annotate, Count und Distinct in einem Queryset Subprozess in Python: Dateiname zu lang