5 pièce(s) jointe(s)
Un développeur propose une extension VS Code pour visualiser les structures de données lors du débogage
Un développeur propose Debug Visualizer, une extension VS Code pour visualiser les structures de données lors du débogage
qui fonctionnerait avec tous les langages qui peuvent être débogués dans VS Code
Le développeur a tout de même précisé que son extension fonctionne mieux avec JavaScript/TypeScript. Il a également effectué des tests avec C#, Java et PHP.
Usage
Après avoir installé cette extension, utilisez la commande Open a new Debug Visualizer View pour ouvrir une nouvelle vue du visualiseur. Dans cette vue, vous pouvez saisir une expression qui est évaluée et visualisée tout en parcourant votre application. Vous pouvez actualiser l'évaluation et faire apparaître la vue actuelle du visualiseur dans une nouvelle fenêtre de navigateur en utilisant les boutons en haut à droite. Vous pouvez également déplier le volet d'informations pour sélectionner un extracteur de données et un visualiseur.
Valeurs prises en charge
Les visualiseurs prennent des données JSON spécifiques. L'expression actuellement visualisée doit correspondre à une chaîne d'objet JSON, correspondant au schéma de l'un des visualiseurs pris en charge. Cette chaîne JSON peut être entourée de guillemets simples ou doubles (ou aucun) et ne doit pas être échappée. Un exemple valide est "{ "kind": { "text": true }, "text": "some text\nmore text" }".
Pour certains langages (TypeScript/JavaScript), du code d'exécution est injecté pour prendre en charge les extracteurs de données. Un extracteur de données supprime la nécessité pour la valeur visualisée d'être une chaîne JSON et sert de pont entre les structures de données personnalisées et les données JSON traitées par les visualiseurs. Lorsque plusieurs extracteurs de données sont applicables, un préféré peut être sélectionné dans la vue de visualisation.
Visualiseurs intégrés
Les visualiseurs suivants sont intégrés à cette extension.
Visualisation graphique
Les visualiseurs Graphviz et vis.js affichent des données qui correspondent à l'interface Graph.
Code:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21
| interface Graph {
kind: { graph: true };
nodes: NodeGraphData[];
edges: EdgeGraphData[];
}
interface NodeGraphData {
id: string;
label?: string;
color?: string;
shape?: "ellipse" | "box";
}
interface EdgeGraphData {
from: string;
to: string;
label?: string;
id?: string;
color?: string;
dashes?: boolean;
} |
Le visualiseur graphviz utilise la visionneuse SVG pour rendre le SVG créé par viz.js.
Visualisation Plotly
Le visualiseur Plotly peut visualiser les données JSON correspondant à l'interface suivante*:
Code:
1 2 3 4 5
| export interface Plotly {
kind: { plotly: true };
data: Partial<Plotly.Data>[];
}
// See plotly docs for Plotly.Data. |
Visualisation d'arborescence
Le visualiseur d'arborescence rend les données qui correspondent à l'interface Tree.
Code:
1 2 3 4 5 6 7 8 9 10 11 12 13
| interface Tree<TData = unknown> {
kind: { tree: true };
root: TreeNode<TData>;
}
interface TreeNode<TExtraData> {
id: string | undefined;
name: string;
value: string | undefined;
emphasizedValue: string | undefined;
children: TreeNode<TExtraData>[];
data: TExtraData;
isMarked: boolean;
} |
Visualisation AST
Le visualiseur AST (Abstract Syntax Tree) affiche des données qui correspondent à l'interface Ast.
Code:
1 2 3 4 5 6 7 8
| interface Ast
extends Tree<{
position: number;
length: number;
}>,
Text {
kind: { text: true; tree: true; ast: true };
} |
En plus de l'arborescence, le code source est rendu et lors de la sélection d'un nœud AST, sa portée dans le code source est mise en surbrillance.
Visualisation Grid
Permet de visualiser les données correspondant à l'interface suivante :
Code:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23
| export interface Grid {
kind: { array: true };
columnLabels?: { label?: string }[];
rows: {
label?: string;
columns: {
content?: string;
tag?: string;
color?: string;
}[];
}[];
markers?: {
id: string;
row: number;
column: number;
rows?: number;
columns?: number;
label?: string;
color?: string;
}[];
} |
Visualisation Text
Le visualiseur Text affiche des données qui correspondent à l'interface de Text
Code:
1 2 3 4 5 6
| interface Text {
kind: { text: true };
text: string;
mimeType?: string;
fileName?: string;
} |
Le mimeType et l'extension de fichier de fileName sont utilisés pour la coloration syntaxique.
Visualisation SVG
Le visualiseur SVG rend les données qui correspondent à l'interface Svg. Les données SVG réelles doivent être stockées dans du texte.
Code:
1 2 3
| interface Svg extends Text {
kind: { text: true; svg: true };
} |
Visualisation Dot Graph
Le visualiseur Graphviz Dot restitue des données qui correspondent à l'interface DotGraph.
Code:
1 2 3
| interface DotGraph extends Text {
kind: { text: true; dotGraph: true };
} |
Source : Debug Visualizer
Et vous ?
:fleche: Que pensez-vous de cette extension ? Pratique ou fantaisiste ?
:fleche: Quelle vue a votre préférence ?
:fleche: Allez-vous l'essayer ?
:fleche: Si vous l'avez fait, pouvez-vous faire un petit retour ?