WebStorm 如何调试 Vue 项目

前言

在日常开发和各种教程中，最常见的 debug 方式就是在代码中插入 console.log 语句，然后在 Chrome 控制台中查看日志。显而易见，插入console.log 的效率不高，那是否有更高效的 debug 方式呢？断点调试允许开发者在代码的特定行暂停执行，实时查看和修改变量的值。但是整个使用过程，我们必须在 Chrome 中打点调试，然后回到 IDE 中对代码进行修改。这个过程相对繁琐，那么我们是否可以直接在本地IDE中去打断点呢？答案是肯定的，因为我本人是 Jetbrains 的忠实粉丝，因此本文将主要介绍如何使用 Webstorm 来进行断点调试。另外，WebStorm 支持多种调试工具，包括浏览器的开发者工具，但本文主要讲解的是使用 WebStorm 自带的调试功能。

一、WebStorm 配置

1.1 准备工作

WebStorm 为 JavaScript 代码提供内置调试器，可用于在 Web 浏览器或 IDE 的内置浏览器中预览和调试应用程序。此服务器始终运行，不需要任何手动配置。首先，要确保在 WebStorm 中启用了 JavaScript Debugger 插件。打开设置，然后选择 Plugins（插件），单击 Installed 选项卡。在搜索字段中，输入 JavaScript Debugger。

注意：仅在 Google Chrome 和其他基于 Chromium 的浏览器中支持 JavaScript 代码的调试。

1.2 修改默认浏览器配置

首先，必须修改需改浏览器默认配置，才能自动打开谷歌浏览器进行调试。另外，绿色箭头所指的选项必须要添加，否则调试时自动打开的页面是about:blank。

bash 复制代码

--remote-allow-origins=* --remote-debugging-port

1.3 配置 JavaScript 调试器

1.3.1 设置服务器调试端口

打开设置，然后选择 Build, Execution, Deployment | Debugger。在 Built-in server （内置服务器）区域中，指定内置 Web 服务器运行的端口。默认情况下，此端口设置为默认 WebStorm 端口 63342，WebStorm 通过该端口接受来自服务的连接。也可以将端口号设置为从 1024 开始的任何其他值，但非必要无需修改它。若非要修改，不要改为8080等影响正常业务的端口。如果启动时指定的这个端口被占用，则会自动将端口号加1再启动。

通过分别清除 Can accept external connections 或 Allow unsigned requests 复选框，禁止从其他计算机或 WebStorm 外部对内置服务器上文件的调用。

1.3.2 选择删除断点的方法

默认情况下，我们可以通过单击鼠标左键来切换断点。若是想要更改此行为，请打开设置并导航到 Build, Execution, Deployment | Debugger 。在 Remove breakpoint 区域中，选择相应的选项。

二、调试本地应用程序

如果应用程序在本地以开发模式运行，则可以从内置的 Run tool 窗口或 Debug tool窗口开始调试，如下图所示。

2.1 配置调试环境

当我们使用本地 Web 服务器或 Web 服务器位于远程主机上时，需要创建 Run/Debug 配置已启动 JavaScript 调试器。为此，请单击 WebStorm 窗口右上角的列表，然后选择 Edit Configurations 。或者，再从主菜单中选择 Run | Edit Configurations ，会自动打开 Edit Configurations 对话框。

在弹出的 Run/Debug Configurations 对话框中，单击工具栏上的 ➕ 号，然后从列表中选择 JavaScript Debug。在配置窗口中，选择"Browser"作为调试类型，并选择要使用的浏览器（如Chrome、Firefox等），指定运行应用程序的 URL 地址，点击"OK"保存配置设置。

选项	说明
Name	为运行配置指定名称，以便在编辑或运行时快速识别它。
Store as project file	使用运行配置设置保存文件，以便与其他团队成员共享。默认情况下，处于禁用状态，运行配置存储在 .idea/workspace.xml 中。
URL	指定引用要调试的应用程序的 URL 地址
Browser	列表中选择将调试应用程序的浏览器
Ensure breakpoints are detected when loading scripts	选中此复选框可确保立即命中页面加载时执行的代码中的断点。请注意，这可能会减慢初始页面加载速度。
Remote URLs of local files	选择所需的本地文件或目录、远程URL 地址
Before launch	指定在启动选定的运行/调试配置之前要执行的任务
Show this page	选中此复选框可在启动 run/debug 之前显示 run/debug configuration 设置
Activate tool window	启动 run/debug 配置时打开 Run 或 Debug tool 窗口。

