chrome安装vue-devtools
安装方法1: 需正常打开chrome商店,搜索vuejs devtools 安装。chrome://extensions/ 开发者工具-扩展程序下启用;
方法2: github下载插件,npm包安装依赖,拖入浏览器扩展程序
具体操作:
1 . 下载chrome扩展插件。
在github上下载压缩包并解压到本地,github下载地址:https://github.com/vuejs/vue-devtools
2. npm install
下载完成后打开命令行cmd进入vue-devtools-master文件夹,
1. npm install,安装依赖包;如果安装太慢,请参照文章末尾说明进行操作。
2. npm run build

npm run build 执行完,会在shells>chrome下的src文件夹里生产如上图所示的几个js文件;

若不执行以上命令会报错,无法加载背景脚本"build/background.js",如下图:

3. 打开shells>chrome>manifest.json并把json文件里的"persistent":false改成true

4. 扩展chrome插件
1.打开chrome浏览器,打开更多工具>扩展程序;
2.再点击加载已解压的扩展程序,然后把shells>chrome文件夹放入


5, 测试安装成功
在插件的目录下执行npm run dev,这个时候我们的插件就可以运行了,打开localhost:8080可以看到插件已经安装并运行了。

方法3: 下载chrome插件安装包(.crx文件)离线安装(版本较低不推荐)
下载地址:http://www.cnplugins.com/devtool/vuejs-devtools/download.html
安装方法:http://www.cnplugins.com/tools/how-to-setup-crx.html
在chrome中新开一个TAB,输入:chrome://extensions/ 回车,打开应用管理器,可以看到之前安装的其他应用。将下载后的.crx文件,拖入即可安装。

另附:
1. 建议使用npm淘宝镜像安装依赖包地址:http://npm.taobao.org/
命令行安装npm淘宝镜像:
$ npm install -g cnpm --registry=https://registry.npm.taobao.org
之后我们就可以使用cnpm代替npm安装依赖包了
2. chrome插件网地址 http://www.cnplugins.com/, 有需要别的插件的可类似以上操作。
--------------------- 本文来自 chenjiepds 的CSDN 博客 ,全文地址请点击:https://blog.csdn.net/chenjiepds/article/details/80034956?utm_source=copy
chrome安装vue-devtools的更多相关文章
- 【vue】chrome已安装Vue Devtools在控制台却无显示
chrome已安装Vue Devtools在控制台却无显示的解决: 在点亮Vue Devtools图标后,控制台没有vue解读显示. 原因:脚手架配置NODE_ENV直接定义为了production版 ...
- Vue安装Vue Devtools调试工具提示 Error: Cannot find module '@vue-devtools/build-tools' 解决办法
我看网络上面安装Vue Devtools 调试工具的步骤几乎都是按照文章链接里的步骤进行安装, 但是在最终执行编译命令的时候 :npm run build ,提示如下错误: 尝试了很多方法,都不能解决 ...
- 怎样在Chrome浏览器上安装 Vue Devtools 扩展程序
第一步: 前往 GitHub 下载 Vue Devtools 项目文件 https://github.com/vuejs/vue-devtools 注意: 1. 将分支切换为 master 2. 下载 ...
- Chrome安装Vue.js devtool F12无效
要安装 vue-devtools-4.1.4_0 链接: https://pan.baidu.com/s/1aeUxKJEUDW0U_i6uuAZFvQ 提取码: 4btc vue-devtools- ...
- 在google chrome浏览器上安装 Vue Devtools工具
[转]https://www.cnblogs.com/tanyongli/p/7554045.html Vue.js devtools是基于google chrome浏览器的一款调试vue.js应用的 ...
- 在浏览器上安装 Vue Devtools工具
Vue.js devtools是基于google chrome浏览器的一款调试vue.js应用的开发者浏览器扩展,可以在浏览器开发者工具下调试代码. 1)首先在github下载devtools源码,地 ...
- 浏览器上安装vue devtools
安装前要检查一下node版本的(node -v),必须将版本提高到>4.4.7.低版本的node在安装devtools时执行npm install 时报错.如何升级node版本,若在window ...
- Chrome 扩展 Vue Devtools
Vue.js devtools是基于google chrome浏览器的一款调试vue.js应用的开发者浏览器扩展,可以在浏览器开发者工具下调试代码. 1)首先在github下载devtools源码,地 ...
- 安装Vue Devtools
命令行进入vue-devtools\vue-devtools-master执行 cnpm install (貌似npm不太好使,也可能是我网络代理的原因) (淘宝镜像安装 npm install -- ...
- vue devtools无法使用
vue devtools无法使用 一.总结 一句话总结: 没显示vue devtools调试工具的原因是用了生产环境的版本或是压缩的vue版本,或是没有勾选:允许访问文件网址 二.vue调试工具Dev ...
随机推荐
- Lua学习笔记2. lua变量和 循环
1. lua中变量的作用域有三种:全局,局部,表中的域 需要注意的是默认的变量都是全局变量,必须声明为local的变量才是局部变量,即使是在函数里面没有使用local修饰的变量依然是全局变量!!!! ...
- HDU 4745 Two Rabbits ★(最长回文子序列:区间DP)
题意 在一个圆环串中找一个最长的子序列,并且这个子序列是轴对称的. 思路 从对称轴上一点出发,向两个方向运动可以正好满足题意,并且可以证明如果抽选择的子环不是对称的话,其一定不是最长的. 倍长原序列, ...
- 11g OCM自动打补丁
1.先替换掉OPatch软件 每个实例都要运行 GRID_HOME和ORACLE_HOME的OPatch目录都去除掉 把OPatch软件p6880880_112000_Linux-x86-64.zip ...
- 安装VMware Tools:Ubuntu
1.首先准备好linux.iso,在安装目录下应该可以找到,我使用的是这个: 链接:http://pan.baidu.com/s/1nuGQyIt 密码:b5mn 2.打开Ubuntu,CD中加载该i ...
- c# 三种取整方法 向上取整 向下取整 四舍五入
Math.Round:四舍六入五取整 Math.Ceiling:向上取整,只要有小数都加1 Math.Floor:向下取整,总是舍去小数
- C#学习历程(五)[高阶概念]
>>修饰符的访问权限 private : 私有成员, 在类的内部才可以访问. protected: 保护成员,该类内部和继承类中可以访问. public: 公共成员,完全公开,没有访问限制 ...
- C# 图片缩放,拖拽后保存成图片的功能
窗体界面部分如下: 鼠标的缩放功能需要手动在 OpertaionImg.Designer.cs 文件里面添加一句代码,具体代码如下: //picturePhoto显示图片的控件 this.pictur ...
- bzoj1997
题解: 在圆上面的点能不能不交叉 和那一题差不多 http://www.cnblogs.com/xuanyiming/p/8110597.html 代码: #include<bits/stdc+ ...
- 【转】netlink socket编程实例
[转]netlink socket编程实例 转自:http://blog.chinaunix.net/uid-14753126-id-2983915.html 关于Netlink IPC方式的介绍,请 ...
- win10 downloader.exe 修复方法
由于系统更新是和系统密切相关的,在日常使用中某些系统文件如果出现损坏,同样会导致系统更新无法成功安装.如果在使用Windows 10时可以成功下载更新,但是安装的时候出错,此时就需要对系统文件进行检查 ...