VSCode 怎样用调试变量格式化功能清晰展示复杂数据 VSCode 变量格式化展示复杂数据的创新技巧-VSCode-PHP中文网

可以通过配置 debug.javascript.formatters 实现自定义变量格式化，提升调试时复杂数据结构的可读性；2. 在 settings.json 中添加 formatter 规则，指定 label、type 和 scriptpath，指向自定义的格式化脚本文件；3. 在 scriptpath 指定的文件中编写 format 函数，根据 value 类型返回格式化字符串，若不匹配则返回 null 以启用默认格式化；4. 为避免循环引用导致的无限递归，可在格式化函数中使用 weakset 记录已访问对象，发现循环时返回 “[circular reference]”；5. 可定义多个 formatter 分别处理不同类或类型的对象，如 user 和 product，通过 instanceof 判断类型并返回对应格式化结果；6. 利用 vs code 调试表达式功能，可在“监视”或“表达式”面板中直接输入 javascript 表达式实现动态格式化，如 date.tolocaledatestring() 或 obj.name；7. 异步数据如 promise 无法在同步 formatter 中直接处理，可返回占位符并在调试控制台手动展开，或通过代理对象等复杂方式实现延迟加载。完整解决方案支持灵活、安全地自定义调试变量显示格式。

VSCode 怎样用调试变量格式化功能清晰展示复杂数据 VSCode 变量格式化展示复杂数据的创新技巧

VSCode 通过自定义变量格式化，可以更清晰地展示复杂数据结构，方便调试。核心在于配置

debug.javascript.formatters

登录后复制

或类似选项，并编写对应的格式化函数。

解决方案：

利用 VS Code 的

debug.javascript.formatters

登录后复制

选项，可以自定义变量的显示方式，尤其是在调试 JavaScript 或 TypeScript 代码时，对于复杂的数据结构（比如嵌套的对象、数组），默认的显示方式可能不够直观。我们可以编写 JavaScript 函数，将这些复杂数据转换成更易于理解的格式。

具体步骤如下：

找到 VS Code 的设置文件： 打开 VS Code，点击 "文件" -> "首选项" -> "设置"。在设置页面，搜索 "debug.javascript.formatters"。
配置 formatters： 点击 "在 settings.json 中编辑" 链接，打开
```
settings.json
```
登录后复制
文件。在这个文件中，添加或修改
```
debug.javascript.formatters
```
登录后复制
选项。这个选项是一个数组，每个元素定义一个格式化规则。
```
{
    "debug.javascript.formatters": [
        {
            "label": "Formatted Object",
            "type": "javascript",
            "scriptPath": "${workspaceFolder}/.vscode/formatters.js"
        }
    ]
}
```
登录后复制
- ```
label
```
  登录后复制
  ：格式化器的名称，在调试时会显示。
- ```
type
```
  登录后复制
  ：指定格式化器的类型，这里是 "javascript"。
- ```
scriptPath
```
  登录后复制
  ：指定包含格式化函数的 JavaScript 文件的路径。

创建格式化函数文件： 在你的项目根目录下（或者你喜欢的任何位置），创建一个名为

.vscode/formatters.js

登录后复制

的文件（根据你在

settings.json

登录后复制

中指定的路径）。在这个文件中，编写你的格式化函数。

// .vscode/formatters.js
(function () {
    return {
        format: function (value) {
            if (typeof value === 'object' && value !== null && value.hasOwnProperty('veryComplexData')) {
                // 假设 value 是一个包含 'veryComplexData' 属性的对象
                const complexData = value.veryComplexData;
                if (Array.isArray(complexData)) {
                    // 如果 veryComplexData 是一个数组，我们可以只显示数组的前几个元素
                    return `Array[${complexData.length}]: ${complexData.slice(0, 3).join(', ')}...`;
                } else if (typeof complexData === 'object') {
                    // 如果 veryComplexData 是一个对象，我们可以只显示对象的几个关键属性
                    return `Object: { id: ${complexData.id}, name: ${complexData.name}, ... }`;
                } else {
                    return `Complex Data: ${complexData}`;
                }
            }
            return null; // 如果不匹配，返回 null，让 VS Code 使用默认的格式化方式
        }
    };
})();

登录后复制

这个例子中，我们定义了一个

format

登录后复制

函数。这个函数接受一个

value

登录后复制

参数，它就是你要格式化的变量。如果

value

