当前位置: 首页 > news >正文

WebStorm 如何调试 Vue 项目

image

前言

  在日常开发和各种教程中,最常见的 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

image

1.3 配置 JavaScript 调试器

1.3.1 设置服务器调试端口

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

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

1.3.2 选择删除断点的方法

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

二、调试本地应用程序

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

2.1 配置调试环境

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

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

选项说明
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 按钮。
image

2.2 项目的启动

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

2.3 开始调试

  1. 在WebStorm中打开你想要调试的Vue文件,可以通过左侧的导航栏找到你的项目文件,或者直接在编辑器中通过文件路径打开。

  2. 根据需要在 JavaScript 代码行左侧点击,之后就会看到一个红色的圆圈,这就是断点。当代码执行到这里时,它会暂停,允许你查看和修改变量值、调用栈等信息。

    image

  3. 点击WebStorm右上角的绿色虫子图标(或使用快捷键Shift+F9)来启动调试会话。此时,你的浏览器应该会自动打开并加载你的Vue项目。

    image

  4. 当你的Vue应用加载到包含断点的代码行时,代码执行会暂停。此时,你可以看到WebStorm的调试视图已经打开,显示了当前的调用栈、变量值等信息。

    image

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

    操作按钮说明
    Rerun重新运行当前的调试会话,允许在不关闭调试器的情况下重新启动调试会话。
    Resume Program继续运行程序,直到遇到下一个断点或程序结束。
    Pause Program暂停程序的执行,这在查看当前程序执行状态时非常有用。
    Step Over逐行执行当前函数,不进入函数内部。
    Step Into进入当前行中调用的函数。
    Step Out从当前函数返回到调用它的函数。
    Restart重新启动调试会话。
    View Breakpoints查看和管理所有断点。
    Mute Breakpoints静音所有断点。程序将继续运行,不会在任何断点处暂停
  6. 如果你在调试过程中修改了变量值或代码,你可以使用“Update Application on Save”功能来实时刷新浏览器中的应用。这个功能可以确保你的修改立即生效,而无需手动刷新页面。

  7. 当你完成调试后,可以点击调试视图中的红色停止按钮来结束调试会话。

三、附录

3.1 调试器控制台

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

3.1.1 导航到源代码

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

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

3.1.2 过滤消息

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

image

3.2 重新加载当前页面

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

总结

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

image


http://www.mrgr.cn/news/71919.html

相关文章:

  • 编程初学者的第一个 Rust 系统
  • Vue自定义指令详解——以若依框架中封装指令为例分析
  • 在使用element中的抽屉<el-drawer>页签<el-tabs/>组合时,echarts图表宽度显示异常问题
  • keep-alive的tab栏内容缓存
  • <el-select> :remote-method用法
  • 【Linux】进程池实现指南:掌控并发编程的核心
  • C++基础(12.红黑树实现)
  • [运维][Nginx]Nginx学习(2/5)-Nginx高级
  • 241112
  • 【Linux】————信号
  • java数据结构与算法:栈
  • 用户,组管理命令
  • 高情商的人都在用的处事细节和技巧
  • 人工智能助手是否让程序员技能退化?
  • Java多线程进阶(锁策略)
  • python 由于系统缓冲区空间不足或队列已满,不能执行套接字上的操作
  • 政务数据治理专栏开搞!
  • 时间空间频域融合的Corssformer时间序列预测项目
  • Fortran安装(vscode+gcc+Python)
  • Django Form
  • JVM——类加载器、类加载器的分类
  • 专题十八_动态规划_斐波那契数列模型_路径问题_算法专题详细总结
  • 2024134读书笔记|《花间集》——云解有情花解语,山月不知心里事, 水风空落眼前花
  • SpringBoot如何集成WebSocket
  • RT-DETR融合NeurIPS[2022]Ghost Module v2模块
  • C#-命名空间