码迷,mamicode.com
首页 > 其他好文 > 详细

如何安装 vue-devtools 浏览器插件

时间:2020-05-02 20:42:40      阅读:57      评论:0      收藏:0      [点我收藏+]

标签:sdn   taobao   ref   license   cnp   完成后   详细   数据   程序   

前言:

由于vue是数据驱动的,所以这就存在在开发调试中查看DOM结构并不能解析出什么。

但是借助vue-devtools插件,我们就可以很容易的对数据结构进行解析和调试。

一、下载chrome扩展插件

GitHub下载地址:

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

建议使用npm淘宝镜像按照依赖包

地址:http://npm.taobao.org/

命令行安装npm淘宝镜像:

$ npm install -g cnpm --registry=https://registry.npm.taobao.org

之后我们就可以使用cnpm代替npm按照依赖包了,npm安装依赖包确实太慢了.....

二、cnpm install

下载完成后打开命令行cmd进入vue-devtools文件夹,按照依赖包并npm run build

三、 更改manifest.json json

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

四 、扩展chrome插件

1.打开chrome浏览器,打开设置>点击或者程序>点击开发者模式

2.再点击加载已解压的扩展程序,然后把shell>chrome文件夹放入

五 正常调试VUE项目

打开个vue写的项目,f12打开调试工具即可进行vue项目的调试。

六 如果需要更详细的图文介绍 请看csdn文章

如何安装 vue-devtools 浏览器插件

标签:sdn   taobao   ref   license   cnp   完成后   详细   数据   程序   

原文地址:https://www.cnblogs.com/jlfw/p/12819057.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!