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

最新推荐文章于 2024-07-27 17:13:06 发布
最新推荐文章于 2024-07-27 17:13:06 发布
阅读量1.9k 收藏
点赞数 1
文章标签： vue-cli3.x vue 调试 webstorm
本文为博主原创文章，未经博主允许不得转载。
本文链接：https://blog.csdn.net/FollowGodSteps/article/details/89178138
版权

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
关注
vue调试工具-vue3.0-6.0.0-beta-15
10-29
vue3和vue2都可以用、vue调试工具、适用于谷歌浏览器
vue3.X调试工具vue-devtools-6.0.0安装
小可桢的博客
03-06 2033
1百度网盘 请输入提取码 提取码为abcd 2 将下载好的安装包解压到你要安装的目录 3 在Chorme浏览器导入解压后的安装包 4 打开调试工具就能看到Vue标志
如何使用WebStorm打断点调试Vue项目
最新发布
qq_46614863的博客
07-27 583
在开发 Vue 项目时，定位错误往往是一个令人头痛的问题。为了提升调试效率，我们可以利用 WebStorm 的强大调试功能，通过设置断点来逐步检查代码，找出问题所在。下面是具体的操作步骤： 注意：这里要启动两个，如果只启动一个是访问不到了
Vue3.x源码调试的实现方法
10-16
主要介绍了Vue3.x源码调试的实现方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
vue项目源码调试方法 ，chrome调试控制台工作区使用，利用chrome控制台调试vue项目源码的方法 图解
07-19 1114
我们在开发vue项目的时候，项目开始后的第一件事情应该就是准备调试工作了，Chrome调试控制台就给我们提供了这样的一个方便的调试工作区。在这个时候我们再次却换到网页标签，就可以看到有2个vue文件，右下角带绿色标识的就是我们添加的项目中的真正的源码文件，而另外一个则是经过webpack处理后的源码文件。在我们点击允许后，chrome就会自动帮我们却换到工作区标签，同时会以高亮的形式显示我们当前浏览的页面和我们的项目源码的对应关系，如下图。选择之后会有一个提示，点击允许。
用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 适用于实时通讯应用，...
vue: WebStorm设置快速编译运行的方法
10-17
2. 配置运行/调试配置：点击WebStorm界面上方的"Run"按钮旁边的下拉菜单，然后选择"Edit Configurations..."选项。这里你将能够设置和管理运行、调试项目时的配置。 3. 添加新的运行配置：在配置页面的左上角点击...
使用Vue3重构vue2项目
奇舞周刊
10-20 4029
前言2020年9月18日，vue3正式版发布了，前几天把文档整体读了一遍，感触很深，可以解决我项目中的一些痛点，于是就决定重构之前那个vue2的开源项目。本篇文章就记录下重构vue2项目...
webstorm创建和调试vue项目
热门推荐
球球之家
12-22 5万+
安装node.js官网下载安装 https://nodejs.org/en/cmd下创建项目创建项目文件夹webpack-vue,并cd进入 安装vue-clinpm install -g vue-cli初始化vue init webpack默认项enter键，其他按情况选择y/n 安装webstorm下载安装https://www.jetbrains.com/webstorm/ 个性化设置
vue-cli3 的webpack配置
zz153417230的博客
11-23 2万+
@vue/cli的webpack配置 查看默认配置 因为Vue CLI 内部的 webpack 配置是通过 webpack-chain 维护的, 把一些常用的内容配置好. vue-cli-service 暴露了 inspect 命令用于审查解析好的 webpack 配置。 vue inspect > output.js 将webpack默认配置, 重定向到一个文件中. 其中的一段为: pl...
Vue.js devtools：调试vue.js应用的浏览器扩展 Chrome插件
绝圣弃智-零的博客
04-15 2558
Vue.js devtools插件功能简介 Vue.js devtools是基于google chrome浏览器的一款调试vue.js应用的开发者浏览器扩展。做前端开发的IT工程师应该比较熟悉这款工具，可以边测边栏窗格中的页面，边检查代码。 Vue.js devtools插件下载安装 Vue.js devtools插件哪里下载？你可以从chrome应用商店里找到Vue.js devtools...
手动安装vue-devtools（vue谷歌调试插件）
博客入坑
07-05 3572
手动安装vue-devtools（vue谷歌调试插件） 1.找到vue-devtools项目，并将项目clone到本地 git clone https://github.com/vuejs/vue-devtools.git 通过命令行下载可能下载不下来 报一个443的错误，可以去gitHub官网搜索vue-devtools 一般显示 在首位的就是我们要下载的那个插件了，然后通...
vue cli 3.0下(调试)--配置开发环境下的sourcemap
sunshineTing2的博客
03-30 4962
vue cli 3.0下( 调试 ) 默认vue项目调试的时候，是编译过的（如图） 在 vue.config.js 文件中的 configureWebpack 里添加 source-map 配置 configureWebpack: { name: name, devtool: process.env.NODE_ENV === "production" ? 'false' : ...
vue-cli3开发Chrome插件实践
weixin_34404393的博客
05-28 2913
之前找了不少如何开发谷歌插件的文章，结果发现都是些很基础的内容，并没有写到如何快速编译打包插件。我就在想为什么不能通过webpack来打包插件呢？如果通过webpack编译的话，就能使开发过程变得更舒服，使文件结构趋向模块化，并且打包的时候直接编译压缩代码。后来发现了vue-cli-plugin-chrome-ext插件，通过这个插件能很方便地用vue-cli3来开发谷歌插件，并能直接引用各种UI...
vue-cli 4.x中Vant按需加载解决方案与升级步骤
2. 在项目的根目录中，通常能找到`.babelrc`或`babel.config.js`（在vue-cli 4.x中是后者）文件。在这个文件中，你需要添加`babel-plugin-import`插件到`plugins`数组中，配置如下： ```javascript module.exports...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值