WebStorm用Debug模式调试Vue等前端项目

最新推荐文章于 2025-02-06 14:13:36 发布
最新推荐文章于 2025-02-06 14:13:36 发布
阅读量1.7k 收藏 3
点赞数 4
文章标签： 前端 webstorm vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_74825409/article/details/144396438
版权
问题说明

开发前端时，一直很苦恼调试前端代码的麻烦。
简单的内容可以通过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=*命令的作用是关闭浏览器的跨域限制

m0_74825409
关注
webstorm debug调试vue项目
weixin_39417324的博客
08-10 3664
1.运行npm，然后控制台会打印下图中的地址，复制local的地址。2.run–>Edit Configuration，如下图.....
WebStorm中如何调试Vue项目
邓邓子的博客
08-03 6008
打开菜单 “File” -> “Setting…”，选中 “Build，Execution，Deployment”，可以看到 Port，默认的 Port 端口为 63342。
webstrom Debug 调试vue项目的方法步骤
10-18
主要介绍了webstrom Debug 调试vue项目的方法步骤，详细的介绍了两种调试vue项目的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
webStorm debug vue项目的两种方案图文详解
最新发布
s_156的博客
02-06 92
本文将介绍通过webstorm对vue项目进行debugger调试的两种方案。但是，不管通过那种方案，都无法达到类似后端idea调试的体验，感觉十分难受，不过，比起用console.log还是好一些。如果各位有更好的方案，还望赐教。
用webstorm进行javascript的Debug
热门推荐
yangyuhan156的专栏
10-04 2万+
本来想些一个关于karma+jasmine单元测试覆盖率和如何与kenkins配合使用，发现已经有一篇写的很好的了，而且验证是可以用的。地址直接贴上了：http://www.myexception.cn/software/1632891.htmljavascript Debug目前我们开发中javascript的debug一般都是用chrome和firefox的开发者工具来进行debug，这些工具使
webStorm debug vue项目的两种方案
大话家的博客
06-24 1703
总的来说，方案2的操作，实际上会让webstorm打开两个端口，一个是服务端口（对应我这里的serve服务），另外一个就是debug端口（对应我这里的serve JavaScript），通过debug端口浏览器和webstorm之间交互用户debugger动作，以便知道用户干了什么。
WebStorm打断点调试Vue项目--方法/实例
IT利刃出鞘的博客
11-21 2万+
本文介绍如何通过在WebStorm里打断点来调试Vue项目。
WebStorm 中调试 (Debug) JavaScript 文件(js)
Java小白白的博客
04-23 2380
在 WebStorm 中调试 JavaScript 文件，您可以设置断点，启动调试会话，并使用浏览器中的开发者工具来查看变量和执行流程。
WebStrom 前端项目Debug
qk
08-19 848
前端 debug
WebStorm 如何调试 Vue 项目
独泪了无痕
11-12 2538
关于使用 WebStorm 如何调试 Vue 代码就介绍到这了，相信你已经掌握了使用 WebStorm 调试 Vue 代码的基本方法。WebStorm 作为一款功能强大的IDE，提供了丰富的调试功能和技巧，可以帮助你更高效地开发和调试 Vue 应用。当然，除了 WebStorm 外，还有很多其他的调试工具和技术可以使用，如Chrome DevTools、Visual Studio Code等。你可以根据自己的需求和喜好选择合适的工具来提高开发效率，希望本文对你有所帮助！
用webstorm和vscode断点调试vue
12-04
VUE断点调试技术 大家都知道后端开发是可以设置断点调试运行的,现在前端开发也可以和后端开发一样设置断点调试运行了
webstorm开发的Vue项目在手机调试以及打包成apk（以及打包后页面空白问题）
qq_41836598的博客
07-16 2806
一、为避免打包完成后的index.html打开空白问题，打包前需要更改下几个配置 1.config下的index.js文件（解决路由路径问题） 找到index.js，将 assetsPublicPath: ‘/’ 改为 assetsPublicPath: './' 2.build文件夹下的util.js文件（解决图片路径问题） 在if (options.extract) 中添加 ...
WebStorm 2020.3亮点解析：增强对Vue的支持，新增调试时的交互式提示和嵌入式监视
qq_42444778的博客
11-12 1550
WebStorm是一款深受广大程序员喜爱的 JavaScript 开发和Web前端开发工具，完美适应各种复杂客户端开发和Node.js的服务器端开发。 点击下载WebStorm最新试用版 在下面，您将找到WebStorm 2020.3 Beta的一些亮点。 调试时的交互式提示和嵌入式监视 你可能已经知道，当执行在断点上停止时，WebStorm会向你显示提示，并在变量的用法旁边显示其值。为了使这些提示更加有用，我们引入了一些改进。 首先，内联提示现在是交互式的。你可以点击它们来查看属于变量的所有字段
Vue进阶（幺陆柒）：Vue 项目调试技能_vue项目调试 需要重新run么
2401_84412050的博客
04-29 436
在Vue项目开发过程中，当遇到应用逻辑出现错误，但又无法准确定位的时候，知晓Vue项目调试技巧至关重要。同后台项目开发一样，可以在JS实现的应用逻辑中设置断点，并进行单步、进入方法内、跳出方法等调试，从而准确定位问题根源。本文主要讲解针对JetBrains系列WebStorm下Vuedebugger和。
React项目调试---WebStorm+Chrome调试
weixin_45178761的博客
04-07 4430
React项目其实是可以调试的。并且WebStorm+chrome也可以调试React项目。 1种调试方式 WebStorm + Chrome WebStorm + Chrome WebStorm是我最喜欢的前端开发IDE，只是比较重量级，启动速度较慢。 而在调试方面WebStorm + Chrome进行调试时，可以在WebStorm中源代码处加断点，当代码执行到断点处时，系统会让WebStorm...
idea Debug快捷键
weixin_34375233的博客
05-08 473
快捷键介绍 F7 在 Debug 模式下，进入下一步，如果当前行断点是一个方法，则进入当前方法体内， 如果该方法体还有方法，则不会进入该内嵌的方法中* F8 在 Debug 模式下，进入下一步，如果当前行断点是一个方法，则不进入当前方法体内* F9 在 Debug 模式下，恢复程序运行，但是如果该断点下面代码还有断点则停在下一个断点上...
Webstorm那些事 之 调试（Debug）前端代码
crazy_jialin的博客
06-04 2万+
对于程序员来说，代码的Debug是必不可少的。而在调试前端代码的时候很少用，都是在浏览器控制台看代码的console来观察变量值，单使用浏览器调试代码的缺点： 不能快速定位到我们编辑器相应代码的地方 代码里边会出现很多console.log()，浏览器的控制台一不小心就会变得很乱 如果需要打断点，还需要从控制台的sources中寻找到js文件进行断点调试，有些脚手架的项目没有开启source-map，sources中的代码都是压缩的，没有办法找到我们的代码进行断点调试 下面为大家安利一个Webstorm
webstorm vue 代码调试
12-27
### WebStorm 调试 Vue 项目的配置与方法 #### 配置调试环境 为了能够在 WebStorm 中顺利调试 Vue 项目，首先需要确保已正确安装并配置 Node.js 和 npm 或 yarn 来管理依赖项[^3]。 接着，在 WebStorm 的设置中启用 JavaScript 支持以及安装必要的插件支持 Vue 文件解析。对于具体的调试配置来说： - 打开 `Run | Edit Configurations` 对话框； - 点击左上角的加号 (+)，选择 "JavaScript Debug"； - 设置 URL 字段为本地服务器地址（通常是 http://localhost:8080/），这里的端口取决于启动服务时所使用的实际端口号；此过程可以通过查看终端命令行提示找到确切数值[^2]。 完成上述操作之后保存更改即可准备进入下一步骤。 #### 开始调试会话 当一切准备好以后就可以通过点击绿色的小虫子图标或者按 Shift+F9 启动调试器了。此时浏览器将会自动打开指定网页链接并且处于暂停状态等待断点触发。 在编辑区内双击左侧边栏可快速创建或移除断点位置以便于观察特定代码片段执行情况。一旦程序流到达这些标记处便会停止下来允许开发者检查变量值、调用堆栈以及其他相关信息从而帮助定位潜在错误所在之处[^1]。 另外值得注意的是还可以利用 Chrome DevTools 结合 WebStorm 实现更加深入细致的功能分析工作——只需简单几步就能让两者协同作业提供全方位的支持和服务给前端工程师们带来极大便利。 ```javascript // 示例：简单的 Vue 组件用于展示如何设置断点进行调试 <template> <div id="app"> {{ message }} </div> </template> <script> export default { data() { return { message: 'Hello, world!' } }, mounted() { // 可在此函数内设置断点来监控组件挂载后的行为 console.log('Component has been mounted.') } } </script> ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值