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
。
--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等。你可以根据自己的需求和喜好选择合适的工具来提高开发效率,希望本文对你有所帮助!