Vue-CLI 3.x | WebStorm + Chrome插件调试 Vue 2.x

最新推荐文章于 2025-09-17 15:38:20 发布
原创 最新推荐文章于 2025-09-17 15:38:20 发布 · 1.9k 阅读 · 0 ·
CC 4.0 BY-SA版权
本文为博主原创文章，未经博主允许不得转载。
文章标签：

#vue-cli3.x #vue #调试 #webstorm

本文详细介绍如何在WebStorm中配置和调试Vue项目，包括在vue.config.js中配置Webpack选项，安装和使用JetBrains IDE Support插件，以及在WebStorm中设置断点进行调试的具体步骤。

STEP1:  vue.config.js中配置Webpack选项

STEP2: Chrome网上应用商店中搜索"JetBrains IDE Support" 并下载

STEP3: WebStorm中进行配置

Run > Edit Configurations > Javascript Debug, 填入地址的URL，选择浏览器，点击Apply。

STEP4: WebStorm中设置断点，并在浏览器插件中激活

在JetBrains IDE Support图标上点击 “Insepect In WebStorm”；触发断点时见下图。

FollowGodSteps
关注
搭建你的项目脚手架 — vue3.x + typescript4.x + vite2.x + pinia2.x
weixin_43822185的博客
11-14 1405
搭建你的项目脚手架 — vue3.x + typescript4.x + vite2.x + pinia2.x
vite vue-cli 之vue3安装Vue devtools调试工具
weixin_48813932的博客
05-20 1986
官方默认推荐的就是内置vite-plugin-vue-devtools安装使用和Vue.js devtools 使用安装
vue3.X调试工具vue-devtools-6.0.0安装
小可桢的博客
03-06 2315
1百度网盘 请输入提取码 提取码为abcd 2 将下载好的安装包解压到你要安装的目录 3 在Chorme浏览器导入解压后的安装包 4 打开调试工具就能看到Vue标志
使用WebStorm打断点调试Vue项目（未成功，咱记录）
最新发布
s_156的博客
09-17 228
2：如果上面的选择第4步空白，，就先启动过vue项目，或者在packege.json启动过，就可以直接添加npm服务。4：启动成功记住路径，如下http://localhost:5799/，以下有用。1：打开WebStorm，先配置vue启动的服务，如下。7：启动项目就可以调试（注意：必须同时启动两个）5：添加一个JavaScript调试。3：使用Debug启动项目。
vue调试工具-vue3.0-6.0.0-beta-15
10-29
vue3和vue2都可以用、vue调试工具、适用于谷歌浏览器
Vue3.x源码调试的实现方法
10-16
主要介绍了Vue3.x源码调试的实现方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
Vue3学习--正确调试vue3源码
qq_45264054的博客
11-29 2476
vue3
用webstorm和vscode断点调试vue
12-04
2. **启动调试会话**：选择菜单栏的"Run" > "Edit Configurations"，创建一个新的"Vue CLI"配置，确保"Script path"指向`npm run serve`或者你的Vue项目的调试命令。 3. **运行调试**：点击绿色的"虫子"图标或按`F9...
从0搭建vue-cli4脚手架
11-20
如果之前安装过 Vue CLI 2，需要先卸载旧版本，执行 `cnpm uninstall -g vue-cli`，再进行新版本的安装。安装完成后，通过 `vue -V`（注意 `-V` 是大写）命令来验证 Vue CLI 的版本。 创建项目时，Vue CLI 提供了一...
webstorm+vue初始化项目的方法
10-17
WebStorm与Vue项目初始化方法是一套详细的操作指南，对于前端开发者来说，在使用WebStorm这款集成开发环境（IDE）中集成Vue.js框架进行项目开发时，掌握初始化流程是十分必要的。初始化项目的步骤不仅包括必要的开发...
node-v18.16.0-win-x64.zip
05-23
- 对于开发工作，推荐使用集成开发环境（IDE），如 Visual Studio Code、WebStorm 等，它们提供了对 Node.js 的良好支持，包括语法高亮、智能提示和调试功能。 7. **应用场景**： - Node.js 适用于实时通讯应用，...
使用WebStorm开发Vue3项目
m0_74824091的博客
12-05 2368
记录一下使用WebStorm开发Vu3项目时的配置。
使用Vue3重构vue2项目
奇舞周刊
10-20 4320
前言2020年9月18日，vue3正式版发布了，前几天把文档整体读了一遍，感触很深，可以解决我项目中的一些痛点，于是就决定重构之前那个vue2的开源项目。本篇文章就记录下重构vue2项目...
WebStorm调试Vue CLI 3工程
fxtxz2的专栏
12-09 1658
问题 在WebStorm中调试Vue工程。 步骤 浏览器中启用显示源代码 这里使用的Vue CLI 3工程： module.exports = { configureWebpack: { devtool: 'source-map' } } WebStorm运行vue 在菜单栏View→Tool Windows→npm，选择serve进行运行。 WebStorm运行调试进程 按住Command+shift，点击控制台http请求路径，即自动打开一个浏览器调试进程，进行vue断点调试。 参
Vue项目调试总结-WebStorm+Chrome调试
热门推荐
我是guyue，guyue就是我O(∩_∩)O
08-14 3万+
Vue项目调试总结-WebStorm+Chrome调试 Vue项目调试总结-WebStorm+Chrome调试 - 为程序员服务 http://ju.outofmemory.cn/entry/354985 Vue项目其实是可以调试的，刚接触Vue项目开发时，在网上搜了一堆关于Vue项目调试的资料，发现网上都说比较难搞，也没有一个方案能走得通。都快要放弃了，后来试验了Vue官方推荐的...
webstorm 通过vue-cli3 构建 项目（-）
cuiyuchen111的博客
08-15 2536
通过webstorm 新建一个项目 把项目添加到git仓库 新建一个仓库 2.把新建的仓库地址复制到此。项目搭建完成 增加vue.config.js // vue.config.js const path = require('path'); function resolve(dir) { return path.join(__dirname, dir) } modul...
vue-cli入门（三）—— vue(chrome)调试工具vue-devtools安装
samll_cat的博客
09-12 2960
工欲善其事, 必先利其器, 本文主要介绍 vue的调试工具 vue-devtools 的安装和使用. 首先从git拉取插件 git clone https://github.com/vuejs/vue-devtools.git 切换路径到vue-devtools目录下安装依赖 cd vue-devtools npm install 然后修改vue-devtools\shells\c...
WebStorm结合Chrome调试Vue与JavaScript的方法
本文将结合给定文件中的标题《webstorm调试vue或javascript的方法》和描述“首先先安装chrome的插件vue.js devtools，详细见附件”，深入解析如何在WebStorm中配置并实现对Vue项目及纯JavaScript脚本的高效调试流程...
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值