WebStorm用Debug模式调试Vue项目

news2024/12/24 9:32:01

问题说明

开发前端代码时,一直很苦恼调试前端代码的麻烦。
简单的内容可以通过console.log()在控制台打印变量值,来验证预期结果。
涉及到稍复杂的逻辑,就需要在代码中侵入增加debugger,或者在浏览器中找到js文件,再手动添加断点。
在这里插入图片描述
非常的麻烦,而且浏览器中对变量的追踪功能也有限,同时我也一直好奇WebStorm中Debug启动方式的作用,今天研究了一下,果然WebStorm提供了更简单的调试方法,记录一下

WebStorm调试步骤

  1. 启动前端项目,我这里是Vue项目,执行npm run serve正常启动即可,启动成功控制台会打印前端服务地址和端口
    在这里插入图片描述
  2. 新建JavaScriptDebug在这里插入图片描述
    在这里插入图片描述
  3. 配置调试脚本URL,设置URL为上面控制台打印的前端项目访问地址
    在这里插入图片描述
  4. 启动调试脚本
    在这里插入图片描述
  5. 开始愉快的调试
    在这里插入图片描述

其他问题

跳转页面url为about:blank问题解决
在这里插入图片描述
按下图步骤操作
在这里插入图片描述
选择默认浏览器在这里插入图片描述
--remote-allow-origins=*命令的作用是关闭浏览器的跨域限制

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2109504.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Linux 之 mysql-5.7.44 下载/安装(离线)

下载 官网 MySQL :: Download MySQL Community Server (Archived Versions) 安装 1.解压并放到指定目录(/home/mysql) tar -zxvf mysql-5.7.44-el7-x86_64.tar.gz 移动到指定安装位置(我的:/home 下) mv mysql-5.…

实操在聆思CSK6大模型开发板的英文评测SDK中自定义添加单词、短语、句子资源

引言 英文评测示例通过对用户语音输入的英文单词进行精准识别,提供 单词、短语、句子 三种类型,用户在选择好类型后,可根据屏幕上的提示进行语音输入,评测算法将对输入的英文语音进行精准识别,并对单词的发音、错读、漏…

Codeforces Round 970 (Div. 3)(ABCDEF)

