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.rhkb.cn/news/469921.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【循环神经网络】

循环神经网络(Recurrent Neural Network, RNN)是一类用于处理序列数据的神经网络,擅长处理具有时间依赖或顺序结构的数据。RNN通过循环连接的结构,使得当前时刻的输出可以受之前时刻信息的影响,因此被广泛应用于自然语…

sqoop import将Oracle数据加载至hive,数据量变少,只能导入一个mapper的数据量

sqoop脚本如下: sqoop import -D mapred.job.queue.namehighway \ -D mapreduce.map.memory.mb4096 \ -D mapreduce.map.java.opts-Xmx3072m \ --connect "jdbc:oracle:thin://1.2.3.4.5:61521/LZY2" \ --username root \ --password 123456 \ --query &…

低功耗WTK6900P语音ic方案助力电子烟技术革新 打造个性化吸烟体验

在这个科技日新月异的时代,每一个细节的创新都是对传统的一次超越。今天,我们自豪地宣布一项革命性的融合——将先进的频谱技术与电子烟相结合,通过WTK6900P芯片的卓越性能,为您开启前所未有的个性化吸烟体验。这不仅是一次技术的…

《基于深度学习的车辆行驶三维环境双目感知方法研究》

复原论文思路: 《基于深度学习的车辆行驶三维环境双目感知方法研究》 1、双目测距的原理 按照上述公式算的话,求d的话,只和xl-xr有关系,这样一来,是不是只要两张图像上一个测试点的像素位置确定,对应的深…

Chromium 中sqlite数据库操作演示c++

本文主要演示sqlite数据库 增删改查创建数据库以及数据库表的基本操作,仅供学习参考。 一、sqlite数据库操作类封装: sql\database.h sql\database.cc // Copyright 2012 The Chromium Authors // Use of this source code is governed by a BSD-sty…

Qt初识简单使用Qt

使用C代码实现hello world 之前介绍过用图形化界面的方式创建hello world&#xff0c;这里我们使用C代码的方式再来实现一次hello world。 如上&#xff0c;首先要先包含一个头文件。 在QT这里&#xff0c;每一个类都有一个对应的同名头文件。比如这里我就包含了 <QLabel&…

高效运维:构建全面监控与自动化管理体系

在当今数字化时代&#xff0c;企业IT系统的稳定运行直接关系到业务的连续性和竞争力。运维团队作为保障系统稳定运行的中坚力量&#xff0c;面临着前所未有的挑战。随着云计算、大数据、物联网等技术的快速发展&#xff0c;系统架构日益复杂&#xff0c;运维工作也从传统的被动…

Docker网络和overlay的基础讲解

本人发现了两篇写的不错的文章&#xff1a;Docker网络 - docker network详解-CSDN博客&#xff0c;Docker 容器跨主机通信 overlay_docker overlay 网络-CSDN博客 因为这两篇文章中含有大量的例子&#xff0c;新手看起来毫不费力。于是我偷了个小懒&#xff0c;在本篇文章中没有…

C++开发基础之使用librabbitmq库实现RabbitMQ消息队列通信

1. 前言 RabbitMQ是一个流行的开源消息队列系统&#xff0c;支持多种消息协议&#xff0c;广泛用于构建分布式系统和微服务架构。可以在不同应用程序之间实现异步消息传递。在本文中&#xff0c;我们将熟悉如何使用C与RabbitMQ进行消息通信。 2. 准备工作 在 Windows 平台上…

vue elementui el-dropdown-item设置@click无效的解决方案

如图&#xff0c;直接在el-dropdown-item上面设置click&#xff0c;相应的method并没有被触发&#xff0c;查找资料发现需要在它的上级 el-dropdown 处使用 command 方法触发。 【template】 <el-dropdown placement"bottom-end" command"handleCommand&quo…

使用docker-compose单点搭建社区版seafile+onlyoffice在线word编辑平台

文章目录 前言一、平台介绍1. seafile平台介绍2. onlyoffice平台介绍 二、版本信息三、基础信息准备1.docker配置文件2.准备目录 四、onlyoffice部署五、seafile平台部署1.准备seafile.yaml文件2.运行平台 六、双平台对接总结 前言 记录使用docker-compose单点搭建社区版seafi…

游戏引擎学习第七天

视频参考:https://www.bilibili.com/video/BV1QFmhYcE69 ERROR_DEVICE_NOT_CONNECTED 是一个错误代码&#xff0c;通常在调用 XInputGetState 或 XInputSetState 函数时返回&#xff0c;表示指定的设备未连接。通常会出现以下几种情况&#xff1a; 未连接控制器&#xff1a;如…

计算机的错误计算(一百五十二)

摘要 探讨 MATLAB 中双曲正弦函数 sinh(x)与双曲余弦函数 cosh(x)的计算精度问题。 例1. 已知 计算 以及 直接贴图吧&#xff1a; 另外&#xff0c;16或17位的正确值分别为 0.5168712762709208e1、0.52645599648397069e1、0.2140244217618104e247 与 0.2140244217…

【C++】详解RAII思想与智能指针

&#x1f308; 个人主页&#xff1a;谁在夜里看海. &#x1f525; 个人专栏&#xff1a;《C系列》《Linux系列》 ⛰️ 丢掉幻想&#xff0c;准备斗争 目录 引言 内存泄漏 内存泄漏的危害 内存泄漏的处理 一、RAII思想 二、智能指针 1.auto_ptr 实现原理 模拟实现 弊端…

JDBC-Dao层模式

分层思维 分层思维是软件架构设计的一种重要思想&#xff0c;它通过将应用程序划分为多个相互独立且依赖关系的层。 通常分为以下三层关系。 web层&#xff1a;主要负责与用户进行交互&#xff0c;处理请求。 service层&#xff1a;业务逻辑层&#xff0c;主要负责处理应用程序…

三种单例实现

1、不继承Mono的单例 实现 使用 注&#xff1a; 使用需要继承BaseManager 泛型填写自己本身 需要实现无参构造函数 2、挂载式的Mono单例 实现 使用 注&#xff1a; 使用需要继承SingletonMono 泛型填写自己本身 需要挂载在unity引擎面板 3、不用挂载式的单例 实现 使…

Flink API 的层次结构

Apache Flink 提供了多层 API&#xff0c;每层 API 针对不同的抽象层次和用途&#xff0c;使得开发者可以根据具体需求选择合适的 API 层次。以下是 Flink API 的层次结构及其简要说明&#xff1a;

DHCP与DNS安全管理

一、DHCPSnooping的攻击防范功能配置&#xff08;路由器&#xff09; 1.启动设备 2.将pc设为DHCP获取IP地址 3.配置DHCP [AR1]dhcp enable //启动DHCP服务 [AR1]ip pool aaa //设置地址池 [AR1-ip-pool-aaa]network 192.168.10.0 mask 24 //设置地址范围 [AR1-ip-poo…

51c视觉~合集6

我自己的原文哦~ https://blog.51cto.com/whaosoft/11603901 #CSWin-UNet 将自注意力机制集成到UNet中&#xff01;CSWin-UNet&#xff1a;U型分割方法&#xff0c;显著提高计算效率和感受野交互&#xff01;本文提出了CSWin-UNet&#xff0c;这是一种新颖的U型分割方法&…

深度学习服务器租赁AutoDL

省钱绝招 #AutoDL #GPU #租显卡