Vous êtes nouveau sur Developpez.com ? Créez votre compte ou connectez-vous afin de pouvoir participer !

Vous devez avoir un compte Developpez.com et être connecté pour pouvoir participer aux discussions.

Vous n'avez pas encore de compte Developpez.com ? Créez-en un en quelques instants, c'est entièrement gratuit !

Si vous disposez déjà d'un compte et qu'il est bien activé, connectez-vous à l'aide du formulaire ci-dessous.

Identifiez-vous
Identifiant
Mot de passe
Mot de passe oublié ?
Créer un compte

L'inscription est gratuite et ne vous prendra que quelques instants !

Je m'inscris !

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 , par Stéphane le calme

413PARTAGES

9  0 
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 : Sélectionner tout
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 : Sélectionner tout
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 : Sélectionner tout
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 : Sélectionner tout
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 : Sélectionner tout
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 : Sélectionner tout
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 : Sélectionner tout
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 : Sélectionner tout
1
2
3
interface DotGraph extends Text {
	kind: { text: true; dotGraph: true };
}
Source : Debug Visualizer

Et vous ?

Que pensez-vous de cette extension ? Pratique ou fantaisiste ?
Quelle vue a votre préférence ?
Allez-vous l'essayer ?
Si vous l'avez fait, pouvez-vous faire un petit retour ?

Une erreur dans cette actualité ? Signalez-le nous !