Qu'est-ce que la visualisation in situ

Les programmeurs doivent écrire, tester, déboguer et réviser le code pendant le processus de développement logiciel. Pour garantir l'exactitude du code, les programmeurs doivent combiner le code avec l'état d'exécution du programme. (Apprentissage recommandé : Tutoriel vidéo Web front-end)

Mais les technologies existantes, y compris les journaux de débogage, la définition de points d'arrêt, etc., sont dans des vues différentes de celles du code, et les programmeurs déboguent le programme. Il est nécessaire de changer fréquemment de ligne de mire, ce qui impose une lourde charge aux programmeurs et réduit leur efficacité de débogage. Cet article propose la technologie consistant à insérer la visualisation directement dans le code source pour aider les programmeurs à comprendre le programme.

Ce travail est principalement motivé par deux travaux liés : la visualisation et le débogage du programme, et l'amélioration du texte et de l'environnement.

Pour la visualisation et le débogage du programme, le système de tutorat en ligne Python visualise les variables, les objets et les structures de cadre de pile pendant l'exécution du programme Python. Les utilisateurs peuvent vérifier l'état de leurs programmes pendant leur exécution. Concernant le texte et la valorisation de l'environnement, Pascal Goffin explore différents graphiques de la taille d'un mot intégrés dans le texte.

L'image suivante est la conception visuelle spécifique de cette œuvre :

Cette œuvre est basé sur les détails. Un total de 10 symboles visuels sont conçus en fonction de différents niveaux (données spécifiques/si les données changent), types de variables de données (valeurs/ensembles) et niveaux temporels (instantanés/séries chronologiques).

Par exemple, les utilisateurs peuvent observer les changements de valeurs au fil du temps via un graphique linéaire ou un graphique d'horizon. Lorsque la souris survole le graphique linéaire, l'utilisateur peut voir la valeur actuelle de la variable. Les utilisateurs peuvent également observer l'augmentation, la diminution et la modification des éléments de la collection au fil du temps grâce au graphique en aires.

Comme le montre l'image ci-dessus, ce travail considère également les avantages et les inconvénients des différents lieux de placement.

Par exemple, placer le code immédiatement à gauche et à droite des lignes 1 et 2 n'affectera pas la longueur de cette ligne de code ; le placer au-dessus et en dessous du code dans les lignes 3 et 4 n'affectera pas la longueur de cette ligne de code ; affectera la longueur de cette ligne de code, mais cela prendra une ligne d'espace supplémentaire, augmentant ainsi la longueur totale du code ;

les lignes 5 à 8 sont affichées en survolant la souris, bien que ce soit le cas. n'affecte pas la longueur du code, les symboles visuels couvriront une partie du code et nécessiteront que les symboles soient de longueur variable ; les lignes 9 à 12 soient placées au début et à la fin de la ligne. Bien que cela semble avoir peu d'impact, cela ne peut pas y faire face. bien avec les situations où beaucoup de données doivent être visualisées sur une seule ligne. Dans l’ensemble, chacune des méthodes mentionnées ci-dessus a ses avantages et ses inconvénients.

Dans l'analyse de cas, ce travail utilise D3.js pour implémenter l'amélioration de l'éditeur de langage Vega. Tout d'abord, l'API Monaco [4] est utilisée pour extraire des jetons du code du langage Vega, puis cinq symboles visuels sont implémentés pour les variables numériques et les variables définies, qui sont placées immédiatement à droite des variables.

L'auteur a recruté 18 débutants Vega pour les tests. Chaque testeur a lu successivement le code Vega original et le code Vega visualisé (probabilité équilibrée), puis a répondu aux questions sur le code.

Selon les statistiques, les testeurs ont généralement obtenu des résultats plus élevés lors de la lecture du code visuel, et les testeurs ont estimé que cette conception visuelle était « utile, explicative et moins perturbatrice pour la lecture ».

En général, ce travail propose une méthode d'amélioration du code grâce à la visualisation in situ pour aider les utilisateurs à comprendre l'état du programme lorsqu'il est en cours d'exécution, et la conception est implémentée sur l'éditeur de langage Vega.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!