登录后复制

是一个包含

veryComplexData

登录后复制

属性的对象，我们就根据

veryComplexData

登录后复制

的类型，返回一个格式化后的字符串。如果不匹配，返回

null

登录后复制

，表示这个格式化器不适用，VS Code 会尝试使用其他的格式化器或默认的格式化方式。

调试你的代码： 现在，当你调试你的代码时，如果遇到包含
```
veryComplexData
```
登录后复制
属性的对象，VS Code 就会使用你定义的格式化函数来显示这个变量。
更高级的用法： 你可以定义多个格式化器，每个格式化器处理不同类型的变量。你也可以使用 VS Code 提供的其他 API，比如
```
vscode.DebugAdapterTracker
```
登录后复制
，来更精细地控制调试过程。

如何处理循环引用导致的格式化错误？

在处理复杂对象时，循环引用是常见的问题。如果不加以处理，格式化函数可能会进入无限循环，导致 VS Code 崩溃或无响应。

为了解决这个问题，你可以在格式化函数中维护一个已访问对象的集合。每次访问一个对象时，先检查它是否已经在集合中。如果在，就返回一个简单的字符串，表示这是一个循环引用，避免再次进入这个对象。

(function () {
    const visitedObjects = new WeakSet(); // 使用 WeakSet，防止内存泄漏

    return {
        format: function (value) {
            if (typeof value === 'object' && value !== null) {
                if (visitedObjects.has(value)) {
                    return '[Circular Reference]';
                }
                visitedObjects.add(value);

                // 格式化对象的逻辑
                let formattedString = '';
                for (const key in value) {
                    if (value.hasOwnProperty(key)) {
                        formattedString += `${key}: ${this.format(value[key])}, `; // 递归调用 format
                    }
                }
                visitedObjects.delete(value); // 移除，允许在其他上下文再次格式化

                return `{ ${formattedString.slice(0, -2)} }`; // 移除最后的逗号和空格
            } else {
                return value; // 非对象类型直接返回
            }
        }
    };
})();

登录后复制

在这个例子中，我们使用了

WeakSet

登录后复制

来存储已访问的对象。

WeakSet

登录后复制

的一个优点是，当对象不再被引用时，会自动从

WeakSet

登录后复制

中移除，防止内存泄漏。在格式化对象之前，我们先检查它是否已经在

visitedObjects

登录后复制

中。如果在，就返回

[Circular Reference]

登录后复制

。否则，将它添加到

visitedObjects

登录后复制

中，然后格式化它的属性。在格式化完成后，从

visitedObjects

登录后复制

中移除它，允许在其他上下文再次格式化这个对象。

如何为不同类型的对象应用不同的格式化规则？

一个通用的格式化函数可能无法很好地处理所有类型的对象。为了更好地展示不同类型的对象，可以定义多个格式化器，每个格式化器处理特定类型的对象。

例如，假设你有一个

User

登录后复制

类和一个

Product

登录后复制

类，你希望以不同的方式显示它们。你可以创建两个格式化器，一个用于

User

登录后复制

对象，一个用于

Product

登录后复制

对象。

NovelAI

AI 辅助写作、讲故事，基于你自己的作品创造出类似人类的写作。

236

查看详情

{
    "debug.javascript.formatters": [
        {
            "label": "Formatted User",
            "type": "javascript",
            "scriptPath": "${workspaceFolder}/.vscode/user_formatter.js"
        },
        {
            "label": "Formatted Product",
            "type": "javascript",
            "scriptPath": "${workspaceFolder}/.vscode/product_formatter.js"
        }
    ]
}

登录后复制

然后，分别创建

user_formatter.js

登录后复制

和

product_formatter.js

登录后复制

文件，编写对应的格式化函数。

user_formatter.js

登录后复制

// .vscode/user_formatter.js
(function () {
    return {
        format: function (value) {
            if (value instanceof User) { // 假设存在 User 类
                return `User: { id: ${value.id}, name: ${value.name} }`;
            }
            return null;
        }
    };
})();

登录后复制

product_formatter.js

登录后复制

// .vscode/product_formatter.js
(function () {
    return {
        format: function (value) {
            if (value instanceof Product) { // 假设存在 Product 类
                return `Product: { id: ${value.id}, price: ${value.price} }`;
            }
            return null;
        }
    };
})();

登录后复制

在这个例子中，每个格式化器只处理特定类型的对象。如果