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;
} |
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 };
} |
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;
} |
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 };
} |
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 };
} |
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 ?