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

已于 2024-09-06 11:18:42 修改
阅读量401 收藏 5
点赞数 9
文章标签： webstorm vue.js ide
于 2024-09-05 16:35:20 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wsx9172/article/details/141931246
版权

问题说明

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

王ASC
关注
  • 9
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
webstorm debug调试vue项目
weixin_39417324的博客
08-10 2593
1.运行npm，然后控制台会打印下图中的地址，复制local的地址。2.run–>Edit Configuration，如下图.....
webstorm开发的Vue项目在手机调试以及打包成apk（以及打包后页面空白问题）
qq_41836598的博客
07-16 2653
一、为避免打包完成后的index.html打开空白问题，打包前需要更改下几个配置 1.config下的index.js文件（解决路由路径问题） 找到index.js，将 assetsPublicPath: ‘/’ 改为 assetsPublicPath: './' 2.build文件夹下的util.js文件（解决图片路径问题） 在if (options.extract) 中添加 ...
WebStorm前端项目打断点调试Vue项目
zyhang666的博客
06-11 667
首先声明：本方法适合项目，不适合vite项目。
webStorm debug vue项目的两种方案
大话家的博客
06-24 928
总的来说，方案2的操作，实际上会让webstorm打开两个端口，一个是服务端口（对应我这里的serve服务），另外一个就是debug端口（对应我这里的serve JavaScript），通过debug端口浏览器和webstorm之间交互用户debugger动作，以便知道用户干了什么。
使用webstorm调试vue 2 项目
~O~
02-05 1455
使用webstorm调试vue 2 项目笔者环境：vue 2。
WebStorm 2020.3亮点解析：增强对Vue的支持，新增调试时的交互式提示和嵌入式监视
qq_42444778的博客
11-12 1498
WebStorm是一款深受广大程序员喜爱的 JavaScript 开发和Web前端开发工具，完美适应各种复杂客户端开发和Node.js的服务器端开发。 点击下载WebStorm最新试用版 在下面，您将找到WebStorm 2020.3 Beta的一些亮点。 调试时的交互式提示和嵌入式监视 你可能已经知道，当执行在断点上停止时，WebStorm会向你显示提示，并在变量的用法旁边显示其值。为了使这些提示更加有用，我们引入了一些改进。 首先，内联提示现在是交互式的。你可以点击它们来查看属于变量的所有字段
React项目调试---WebStorm+Chrome调试
weixin_45178761的博客
04-07 4298
React项目其实是可以调试的。并且WebStorm+chrome也可以调试React项目。 1种调试方式 WebStorm + Chrome WebStorm + Chrome WebStorm是我最喜欢的前端开发IDE，只是比较重量级，启动速度较慢。 而在调试方面WebStorm + Chrome进行调试时，可以在WebStorm中源代码处加断点，当代码执行到断点处时，系统会让WebStorm...
webstorm使用指南
Lipop's博客
07-13 9238
前端开发比较推荐的两款编辑器JetBrains的WebStorm和微软的VsCode，本人之前开发一直用的VsCode，日常开发其实基本上就满足了，但有几个地方对于我来说一直都是痛点，体验感非常不好。首先是Git分支管理和提交，虽然有插件但是跟JetBrains的Git工具完全没得比，并且电脑配置差点每次想回滚或者查看前后差异都要卡老半天。平时开发基本不用，都是在终端输入命令操作。其次是Vue的一些JS代码调试，虽然网上有一些VsCode如何支持调试的教程，但我弄了老半天都没弄好，很难弄。...
Bug日记-webstorm运行yarn 命令报错
计算机程序定制、毕业项目
08-15 2093
Bug日记-webstorm运行yarn 命令报错
Vue2 中对数组进行操作时需要注意什么
最新发布
m0_73882020的博客
09-06 355
在 Vue 2 中，对数组进行操作时，关键是确保操作能够被 Vue 的响应式系统检测到。使用 Vue 的响应式 API，如Vue.set或this.$set，可以确保数组的变化会被正确地反映到视图中。此外，避免直接修改数组的length属性或使用数组索引直接赋值，以确保视图的响应性。
在 Vue 中实现跨项目数据传递
世轩的博客
09-03 1306
需要注意的是，跨项目数据传递可能会带来一些安全和数据一致性的问题。在实际应用中，要根据具体情况选择合适的方法，并确保数据的安全性和可靠性。同时，对于敏感数据，应该采取加密等安全措施。
开发适合el-dialog的拉伸拖拽自定义指令和适配自定义的图片查看组件
鹤渺的星球
09-05 1270
我之前有开发过一个图片查看的组件，这个组件可在单页面打开，也可以在弹窗里打开，但是弹窗因为是比较固定，所以有一些局限性，只能拖拽，不能改变弹窗大小，于是有了开发【可以拖拽改变大小的弹窗】组件。通过自定义指令，实现弹窗的移动拖拽拉伸等功能动态计算弹窗的位置与尺寸，因为弹窗的位置和尺寸是动态计算的，涉及到鼠标的实时位置和弹窗初始位置之间的关系。代码也贴上去了，仅供参考。
Chapter 11 脚手架Vue CLI使用步骤
2302_80253507的博客
09-06 257
Vue CLI 是 Vue.js 官方提供的一个全局命令工具，旨在帮助开发者快速创建和管理 Vue 项目。它为开发者提供了一个标准化的项目结构，并集成了 webpack 配置，使得开发过程更加高效和便利。
vue仓库的使用
weixin_58462329的博客
09-02 764
Vue仓库通常指的是使用Vue CLI创建的项目仓库，它包含了项目的所有源代码、配置文件以及依赖项。
手写 Vue Router 中的 Hash 模式和 History 模式
书呆子ITme
09-06 643
通过手写简化版的Vue Router，我们深入理解了Hash 模式和History 模式的实现原理。Hash 模式依赖于hashchange事件，而 History 模式依赖于pushState和API。两种模式各有优缺点，可以根据项目需求选择合适的路由模式。Hash 模式：简单、无需服务器配置，但URL不美观，对SEO不友好。URL美观且符合SEO要求，但需要服务器支持。
class 7: vue.js 3 前端工程化
ComingLiu的博客
09-03 1105
Vue.js 3
【vite-plugin-vue-layouts】关于 vue-layouts 布局插件的使用和注意事项
weixin_41899098的博客
09-06 635
环境：vue3 + vuetify3 + unplugin-vue-router是怎么创建这个项目的：选择它推荐的设置（Recommend）
4.2 Sensors -- onKeyStroke
weixin_44438233的博客
09-04 518
vueuse源码分析之onKeyStroke
webstorm 断点调试vue项目
05-31
要在WebStorm中断点调试Vue项目，您可以按照以下步骤操作： 1. 在WebStorm中打开您的Vue项目，并确保已经安装了Vue.js插件。 2. 点击菜单栏中的"Run"，然后选择"Edit Configurations"。 3. 点击"+"按钮，选择"JavaScript Debug"，然后选择"Chrome"。 4. 在"URL"字段中输入您的Vue项目的URL，例如"http://localhost:8080"。 5. 点击"OK"保存配置。 6. 在WebStorm中打开您要调试的Vue组件文件。 7. 在您想要设置断点的代码行上，单击该行号，或者按下"F9"键来设置断点。 8. 点击"Debug"按钮，或者按下"Shift+F9"键来启动调试器。 9. 在Chrome浏览器中打开您的Vue项目，并确保已经安装了"JetBrains IDE Support"插件。 10. 点击Chrome浏览器中的"JetBrains IDE Support"图标，然后选择"Connect"。 11. 在WebStorm中，您应该可以看到一个弹窗提示您连接到Chrome浏览器。 12. 点击"OK"连接到Chrome浏览器。 13. 在Chrome浏览器中操作您的Vue项目，当代码执行到您设置的断点处时，调试器会自动停止执行并进入调试模式。 14. 在WebStorm中，您可以使用调试器的控制按钮来单步执行代码，查看变量值，或者在代码中设置更多的断点。 希望这些步骤能够帮助您在WebStorm中成功设置断点调试Vue项目。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值