Codeforces Round 970 (Div. 3) A:Sakurakos Exams 签到 题意:给定1,2的数量,判断是否能用加减符号使得这些1,2计算出0 void solve() {cin>>n>>m;if(n%2)cout<<"NO\n";else{if(m%20||n)cout<<"YES\n";else cout<<"…

作为前端,感受一下MemFire Cloud带来的魅力

作为一名前端开发者&#xff0c;你是否曾为后台开发的繁琐和复杂而头疼&#xff1f;是否想过只需要专注于前端界面&#xff0c;而所有的后端工作都能一键搞定&#xff1f;如果你有这些想法&#xff0c;那么MemFire Cloud 无疑会成为你开发路上的新神器。 什么是MemFire Cloud…

SpringBoot学习(8)RabbitMQ详解

RabbitMQ 即一个消息队列&#xff0c;主要是用来实现应用程序的异步和解耦&#xff0c;同时也能起到消息缓冲&#xff0c;消息分发的作用。 消息中间件最主要的作用是解耦&#xff0c;中间件最标准的用法是生产者生产消息传送到队列&#xff0c;消费者从队列中拿取消息并处理&…

搞定JavaScript异步原理,深入学习Promise

JS异步及Promise基础 一、从浏览器运行机制说起 来破案啦&#xff0c;常说的“多线程的浏览器、单线程的Javascript”到底是什么意思&#xff1f;单线程的Javascript是否真的需要抽身去计时、去发http请求&#xff1f;第一部分我们重新从浏览器运行机制开始认识一下JavaScript…

828华为云征文 | Flexus X实例与华为云EulerOS的Tomcat安装指南

文章目录 前言安全组设置操作步骤软件安装配置软件验证Tomcat安装是否成功 总结 前言 Tomcat是一个由Apache软件基金会开发并维护的免费、开源的Web应用服务器。它主要用于处理Java Servlet、JavaServer Pages&#xff08;JSP&#xff09;和JavaServer Pages Standard Tag Lib…

新增一个数组传递给后端

实现的效果&#xff1a; 页面 <div style"margin-bottom: 10px" v-if"totalPrice"><p style"font-weight: bolder;margin-bottom: 10px">支付计划<el-button type"text" size"small" click"addPayInf…

53 mysql pid 文件的创建

前言 接上一篇文章 mysql 启动过程中常见的相关报错信息 在 mysql 中文我们在 “service mysql start”, “service mysql stop” 经常会碰到 mysql.pid 相关的错误信息 比如 “The server quit without updating PID file” 我们这里来看一下 mysql 中 mysql.pid 文件的…

软件工程知识点总结(2):需求分析(一)——用例建模

1 软件项目开发流程&#xff1a; 需求分析→概要设计→详细设计→编码实施→测试→产品提 交→维护 2 系统必须做什么&#xff1f; 获取用户需求&#xff0c;从用户角度考虑&#xff0c;用户需要系统必须完成哪些工作&#xff0c;也就是对目 标系统提出完整、准确、清晰、具体…

算法day22|组合总和 (含剪枝)、40.组合总和II、131.分割回文串

算法day22|组合总和 &#xff08;含剪枝&#xff09;、40.组合总和II、131.分割回文串 39. 组合总和 &#xff08;含剪枝&#xff09;40.组合总和II131.分割回文串 39. 组合总和 &#xff08;含剪枝&#xff09; 给你一个 无重复元素 的整数数组 candidates 和一个目标整数 ta…

使用Node-API实现跨语言交互开发流程

一、前言 使用Node-API实现跨语言交互&#xff0c;首先需要按照Node-API的机制实现模块的注册和加载等相关动作。 ArkTS/JS侧&#xff1a;实现C方法的调用。代码比较简单&#xff0c;import一个对应的so库后&#xff0c;即可调用C方法。 Native侧&#xff1a;.cpp文件&#xf…

【C语言】十六进制、二进制、字节、位、指针、数组

【C语言】十六进制、二进制、字节、位 文章目录 [TOC](文章目录) 前言一、十六进制、二进制、字节、位二、变量、指针、指针变量三、数组与指针四、指针自加运算五、二维数组与指针六、指向指针的指针七、指针变量作为函数形参八、函数指针九、函数指针数组十、参考文献总结 前…

JVM面试(六)垃圾收集器

目录 概述STW收集器的并发和并行 Serial收集器ParNew收集器Parallel Scavenge收集器Serial Old收集器Parallel Old收集器CMS收集器Garbage First&#xff08;G1&#xff09;收集器 概述 上一章我们分析了垃圾收集算法&#xff0c;那这一章我们来认识一下这些垃圾收集器是如何运…

某云彩SRM2.0任意文件下载漏洞

文章目录 免责申明搜索语法漏洞描述漏洞复现修复建议 免责申明 本文章仅供学习与交流&#xff0c;请勿用于非法用途&#xff0c;均由使用者本人负责&#xff0c;文章作者不为此承担任何责任 搜索语法 fofa icon_hash"1665918155"漏洞描述 某云采 SRM2.0是一款先…

制作自己的游戏:打砖块

文章目录 &#x1f680; 前言&#x1f680; 前期准备&#x1f680; 玩法设计&#x1f680; 游戏场景&#x1f353; 什么是游戏场景&#x1f353; 绘制左上角积分&#x1f353; 绘制右上角生命值&#x1f353; 绘制砖块&#x1f353; 绘制小球&#x1f353; 绘制挡板&#x1f35…

场景是人工智能第四要素,是垂直领域人工智能的第一要素。

"场景是人工智能的第四要素&#xff0c;与数据、算力、算法同等重要。"拿着技术找场景&#xff0c;还是拿着场景找技术&#xff1f;这个锤子和钉子的问题&#xff0c;一直困扰着各家AI大厂。从近5年的实践来看&#xff0c;拿着场景找技术是更为稳健的&#xff0c;否则…

文章解读与仿真程序复现思路——电力自动化设备EI\CSCD\北大核心《面向电网调峰的聚合温控负荷多目标优化控制方法 》

本专栏栏目提供文章与程序复现思路&#xff0c;具体已有的论文与论文源程序可翻阅本博主免费的专栏栏目《论文与完整程序》 论文与完整源程序_电网论文源程序的博客-CSDN博客https://blog.csdn.net/liang674027206/category_12531414.html 电网论文源程序-CSDN博客电网论文源…

R901085689比例流量控制阀配置HE-SP1比例放大器

R901085689比例流量控制阀配置HE-SP1比例放大器的功能是将电信号转换成对应的流量变化&#xff0c;通过调整阀门开度来控制介质的流量。这种转换是通过比例电磁铁实现的&#xff0c;它将输入的电流信号转换成力或位移&#xff0c;从而驱动阀芯移动&#xff0c;实现流量的连续调…

html+css+js网页设计 珠宝首饰模版13个页面

htmlcssjs网页设计 珠宝首饰模版13个页面 网页作品代码简单&#xff0c;可使用任意HTML编辑软件&#xff08;如&#xff1a;Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad 等任意html编辑软件进行运行及修改编辑等操作&#xff09;。 获取源码 1&…