Was ist In-situ-Visualisierung?

Programmierer müssen während des Softwareentwicklungsprozesses Code schreiben, testen, debuggen und überprüfen. Um die Korrektheit des Codes sicherzustellen, müssen Programmierer den Code mit dem Laufzeitstatus des Programms kombinieren. (Empfohlenes Lernen: Web-Frontend-Video-Tutorial)

Aber vorhandene Technologien, einschließlich Debugging-Protokolle, Festlegen von Haltepunkten usw., befinden sich in anderen Ansichten als der Code, und Programmierer debuggen sie Programm Es ist notwendig, häufig die Sichtlinie zu wechseln, was eine große Belastung für Programmierer darstellt und ihre Debugging-Effizienz verringert. In diesem Artikel wird die Technologie vorgeschlagen, mit der Visualisierung direkt in den Quellcode eingefügt wird, um Programmierern das Verständnis des Programms zu erleichtern.

Diese Arbeit wird hauptsächlich durch verwandte Arbeiten in zwei Bereichen vorangetrieben: Programmvisualisierung und Debugging sowie Text- und Umgebungsverbesserung.

Zur Programmvisualisierung und zum Debuggen visualisiert das Python-Online-Lehrsystem Variablen, Objekte und Stack-Frame-Strukturen, während das Python-Programm ausgeführt wird. Benutzer können den Status ihrer Programme während der Ausführung überprüfen. In Bezug auf die Verbesserung von Text und Umgebung untersucht Pascal Goffin verschiedene in Text eingebettete Grafiken in Wortgröße.

Das folgende Bild ist die spezifische visuelle Gestaltung dieser Arbeit:

Diese Arbeit basiert auf den Details. Insgesamt 10 visuelle Symbole werden basierend auf verschiedenen Ebenen (spezifische Daten/ob sich Daten ändern), Datenvariablentypen (Werte/Sätze) und zeitlichen Ebenen (Momentaufnahmen/Zeitreihen) entworfen.

Benutzer können beispielsweise Änderungen der Werte im Laufe der Zeit anhand eines Liniendiagramms oder eines Horizontdiagramms beobachten. Wenn die Maus über dem Liniendiagramm schwebt, kann der Benutzer den aktuellen Wert der Variablen sehen. Mithilfe des Flächendiagramms können Benutzer auch die Zunahme, Abnahme und Veränderung von Elementen in der Sammlung im Laufe der Zeit beobachten.

Wie im Bild oben gezeigt, berücksichtigt diese Arbeit auch die Vor- und Nachteile verschiedener Platzierungsorte.

Wenn Sie beispielsweise den Code direkt links und rechts von den Zeilen 1 und 2 platzieren, hat dies keinen Einfluss auf die Länge dieser Codezeile wirkt sich auf die Länge dieser Codezeile aus, nimmt jedoch eine zusätzliche Zeile ein und erhöht dadurch die Gesamtlänge des Codes.

Die Zeilen 5 bis 8 werden angezeigt, wenn Sie mit der Maus darüber fahren Die visuellen Symbole haben keinen Einfluss auf die Codelänge und erfordern eine variable Länge. Die Zeilen 9 bis 12 werden am Anfang und am Ende der Zeile platziert. Dies scheint jedoch keine große Auswirkung zu haben kommen gut mit Situationen zurecht, in denen viele Daten in einer Zeile visualisiert werden müssen. Alles in allem hat jede der oben genannten Methoden ihre Vor- und Nachteile.

In der Fallanalyse verwendet diese Arbeit D3.js, um die Erweiterung des Vega-Spracheditors zu implementieren. Zuerst wird die Monaco-API [4] verwendet, um Token aus dem Vega-Sprachcode zu extrahieren, und dann werden fünf visuelle Symbole für numerische Variablen und Set-Variablen implementiert, die unmittelbar rechts von den Variablen platziert werden.

Der Autor rekrutierte 18 Vega-Anfänger zum Testen. Jeder Tester las nacheinander den ursprünglichen Vega-Code und den visualisierten Vega-Code (Wahrscheinlichkeitsausgleich) und beantwortete dann Fragen zum Code.

Statistik zufolge erzielten Tester im Allgemeinen bessere Ergebnisse beim Lesen von visuellem Code und die Tester waren der Meinung, dass dieses visuelle Design „hilfreich, erklärend und das Lesen weniger störend“ sei.

Im Allgemeinen schlägt diese Arbeit eine Methode zur Verbesserung des Codes durch In-situ-Visualisierung vor, um Benutzern zu helfen, den Status des Programms zu verstehen, wenn es ausgeführt wird, und das Design wird im Vega-Spracheditor implementiert.

Das obige ist der detaillierte Inhalt vonWas ist In-situ-Visualisierung?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!