接下来我们可以开始调试了。从 WebStorm 窗口右上角的列表中选择新创建的配置，然后单击 Debug 按钮。

2.2 项目的启动

使用 WebStorm 打开项目文件夹，然后在项目目录中找到并打开package.json 文件，其通常位于项目根目录中。在 package.json 文件中，找到 scripts 部分，这部分包含了项目的各种命令脚本，包括启动脚本。启动脚本通常命名为 start 或 dev，点击启动脚本前的绿色箭头，然后点击Run 'dev' 启动开发服务器。或者可以通过 npm run dev 或者 npm run serve 运行需要调试的项目，成功运行后，会提示项目访问URL，这个要和前文提到的配置项里面URL保持一致。

2.3 开始调试

在WebStorm中打开你想要调试的Vue文件，可以通过左侧的导航栏找到你的项目文件，或者直接在编辑器中通过文件路径打开。
根据需要在 JavaScript 代码行左侧点击，之后就会看到一个红色的圆圈，这就是断点。当代码执行到这里时，它会暂停，允许你查看和修改变量值、调用栈等信息。
点击WebStorm右上角的绿色虫子图标（或使用快捷键Shift+F9）来启动调试会话。此时，你的浏览器应该会自动打开并加载你的Vue项目。
当你的Vue应用加载到包含断点的代码行时，代码执行会暂停。此时，你可以看到WebStorm的调试视图已经打开，显示了当前的调用栈、变量值等信息。

在调试视图中，你可以执行各种调试操作，如下所示，这些操作可以帮助你更好地理解代码的执行流程。

操作按钮	说明
Rerun	重新运行当前的调试会话，允许在不关闭调试器的情况下重新启动调试会话。
Resume Program	继续运行程序，直到遇到下一个断点或程序结束。
Pause Program	暂停程序的执行，这在查看当前程序执行状态时非常有用。
Step Over	逐行执行当前函数，不进入函数内部。
Step Into	进入当前行中调用的函数。
Step Out	从当前函数返回到调用它的函数。
Restart	重新启动调试会话。
View Breakpoints	查看和管理所有断点。
Mute Breakpoints	静音所有断点。程序将继续运行，不会在任何断点处暂停

如果你在调试过程中修改了变量值或代码，你可以使用"Update Application on Save"功能来实时刷新浏览器中的应用。这个功能可以确保你的修改立即生效，而无需手动刷新页面。
当你完成调试后，可以点击调试视图中的红色停止按钮来结束调试会话。

三、附录

3.1 调试器控制台

交互式 Console 窗格显示堆栈跟踪和代码中记录的所有内容，而且仅会在我们调试应用程序或调试测试时显示，当我们正在运行应用程序或预览 Web 页面时，它不可用。

3.1.1 导航到源代码

在使用 console.* 输出的每一行，WebStorm 都会显示文件的名称和调用它的行，单击此链接跳转到源代码中的调用。

控制台还显示堆栈跟踪，单击报告的问题旁边的链接可跳转到发生此问题的代码行。

3.1.2 过滤消息

Console 选项卡以树状视图显示对象，默认情况下，堆栈跟踪处于折叠状态。Warnings、errors 和 info 消息具有不同的图标和背景颜色，使其更容易被注意到。

3.2 重新加载当前页面

除了通过单击 Debug 工具窗口中的 Rerun 按钮重新启动应用程序外，我们还可以使用 Reload in Browser 操作重新加载当前导航的页面。要重新加载当前页面，请单击工具栏上的 : ，然后选择 Reload in Browser，如下图所示。

总结

关于使用 WebStorm 如何调试 Vue 代码就介绍到这了，相信你已经掌握了使用 WebStorm 调试 Vue 代码的基本方法。WebStorm 作为一款功能强大的IDE，提供了丰富的调试功能和技巧，可以帮助你更高效地开发和调试 Vue 应用。当然，除了 WebStorm 外，还有很多其他的调试工具和技术可以使用，如Chrome DevTools、Visual Studio Code等。你可以根据自己的需求和喜好选择合适的工具来提高开发效率，希望本文对你有所帮助！