2017-05-12 4 views
2

Ich arbeite an einem WYSIWIG-Animationseditor zum Entwerfen von Slidern/Werbebannern, der viele Abhängigkeiten enthält, was auch viel zusätzlichen aufgeblähten Code bedeutet, der nie benutzt wird. Ich hoffe, einen Bericht über den Code zu erstellen, der mir hilft, die wichtigen Dinge zu identifizieren. Ich habe ein paar kühlen beginnt, die für alle Funktionen durch Javascript suchen und jede Funktion von Teilen zurück: https://regex101.com/r/sXrHLI/1Alle verwendeten Javascript-Funktionen melden

Dann einige PHP, die sie nach ihrer Größe sortiert werden: Sort preg_match_all by named group size

Der Gedanke ist, dass durch die Identifizierung großer Funktionen, die nicht verwendet werden, können wir entfernen. Mein nächster Schritt besteht darin, den Funktionsbaum zu identifizieren, welche Funktionen beim Laden von Dokumenten aufgerufen werden und welche dann bei Aktionen wie Klicks/Mouseovers usw. geladen und aufgerufen werden.

Während ich diese praktische Funktion haben, die mir alle Funktionen geladen im DOM sagt, ist es nicht genug:

var functionArray; 
$(document).ready(function(){ 
    var objs = []; 
    for (var obj in window){ 
     if(window.hasOwnProperty(obj) && typeof window[obj] === 'function') objs.push(obj); 
    }; 
    console.log(obj)); 
}); 

ich nach einer Lösung suchen, die ich Skript in PHP/Shell verwenden können, um Seitenladevorgang emulieren - hier versagt mir mein Wissen über Terminologie, suche ich nach "Call Stack", brauche ich eine Timeline, Interpreter, Framework, Engine oder einen Parser?

Ich brauche als nächstes einen Klick/Hover-Ereignis auf alle Elemente zu emulieren, oder alle Elemente, die wie dieser Regex etwas entsprechen:

(?|\$\(['"](\.\w*)["']|getElementsByClassName\('(\w*)'\)) 
(?|\$\(['"](\#\w*)["']|getElementsById\('(\w*)'\)) 

alle Ereignisse zu finden, die Funktionen auslösen, so kann ich eine Master-Liste machen Funktionen, die im endgültigen Code enthalten sein müssen.

+0

Ist dies für eine Bibliothek, die Sie erstellen oder ist Ihr Schlüssel Anwendungsfall, nur um die Funktionen zu nutzen? Sie könnten immer etwas Profiling in so etwas wie den Dev-Tools von Chrome machen, um Stack-Traces und Timelines darüber zu erhalten, welcher Code im letzteren Anwendungsfall ausgeführt wird. Wenn der ehemalige, mehr Macht für Sie! Ich konnte das in der Entwicklungsgemeinschaft als vorteilhaft ansehen, nichts kommt mir sofort in den Sinn. Vladimirs Antwort würde Ihnen sicherlich helfen, Ihr Ziel zu erreichen. –

+0

Es wird wahrscheinlich Open Source als eine Möglichkeit, Ihre gesamte Codebasis einschließlich Änderungen an den PHP, HTML, CSS und JS-Dateien zu minimieren, wenn ich ein wenig weiter bin. – Alan

Antwort

1

Ich würde Ihnen vorschlagen, einen Blick auf dieses Tool zu nehmen: Istanbul

Mit ihm können Sie wie folgt vorgehen:

  1. einer instrumentierten Version des Codes erstellen
  2. es auf bereitstellen der Server und führen Sie den manuellen Test (Coverage Informationen werden in einer der globalen Variablen im Browser gesammelt)
  3. Coverage-Informationen in eine Datei kopieren (es ist ein LCOV-Daten, soweit ich mich erinnere)
  4. erzeugen Code-Coverage-Bericht mit ihm

Wenn Sie weiter gehen Lust haben, können Sie tatsächlich so etwas wie jvm-Gurke mit Selen verwenden, um UI-Tests zu automatisieren. Sie müssen jedoch jedes Mal, wenn Sie die Seite neu laden, die Coverage-Daten ablegen. Dann müssen Sie die Abdeckung aus verschiedenen Durchläufen kombinieren und diese kombinierten LCOV-Daten verwenden, um den Gesamtbericht zu generieren.

Der ganze Prozess ist ein bisschen schwer, aber es ist viel besser als anfangen, es neu zu erfinden.

Noch mehr, Sie können diese Daten mit Unit-Test-Coverage-Informationen kombinieren, um gemeinsame Berichte zu erstellen.

Als weiteren Schritt sollten Sie den Server sonar einrichten, sodass Sie mehrere Versionen der Abdeckungsberichte speichern und die Unterschiede zwischen den Tests vergleichen können.

+0

Danke, Istanbul sieht so aus, als wäre es gemacht, um Node.js-Sites zu testen, aber meins ist eine Laravel-Seite, die viel Javascript verwendet, kann es noch benutzt werden? Ich schaue auf Gurke, wie Sie auch vorgeschlagen haben. – Alan

+0

Es instrumentiert Ihren JavaScript-Code, indem Sie Ihren Code durch etwas ersetzen, das die gleiche Funktionalität hat, aber Code Coverage-Metriken auf dem Weg produziert. Theoretisch sollte es mit allem lohnen. Zumindest für meine eckigen Anwendungen funktioniert es perfekt. Versuch es. –

1

Ich habe gerade ein Gespräch von einem Google Developer verfolgt und dachte an Ihren Beitrag.Der folgende Link hat more intel on Dev Tools Coverage Profiler, aber das folgende ist das hohe Niveau.

Mit Google Dev Tools können Sie Berichte über den verwendeten und nicht verwendeten JS- und CSS-Code generieren. Dies ist genau das, was Sie suchen (nur ein etwas anderes Medium - das wäre es) ein bisschen schwieriger zu automatisieren, aber es enthält ansonsten, glaube ich, genau das, was Sie gesucht haben).

Öffnen Sie Dev Tools und öffnen Sie dann die Ellipse in der unteren linken Ecke (siehe Bild) und klicken Sie dann auf die Aufnahme-Schaltfläche [siehe Bild 1]. Gehen Sie die Schritte durch, die Sie erfassen möchten. Ellipse - Sie werden einen interaktiven Bildschirm zu dem bekommen Sie durch den gesamten Code gehen und sehen, was verwendet wurde (grün) und was nicht (rot) verwendet

selecting coverage

Bild 1 [Bild 2 sehen] Senkung Coverage Tool

interactive report

Bild 2 zu erhalten - für diese Stackoverflow Seite Voll Screenshot des interaktiven Berichts während dieses Beitrag bearbeiten.

+0

Danke, dass du so viel später an mich denkst, ich kann es kaum erwarten, das auszuprobieren. – Alan

Verwandte Themen