VUE系列——Chrome安装Vue调试插件

最新推荐文章于 2024-06-25 20:03:16 发布
最新推荐文章于 2024-06-25 20:03:16 发布
阅读量234 收藏
点赞数
分类专栏： vue 文章标签： vue
原文链接：https://blog.csdn.net/qq_26230421/article/details/89522870
版权

前言

Vue是一个很好用的前端，但是在浏览器上面不能直接打断点调试程序。

下面介绍通过安装调试插件对程序进行调试

按F12之后，出现一个Vue选项，效果如下：

安装过程

step1 下载插件并解压

链接：点我进入 
提取码：2tcj 

step2 进入到Chrome扩展程序页面点击开发者模式

chrome://extensions/

step3 点击加载已解压的扩展程序

step4 选择解压后的文件夹

结果

出现下面的效果就已经安装好了：

 

a伊雪
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue调试工具vue-devtools安装及使用方法
12-12
在开发过程中，为了提高效率和精确调试，Vue 提供了一个强大的调试工具——Vue DevTools。这款工具允许开发者深入查看 Vue 应用的状态，包括组件树、数据、计算属性、依赖关系等。下面我们将详细介绍 Vue Devtools ...
Chrome 浏览器安装Vue2、Vue3插件方法 (详细有效)
Stitch_xiao的博客
02-10 406
https://blog.csdn.net/qq_50497708/article/details/128261618
我的第一个Chrome小插件-基于vue开发的flexbox布局CSS拷贝工具
前端向朔
01-05 3072
概述 之前介绍过 移动Web开发基础-flex弹性布局（兼容写法） 里面有提到过想做一个Chrome插件，来生成flexbox布局的css代码直接拷贝出来用。最近把这个想法实现了，给大家分享下。 play-flexbox插件介绍 play-flexbox 一秒搞定flexbox布局，可直接预览效果，拷贝CSS代码快速用于页面重构。 你也可以通过点击以下链接（codepen示例）查
Chrome插件：​Vue.js Devtools 高效地开发和调试
最新发布
朱雀随云记的博客
06-25 1159
Vue.js Devtools是一个Chrome DevTools扩展，专门用于调试Vue.js应用。安装这个扩展后，你会在Chrome开发者工具中看到一个新的标签“Vue”，通过它可以直观地查看和操作Vue.js组件，极大地提升了调试效率。
Chrome安装VUE调试插件
u011664286的博客
09-21 2138
chrome 浏览器安装vue调试插件
chrome扩展程序vue调试插件
qianxunand的博客
01-17 683
Chrome扩展程序Vue调试插件 https://pan.baidu.com/s/1bRnn1S7j29gBs-5xVoCqEg 提取码：lldy 下载并解压 chrome://extensions/ 进入扩展程序，打开右上角的开发者模式，然后点击“加载已解压的扩展程序”，找到刚刚解压完的插件文件夹 就可以使用了 ...
记录--使用Vue开发Chrome插件
林恒的博客
10-22 3474
这里给大家分享我在网上总结出来的一些知识，希望对大家有所帮助 环境搭建 Vue Web-Extension - A Web-Extension preset for VueJS (vue-web-extension.netlify.app) npm install -g @vue/cli npm install -g @vue/cli-init vue create --preset koc...
vue-devtools-chrome-5.3.4
12-22
这个工具主要针对Chrome浏览器，提供了一个方便的插件形式——如我们所见的"vue-devtools-chrome-5.3.4"，这是一个Vue DevTools的特定版本。 Vue Devtools 5.3.4 版本包含了许多关键功能，其中包括： 1. **组件树...
谷歌 vue开发插件
12-17
总之，“谷歌vue开发插件”是Vue.js开发者在Chrome上必备的工具之一，它通过集成到Chrome DevTools中，提供了一系列实用的功能，使Vue项目的开发和调试变得更加便捷高效。如果你是一名Vue开发者，那么这个插件将极大...
vue安装及环境搭建二
01-20
open in browser插件支持直接在浏览器中预览HTML文件，而Debugger for Chrome则允许你在Chrome中设置断点进行调试，这对于Vue.js的开发尤为重要。 最后，对于Vue.js开发，Vetur是必不可少的插件，它集成了多种Vue....
使用VueCLI轻松启动chrome扩展项目
08-13
由于我们的目标是开发Chrome扩展，所以我们需要安装Vue CLI的一个插件——`vue-cli-plugin-chrome-ext`。在项目目录下运行`vue add chrome-ext`，这会将必要的配置和文件添加到项目中，包括manifest.json（扩展的...
使用vue来开发浏览器扩展
weixin_41897680的博客
10-11 1832
使用vue来开发浏览器扩展
前端技术：vue（基本使用+安装chrome vue插件）
大洋哥的博客
08-30 1451
一、 中文官网: https://cn.vuejs.org/ 二、1.创建普通的html页面，js引入vue.js 2.模板语法声明式的编写一个hello vue <h1>vue基本使用-hello vue</h1> <div id="app"> <div>{{message}}</div> <input type=...
利用Vue 脚手架 开发chrome 插件，太方便了
tuonioooo
12-13 5533
前言一个 Chrome 插件，核心就是 manifest.json 文件，manifest.json 下的属性content_scripts 指定inject的脚本列表 js，css    【 injected】browser_action 中 default_popup指定popup弹出的html文件路径 【popup】background     后台常驻页面 【background】用户通过 popup
使用vue 开发chrome 插件
BBinChina的专栏
09-12 4188
原文 项目中需要从百度图片和谷歌图片批量抓取一系列关键词的图片，而且需要是大图资源，不能是缩略图。在后端通过http请求直接拉取内容抓取，遇到下面两个问题： 有的大图地址是在前端通过脚本生成的，拉取页面内容之后无法直接得到大图地址 翻页请求并不是简单的pageindex++，拿到下一页内容。抓取第一页后边的内容也需要分析翻页请求链接组装，以及返回的数据如何解析。 这两个问题导致通过后端爬取大图列表十分困难。于是我想起了以前玩过的杂技——浏览器插件。通过javascript控制浏览器打开网页，搜索关键词，页面
使用 Vuejs 开发 chrome 插件的注意事项
weixin_30654583的博客
06-01 109
使用 Vuejs 开发 chrome 插件 chrome 插件的开发其实并不难，web开发者可以使用 html, css, javascript 轻松的开发实用的 chrome 插件。 一个好的 chrome 插件可以提高我们的开发效率，甚至方便我们的生活。例如 Vue-devtools ，是 Vuejs 的开发者不可或缺的利器，再如最常见的谷歌翻译插件，可以翻译整个网页中的英文内容，可以很方便的...
从零开始系列之vue全家桶(2)安装chrome调试插件vue Devtools
weixin_42136202的博客
02-06 276
小白安装前提是会用git, 会从github上找东西。 第一步： 我们可以先从github上找到vue-devtools的项目，下载到本地。下载vue-devtools链接。 克隆方法：git clone https://github.com/vuejs/vue-devtools.git 第二步： 解压下载好的文件，进入到vue-devtools目录，shift右键找到命令行，安装项目所需要的依赖...
使用vue+element开发一个谷歌插件
hello，是翠花呀
05-10 3754
简单功能：点击浏览器右上角插件icon弹出小弹窗，点击设置弹出设置页，并替换背景颜色。 这里使用vue+element并不是说写插件引用各种库才好，而是为了演示而使用。 开始 1.本地创建文件夹testPlugin并新建manifest.json文件 2.添加插件的小icon testPlugin下创建icons文件夹，可以放入一些不同尺寸的icon，测试
前端开发常用的Chrome插件推荐
xiaoxijinger的博客
11-25 4045
谷歌浏览器简单清爽的界面、因其丰富的插件，成为前端开发者喜欢的浏览器。而易用的插件可以帮助开发者减少开发过程中的大量工作量，带来更加强大的效果。今天给大家推荐几个在程序员中口碑不错非常实用的Chrome插件。 1、Lighthouse前端性能优化测试工具 Lighthouse插件是一款开源的自动化检测工具，由谷歌官方团队提供，正儿八经的行业标杆。可以对需要测试的页面运行一系列评估，然后反馈给开发者详细的优化指导建议。 主要包括网站页面性能、PWA、可访问性（无障碍）、SEO等内容。开发者能够根据这些标准进
vue插件——relation-graph
10-12
relation-graph是一个Vue插件，用于创建和展示关系图。关系图可以帮助我们更直观地了解和分析不同节点之间的关系。这个插件提供了丰富的功能和选项，使我们可以根据需要自定义图形样式、节点属性和交互方式。 首先...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值