jdb可视化调试_数据可视化调试器

jdb可视化调试

VS代码扩展(VS CODE EXTENSION)

Visualizing data structure modifications utilizing the debugging view provides a very precise picture of exactly what happens with each operation. This article covers the visual debugger through an exploration of the following examples:

利用调试视图可视化数据结构修改，可以非常精确地了解每个操作的实际情况。 本文通过以下示例介绍了可视化调试器：

• Line Graph plotting — Typescript
  线图绘图—打字稿
• Linked List plotting — C# Console Application
  链接列表绘图— C＃控制台应用程序

在开始之前，让我们看一下如何访问Visual Debugger。(Before starting, let’s look at how to access Visual Debugger)

First, get the following extension from the marketplace and install it into Visual Studio Code:

首先，从市场上获得以下扩展并将其安装到Visual Studio Code中：

• Run any code in debug mode
  在调试模式下运行任何代码
• Press “Ctrl + Shift + P” to open command palette
  按“ Ctrl + Shift + P”打开命令面板
• Search for Debug Visualizer
  搜索调试可视化器

使用打字稿可视化线图(Visualize Line Graph with Typescript)

• Create a folder and basic typescript project configurations. Refer to the GitHub sample attached at the end for more information.
  创建一个文件夹和基本的打字稿项目配置。 有关更多信息，请参阅末尾附带的GitHub示例。
• Please install the below package using the following NPM command:
  请使用以下NPM命令安装以下软件包：

npm install --save @hediet/debug-visualizer-data-extraction

Imagine the following visualization on the variable value change:

想象一下关于变量值更改的以下可视化：

让我们写一些代码。 (Let’s write some code.)

We will plot four different types of line graphs using Typescript.

我们将使用Typescript绘制四种不同类型的折线图。

Please note: For typescript launch settings, “Node.js debugger” is used. To test, simply open the file that needs to be debugged. Remember to add a “debugger;” statement to begin debugging.

请注意：对于打字稿启动设置，使用“ Node.js调试器”。 要进行测试，只需打开需要调试的文件。 记住要添加一个“调试器”； 语句开始调试。

单值绘图 (Single value plotting)

• Positive Line graph, i.e., the variable value plotted always increases.

  正线图，即绘制的变量值始终增加。

• Negative Line graph, i.e., the variable value plotted always decreases.

  负线图，即绘制的变量值始终减小。

• Plot a mix of positive & negative values in the line graph.
  在折线图中绘制正负混合值。

多值绘图 (Multiple value plotting)

• Adding more than one value into the line graph at the same time.
  同时在折线图中添加多个值。

正线图 (Positive Line Graph)

The following code example adds a random value into the array of numbers. To better visualize this, the random value is multiplied by two.

下面的代码示例将一个随机值添加到数字数组中。 为了更好地可视化，将随机值乘以2。

const data = new Array<number>();
let currentValue = 0;
debugger;
for (let j = 0; j < 100; j++) {
    VisualizeIncLineGraph();
}//Single Values
function VisualizeIncLineGraph() {
    const delta = Math.random() * 2;
    data.push(currentValue);
    currentValue += delta;
}

Open the “Debug Visualizer” and watch on a “data” variable inside the debug visualizer input. Please look at the following instructions to get an understanding of how to visualize this.

打开“调试可视化器”，并在调试可视化器输入中观察“数据”变量。 请查看以下说明，以了解如何可视化它。

负线图 (Negative Line Graph)

The code example below adds a “random negative value” into the array of numbers. To better visualize this, the random value is multiplied by two.

下面的代码示例将“随机负值”添加到数字数组中。 为了更好地可视化，将随机值乘以2。

function VisualizeDecLineGraph() {
    const delta = -Math.random() * 2;
    data.push(currentValue);
    currentValue += delta;
}

正负混合绘制 (Plotting mix of positive and negative values)

The following code example adds “random values” into the array of numbers. To better visualize this, conditionally check the random value to mix both positive and negative values.

以下代码示例将“随机值”添加到数字数组中。 为了更好地可视化，有条件地检查随机值以混合正值和负值。

function visualizeMix() {
    var delta = Math.random();
    delta = (delta < 0.5) ? 1 : -1;
    data.push(currentValue);
    currentValue += delta;
}

多值绘图 (Multiple Value Plotting)

The trick is to write a nested loop with the “visualizeMix” method.

诀窍是使用“ visualizeMix”方法编写一个嵌套循环。

const data = new Array<number>();
let currentValue = 0;
debugger;
for (let j = 0; j < 100; j++) {
    VisualizeIncLineGraph();
}function AddMultipleValues() {
    for (let j = 0; j < 10; j++) {
        visualizeMix();
    }
}function visualizeMix() {
    var delta = Math.random();
    delta = (delta < 0.5) ? 1 : -1;
    data.push(currentValue);
    currentValue += delta;
}

可视化 (Visualize)

完整的代码(Complete Code)

Please find the complete code below and modify the function call according to the plotting:

请在下面找到完整的代码，并根据绘图修改函数调用：

const data = new Array<number>();
let currentValue = 0;
debugger;
for (let j = 0; j < 100; j++) {
    AddMultipleValues();
}function AddMultipleValues() {
    for (let j = 0; j < 10; j++) {
        visualizeMix();
    }
}//Single Values
function VisualizeIncLineGraph() {
    const delta = Math.random() * 2;
    data.push(currentValue);
    currentValue += delta;
}function VisualizeDecLineGraph() {
    const delta = -Math.random() * 2;
    data.push(currentValue);
    currentValue += delta;
}function visualizeMix() {
    var delta = Math.random();
    delta = (delta < 0.5) ? 1 : -1;
    data.push(currentValue);
    currentValue += delta;
}

使用C＃可视化链接列表 (Visualize Linked List with C#)

Create a simple .Net Core console application using the below command (assuming .Net Core SDK is already installed).

使用以下命令创建一个简单的.Net Core控制台应用程序(假设已安装.Net Core SDK)。

dotnet new console -o <ProjectName>

让我们为单个链表操作(如append)编写一些代码。 (Let’s write some code for single linked list operations like append.)

Corresponding call from the main method to append four nodes into the LinkedList with values 1,2,3 and 4, which can be visualized as such:

来自main方法的相应调用，将四个节点的值分别为1,2,3和4附加到LinkedList中，可以这样可视化：

var list = new LinkedList<int>();list.Append(1);
list.Append(2);
list.Append(3);
list.Append(4);

现在让我们添加可视化功能。 (Now let’s add the visualization function.)

Now with each linked list append operation, a visualizer node will be created and shown below:

现在，通过每个链接列表追加操作，将创建一个可视化器节点，如下所示：

可视化 (Visualize)

Notice that with each append operation, a node is added into the visualizer as well.

请注意，对于每个附加操作，还将节点添加到可视化器中。

结论 (Conclusion)

There you have it, a way to visualize data structures in debug mode! By taking the time to put the above walkthrough into action, you’ll greatly increase your ability to view the details and nuances of each operation. I hope you found this article helpful, please let me know your thoughts in the comments section.

有了它，就可以在调试模式下可视化数据结构！ 通过花时间将上述演练付诸实践，您将大大提高查看每个操作的细节和细微差别的能力。 希望本文对您有所帮助，请在评论部分告诉我您的想法。

资源资源 (Resources)

Github示例(Github Samples)

C# Linked List sample project

C＃链表示例项目

打字稿线图项目(Typescript line graph project)

了解C＃或Kubernetes(Learn about C# or Kubernetes)

翻译自: https://codeburst.io/data-visualization-debugger-5eb3849b1cc1

jdb可视化调试