linux 可视化调试

科技2022-07-12 123

linux 可视化调试

VS代码扩展 (VS CODE EXTENSION)

可视化数据结构修改以及调试视图，可以非常精确地了解每个操作的实际情况。 (Visualize data structure modifications along with debugging view provides a very precise picture of what’s exactly happens with each operation.)

本文通过以下示例介绍了Visual Debugger： (The article covers Visual Debugger with the following examples:)

Line Graph plotting — Typescript

线图绘图—打字稿 Linked List plotting — C# Console Application

链接列表绘图— C＃控制台应用程序

在开始之前，让我们了解如何访问Visual Debugger。 (Before starting, let’s understand how to access Visual Debugger.)

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 GitHub sample attached at the end for more information.

创建一个文件夹和基本的打字稿项目配置。有关更多信息，请参阅末尾随附的GitHub示例。 Please install the below package using the NPM command.

请使用NPM命令安装以下软件包。 npm install --save @hediet/debug-visualizer-data-extraction

Imagine below visualization on the variable value change

想象一下下面的可视化变量值更改

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

Plotting of four different types of line graphs covered using Typescript.

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

NOTE: For typescript launch settings, “node.js debugger” is used, and to test, please open the file that needs to be debugged. Remember to add “debugger;” statement to begin debugging.

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

单值绘图 (Single value plotting)

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

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

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

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

Plotting 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 below code example adds random value into the array of numbers. To better visualize, 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 Valuesfunction 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 find below live instructions on how to visualize.

打开“ Debug Visualizer”，并在“ Debug Visualizer”输入中监视“ data”变量。请在下面的实时说明中找到如何进行可视化的说明。

负线图 (Negative Line Graph)

The below code example adds “random negative value” into the array of numbers. To better visualize, 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 below code example adds “random values” into the array of numbers. To better visualize, conditionally checked the random value to mix both positive & 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”方法编写一个嵌套循环。

可视化 (Visualize)

完整的代码 (Complete Code)

Please find below the complete code; modify the function call according to the plotting.

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

使用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.

来自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 with each append operation, a node is added into the visualizer as well.

请注意，每个附加操作都会在可视化工具中添加一个节点。

Github示例 (Github Samples)

C# Linked List sample project

C＃链表示例项目

Typescript line graph project

打字稿线图项目

Will be sharing more visualization soon. Thank you for reading. I hope you like the article..!!

即将分享更多的可视化效果。感谢您的阅读。我希望你喜欢这篇文章。

翻译自: https://medium.com/@singhsukhpinder/data-visualization-debugger-5eb3849b1cc1

linux 可视化调试