使用WebStorm打断点调试Vue项目（未成功，咱记录）

转载 于 2025-09-17 15:38:20 发布 · 356 阅读 · 0 ·
CC 4.0 BY-SA版权
原文链接：https://blog.csdn.net/qq_19891197/article/details/147930840
文章标签：

#webstorm #vue.js #ide

1：打开WebStorm，先配置vue启动的服务，如下

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

2：如果上面的选择第4步空白，，就先启动过vue项目，或者在packege.json启动过，就可以直接添加npm服务

在这里插入图片描述

3：使用Debug启动项目

在这里插入图片描述

4：启动成功记住路径，如下http://localhost:5799/，以下有用启动成功

5：添加一个JavaScript调试

在这里插入图片描述
在这里插入图片描述

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

6：–remote-allow-origins=*

在这里插入图片描述

7：启动项目就可以调试（注意：必须同时启动两个）

在这里插入图片描述

webstrom Debug 调试vue项目的方法步骤
10-18
主要介绍了webstrom Debug 调试vue项目的方法步骤，详细的介绍了两种调试vue项目的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
webstorm vue调试
05-19 7401
调试 编辑调试配置，新建JavaScript调试配置，并设置要访问的url，以及Remote url配置，如下图所示: 在URL处填写: http://localhost:8080(古月: 本文章是8080端口, 具体的端口看自己的程序写的是监听哪一个) 在src的Remote url处填写: webpack:///src 保存好调试配置 启动server，可以使用WebStorm npm scripts中双击start启动server， 也可以在命令行中执行命令npm run start启
WebStorm中如何调试Vue项目
邓邓子的博客
08-03 6423
打开菜单 “File” -> “Setting…”，选中 “Build，Execution，Deployment”，可以看到 Port，默认的 Port 端口为 63342。
webstorm debug调试vue项目
weixin_39417324的博客
08-10 4521
1.运行npm，然后控制台会打印下图中的地址，复制local的地址。2.run–>Edit Configuration，如下图.....
WebStorm打断点调试Vue项目--方法/实例
热门推荐
IT利刃出鞘的博客
11-21 2万+
本文介绍如何通过在WebStorm里打断点来调试Vue项目。
webStorm使用断点
vv_wisher的博客
09-29 4479
webStorm使用断点
WebStorm用Debug模式调试Vue等前端项目
wsx9172的博客
09-05 2199
非常的麻烦，而且浏览器中对变量的追踪功能也有限，同时我也一直好奇WebStorm中Debug启动方式的作用，今天研究了一下，果然WebStorm提供了更简单的方法，记录一下。涉及到稍复杂的逻辑，就需要在代码中侵入增加debugger，或者在浏览器中找到js文件，再手动添加断点。调试前端代码，一直很苦恼调试前端代码的麻烦。在控制台打印变量值，来验证预期结果。命令的作用是关闭浏览器的跨域限制。
怎么使用webstorm来调试vue中js代码
记~忆~
12-10 1263
在浏览器中调试js代码很不舒服，所以查阅了各位前辈的博客，再此记录一下： 1.生成项目，我的项目中的package.json入下图： { "name": "my-app", "version": "0.1.0", "private": true, "scripts": { "serve": "vue-cli-service serve", "build": "vue-cli-service build", "lint": "vue-cli-service li.
vue + webstorm + chrome 断点调试
无关内外，方圆其中
01-15 4253
背景：首先我们写程序不能保证不出错，如果写程序不会调试那也就废了。VUE官网已经给出了VUE+VSCode的调试教程，这里就不说了，如果想看请各位客官前往官网查看。因为本人比较习惯使用JetBrains全家桶，这里我将vue、webstorm、chrome三者联合起来断点调试的方法记录在这，好了不说了直接上菜。 1.webstorm 的配置 2.在vue项目中设置Source map ...
webstorm调试pomelo断点无效问题
逆水行舟 不进则退
07-04 2149
最近打算看下网易的的pomelo框架。对于菜鸟来说，每一步都不是那么容易。这里记录下步骤和问题。 开发环境:  WINDOWS7， VS2015， python 3.6.1， WebStorm2017.1 通过命令安装pomelo:  npm install pomelo -g 这里使用官网提供的例子，链接:  https://github.com/NetEase/chatofpomelo-
webstorm 调试vue项目
liuchao的博客
06-01 5477
在webstorm中配置远程调试vue项目。
webstrom 断点调试,小白详细步骤篇
1
06-21 3086
网上找了很久都是七零八落的,要么就是不够通俗易懂故作此文章记录和分享。
webStorm debug vue项目的两种方案
大话家的博客
06-24 2353
总的来说，方案2的操作，实际上会让webstorm打开两个端口，一个是服务端口（对应我这里的serve服务），另外一个就是debug端口（对应我这里的serve JavaScript），通过debug端口浏览器和webstorm之间交互用户debugger动作，以便知道用户干了什么。
如何使用WebStorm打断点调试Vue项目
qq_46614863的博客
07-27 4727
在开发 Vue 项目时，定位错误往往是一个令人头痛的问题。为了提升调试效率，我们可以利用 WebStorm 的强大调试功能，通过设置断点来逐步检查代码，找出问题所在。下面是具体的操作步骤： 注意：这里要启动两个，如果只启动一个是访问不到了
如何在webstorm下进行vue项目的断点调试
weixin_29005819的博客
11-23 9894
文章目的:在webstorm下实现像java般的断点调试（从0开始搞起） 1.基本环境 WebStorm 2017.3.3 Google 版本 87.0.4280.66（正式版本） （64 位） Node.js v12.16.3 @Vue/cli 4.3.1 2. 项目搭建 # 创建一个默认的vue项目 vue add testDebug # 一直next 3.配置3步曲(端口要一致：重要） 第一步：配置webstorm的端口 第二步：配置debug的环境 第三步：谷歌浏览器安
Electron-Vue 主进程远程调试 & Webpack/Webstorm 打包配置细节记录
最新发布
王森的博客
12-17 1331
很多人应该都不会electron主进程调试，electron-vue 框架给了一种node调试的一种方法，这里记录下来，对很多人应该都有用，另外，对于webstorm对electron的支持，这里也记录一下，方便大家提高开发效率
vue webstorm 问题总结
唐心的博客
01-02 639
WebStorm光标经常变成块状更改 https://blog.csdn.net/alokka/article/details/73719371 insert Parsing error: x-invalid-end-tag ivew，tmd rubbish 这个我也无法解决，我关了eslint也没用，只能手动关标签 ...
Vue使用的编辑器
m0_74885516的博客
03-19 9563
本章将会带你了解Vue前端开发常使用的IDE工具。
使用 WebStorm 进行高效的全栈 JavaScript 开发
W楠的博客
08-25 849
在现代网络开发中，全栈 JavaScript 开发逐渐成为主流，开发者能够利用 JavaScript 在前端和后端构建完整的应用程序。WebStorm 是 JetBrains 开发的一个强大的集成开发环境（IDE），专门为 JavaScript 和前端开发设计。本文将探讨如何使用 WebStorm 提升全栈 JavaScript 开发的效率，从项目设置到调试，再到自动化流程。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值