VS Code 调试 js 的精彩玩法：Quokka.js 插件与 Debugger for Chrome 的完美结合

2023-10-29 00:24:05

VS Code 调试 JavaScript 代码的两种方法

作为一名 JavaScript 开发者，在日常开发中难免会遇到各种各样的代码问题。为了快速找到并解决这些问题，使用调试工具进行代码调试是必不可少的。在 VS Code 中，有两种常用的 JavaScript 调试方法：

1. Quokka.js 插件

Quokka.js 是一款功能强大的 JavaScript 调试插件，它可以帮助你轻松地在 VS Code 中对 JavaScript 代码进行实时调试。Quokka.js 的主要特点如下：

实时调试 ：Quokka.js 可以让你在代码保存时立即看到调试结果，而无需手动启动调试器。这使得调试过程更加高效和直观。
代码覆盖率 ：Quokka.js 可以显示代码覆盖率，帮助你了解哪些代码已经执行，哪些代码尚未执行。这有助于你更好地了解代码的执行情况，发现可能存在的问题。
代码提示 ：Quokka.js 提供了代码提示和自动补全功能，帮助你更快地编写代码，并减少出错的可能性。

除了使用 Quokka.js 插件，你还可以使用 Debugger for Chrome 与 Live Server 的组合来对 JavaScript 代码进行调试。这种方法可以让你在浏览器中调试代码，并实时查看调试结果。

Debugger for Chrome ：Debugger for Chrome 是一个内置于 Chrome 浏览器的调试工具，它可以让你在浏览器中对 JavaScript 代码进行调试。Debugger for Chrome 的主要特点如下：
断点调试 ：Debugger for Chrome 允许你在代码中设置断点，当代码执行到断点时，调试器会暂停执行，让你可以检查变量的值和调用堆栈。
变量检查 ：Debugger for Chrome 可以让你检查变量的值，包括本地变量、全局变量和对象属性。
调用堆栈检查 ：Debugger for Chrome 可以让你检查调用堆栈，了解当前正在执行的函数以及它们之间的调用关系。
Live Server ：Live Server 是一个 VS Code 插件，它可以让你在 VS Code 中轻松地启动和管理本地开发服务器。Live Server 的主要特点如下：
自动刷新 ：Live Server 会自动刷新浏览器中的页面，当你在代码中做出更改时。这使得你可以快速地看到更改的效果，而无需手动刷新页面。
热重载 ：Live Server 支持热重载，当你在代码中做出更改并保存后，浏览器中的页面会自动重新加载。这使得你可以快速地测试代码更改，并发现可能存在的问题。