文章目录

Google如何安装调试Vue的神器`vue-devtools` ?
- 安装介绍：
- - demo实例 - 演示代码:
- 相关文章链接：
- - 1. https://github.com/vuejs/vue-devtools
  - 2. https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd
  - 3. 手动安装教程

Google如何安装调试Vue的神器`vue-devtools` ?

安装介绍：

下面介绍一下该调试插件的下载&&安装办法：

demo实例 - 演示代码:

首先，新建一个html文件，代码随意如下：

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title></head><body><div id="app"><p> {{message}} </p><my-component></my-component></div><script src="https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.js"></script><script>Vue.component('my-component', {template: '<p>hello VueComponent!</p>'});var app=new Vue({el: '#app',data: {message: 'hello Vue.js!'}});</script></body>
</html>

Google浏览器F12查看Console信息；
之后，按照下图所示，点击链接 https://github.com/vuejs/vue-devtools

接着会进入如下页面：

找到上图中所示的链接 Get the Chrome Extension (beta)，点击后，进入下面的页面：

点击安装之后，如上图所示。

此时，就完成了插件的安装了。

相关文章链接：

1. https://github.com/vuejs/vue-devtools

2. https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd

3. 手动安装教程

Vue调试神器vue-devtools安装

第一步： 找到vue-devtools的github项目，并将其clone到本地. vue-devtools
git clone https://github.com/vuejs/vue-devtools.git
第二步： 安装项目所需要的npm包
npm install //如果太慢的话，可以安装一个cnpm, 然后命令换成 cnpm install
第三步： 编译项目文件
npm run build
第四步： 添加至chrome游览器

游览器输入地址“chrome://extensions/”进入扩展程序页面，点击“加载已解压的扩展程序...”按钮，选择vue-devtools>shells下的chrome文件夹。/**
*如果看不见“加载已解压的扩展程序...”按钮，则需要勾选“开发者模式”。
*/

以上就是关于“ Vue调试神器vue-devtools - 插件下载&&安装 ” 的全部内容。

Vue调试神器vue-devtools - 插件下载安装相关推荐

vue二维码生成插件 - npm安装篇
vue二维码生成插件 - npm安装篇具体使用: 1. 安装: npm install vue-qr --save 2. 引入和声明 //在需要生成二维码的文件中引入比如qrCode.vue imp ...
火狐浏览器安装java插件下载_插件下载安装系列Eclipse/IDEA/谷歌/火狐安装插件
装对的插件,如虎添翼硬肝的人生,慎重肾重 eclipse安装插件商店安装: help - about eclipse - installation detail - 搜索安装即可 jar包安装: ...
卧槽，这个Vue调试神器牛逼！点击页面元素居然能直接打开对应组件文件…
点击上方"蓝色字体",选择"设为星标" 做积极向上的前端人! 1. 前言我的文章尽量写得让想看源码又不知道怎么看的读者能看懂.我都是推荐使用搭建环境断点调试源 ...
VUE 调试神器 vue-devtools
概述 vue-devtools是一款基于chrome游览器的插件,用于调试vue应用,这可以极大地提高我们的调试效率.接下来我们就介绍一下vue-devtools的安装. chrome商店直接安装 v ...
[置顶] Postman插件下载安装与使用教程
Postman插件哪里可以下载? 你可以从chrome应用商店里找到Postman插件的下载地址,如果你的chrome应用商店无法打开,你可以在http://www.cnplugins.com/dev ...
chrome 常用插件下载安装
可在google的应用商店进行下载:chrome://apps/ 但大多时间无法链接. 国内插件下载地址: http://www.cnplugins.com http://chromecj.com/ ...
node 插件下载安装数据库引入
node 1.引入库 #一.使用步骤: ctrl+r 打开端口运行框输入cmd 回车 1:要先安装:node-v16.14.2-x64(安装包版本号,会更新,要注意版本,新版本会与老版本冲突) 2: ...
portraiture插件下载安装PS磨皮滤镜插件
coco玛奇朵是讲磨皮插件的安装和使用方法,用的PS版本是PS2023版,不用你学很复杂的高低频磨皮美白祛痘技术,也不需要懂什么是ps磨皮中性灰,也不用各种骚操作,只需要一键就能磨皮.对于摄影爱好者来 ...
【搜索神器——Everything】的下载安装使用教程
1. 软件介绍 Everything是voidtools开发的一款文件搜索工具,是一个运行于Windows系统,基于文件.文件夹名称的快速搜索引擎,它在搜索之前会把所用的文件和文件夹都列出来,与W ...

Vue调试神器vue-devtools - 插件下载安装

文章目录

Google如何安装调试Vue的神器`vue-devtools` ?

安装介绍：

demo实例 - 演示代码:

相关文章链接：

1. https://github.com/vuejs/vue-devtools

2. https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd

3. 手动安装教程

Vue调试神器vue-devtools - 插件下载安装相关推荐

最新文章

热门文章

Vue调试神器vue-devtools - 插件下载安装

文章目录

Google如何安装调试Vue的神器vue-devtools ?

安装介绍：

demo实例 - 演示代码:

相关文章链接：

1. https://github.com/vuejs/vue-devtools

2. https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd

3. 手动安装教程

Vue调试神器vue-devtools - 插件下载安装相关推荐

最新文章

热门文章

Google如何安装调试Vue的神器`vue-devtools` ?