console.log() 的作用与 VSCode 实现技巧

console.log() 的主要功能是什么

它主要用于辅助 JavaScript 代码的调试过程。

通过它，开发者可以查看在页面运行过程中输出的具体内容。

与 alert 相比，console.log 具有以下显著优点：

第一，它能够结构化地展示数据。如果使用 alert 输出对象，结果通常显示为 [object object]，而 console 可以直接展示对象的详细属性内容。

第二，console 不会阻塞页面操作。使用 alert 弹出内容时，页面交互会暂停（即“页面死了”），但使用 console 输出后，页面仍可正常响应用户操作。

第三，console 内置的功能非常丰富。如果在控制台直接输入 console 并回车，即可查看其包含的所有方法。

Console {memory: MemoryInfo, debug: function, error: function, info: function, log: function…}

实现方式

不同于 WebStorm 等 IDE 内置了 .log 快捷方法，VSCode 需要通过配置代码段来实现类似的高效输入体验。

在 VSCode 中，我们可以通过设置用户代码段来达成这一目标。

第一种配置方法

具体操作步骤如下：

1. 进入设置页面：依次点击“文件”>“首选项”>“用户代码片段”，然后选择对应的语言配置文件（如 JavaScript.json）。

2. 系统默认提供了 console.log 的代码段示例，只需去除注释即可直接使用。当然，你也可以删除注释内容（注释部分为 snippet 的格式说明，下文有解释）。

参考注释1：

• prefix：此参数是使用代码段的快捷入口，例如这里设置为 log，在输入 log 时会触发智能感知。
• body：这是代码段的主体部分，需要设置的代码放在这里。字符串间换行需使用 \r\n 换行符隔开。注意如果值里包含特殊字符需要进行转义。
• $1：此参数表示光标的初始位置。
• $2：使用此参数后，光标的下一位置将会另起一行，按 tab 键可进行快速切换。
• description：代码段描述，在使用智能感知时显示的描述信息。

第二种全局变量配置

1. 进入设置页面：依次点击“文件”>“首选项”>“用户代码片段”，选择“新建全局变量”。

配置示例如下：

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持本站。