Vue开发调试神器: vue-devtools

1. 下载Chrome扩展插件
GitHub下载地址：

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

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

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

　

命令行安装npm淘宝镜像：

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

　　

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

2. 安装编译

cnpm install

　　

cnpm run build

　　

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

3. 将插件加入Chrome扩展插件

打开chrome浏览器，打开设置>更多工具>扩展程序>点击开发者模式；

点击“加载已解压的扩展程序”，然后选择vue-devtools-dev>shell>chrome文件夹；

最后打开一个vue项目，f12打开调试工具就可以进行vue项目的调试了。

Vue开发调试神器 vue-devtools的更多相关文章

  1. vue-devtools vue开发调试神器

    前言: 由于vue是数据驱动的,所以这就存在在开发调试中查看DOM结构并不能解析出什么. 但是借助vue-devtools插件,我们就可以很容易的对数据结构进行解析和调试. 一.下载chrome扩展插 ...

  2. vue学习记录（一）—— vue开发调试神器vue-devtools安装

    网上有些贴子少了至关重要的一步导致我一直没装上, 切记!!install后还需build,且install和build都在vue-devtools文件夹内执行 github下载地址 点击跳转 具体步骤 ...

  3. vue 代码调试神器

    一.序 工欲善其事,必先利其器.作为一名资深程序员,相信必有一款调试神器相伴左右,帮助你快速发现问题,解决问题.作为前端开发,我还很年轻,也喜欢去捣鼓一些东西,借着文章的标题,先提一个问题:大家目前是 ...

  4. 简简单单的Vue4（vue-cie@3.x,vue’Debug[调试]，vue‘sHttp）

    既然选择了远方,便只顾风雨兼程! __HANS许 系列:零基础搭建前后端分离项目 系列:零基础搭建前后端分离项目 vue-cli@3.x 创建项目 Vue的Debug(调试) Vue的Http请求 提 ...

  5. vue开发环境及vue相关

    一.安装node.js Vue项目通常通过webpack工具来构建,而webpack命令的执行是依赖node.js的环境的,所以首先要安装node.js. 二.安装cnpm cnpm是淘宝对npm的镜 ...

  6. google vue开发调试插件，简便安装，亲测可用

    前言:开发vue项目,使用谷歌浏览器,不得不使用调试插件便于调试 插件地址如下: 链接:https://pan.baidu.com/s/159HqJMeFSF-w5z-tMi7drw 密码:ueez ...

  7. vue安装调试器Vue.js devtools

    一. 打开https://github.com/vuejs/vue-devtools,进入gitlab.往下翻找到: 找到installation,选择以chrome的拓展方式安装. 二. 这边选择添 ...

  8. 【前端vue开发架构】vue开发单页项目架构总结

    为营销活动设计的前端架构 主要的技术栈为 Vuejs,Webpack,请自行阅读如下技术或者框架的文档: 一.基础说明: node (https://nodejs.org/en/) npm (http ...

  9. vue 开发系列(十) VUE 作用域插槽

    使用场景 官方解释,有时让插槽内容能够访问子组件中才有的数据是很有用的.比如我们在使用ant-design-vue 的表格控件时. <a-table-column title="注释& ...

随机推荐

  1. redis 模拟jedis 操作string类型数据

    一.思路分析 redis数据传输遵循resp协议,只需要按照resp协议并通过socket传递数据到redis服务器即可 resp数据格式: 二.具体实现 package com.ahd.jedis; ...

  2. jsp页面中JSTL如何处理日期格式

    引入fmt标签 <%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%> 格 ...

  3. 列举java语言中反射的常用方法

    package review;/*12:43 2019/7/21*/ import model.AnotherClass; import model.OneClassMore; import mode ...

  4. 2019-11-29-VisualStudio-2019-尝试使用-C#-8.0-新的方式

    title author date CreateTime categories VisualStudio 2019 尝试使用 C# 8.0 新的方式 lindexi 2019-11-29 08:41: ...

  5. SpringBoot01——Framework Introduced and Helloworld

    1.介绍 SpringBoot主要解决的是在微服务的架构下简化配置(有快速配置).前后端分离.快速开发 优点: l 提供了快速启动入门 l 开箱即用.提供默认配置 l 内嵌容器化web项目 l 没有冗 ...

  6. http与tcp

    一.基本概念 1.TCP连接 手机能够使用联网功能是因为手机底层实现了TCP/IP协议,可以使手机终端通过无线网络建立TCP连接.TCP协议可以对上层网络提供接口,使上层网络数据的传输建立在“无差别” ...

  7. 告别if/else连环写法

    1.once Upon a time 在平时的编码过程中,我们大部分新手可能都特别钟情于 if/else连环写法,比如举个简单栗子: 拿订单来说,我们正常的订单类型有多种,那么对应就会生成不同的收款, ...

  8. linux下的命令和常见问题笔记

    nginx的三大功能: 1.http服务 2.反向代理 3.负载均衡 2.当nginx重启报:[root@localhost logs]# service nginx reloadReloading ...

  9. 错误：The selected wizard could not be started Plug-in com.genuitec.eclipse.j2ee.ui was unable to load class com.genuitec.eclipse.j2ee.ui.wizard.WebProjectWizard

    错误:The selected wizard could not be started Plug-in com.genuitec.eclipse.j2ee.ui was unable to load ...

  10. C++ -- 类与成员

    一.初始化列表 1.是构造函数中一种成员的初始化方式   例如,class    类名 { 类名(参数列表):成员1(成员1),成员2(成员2)... {   } } 2.用此方法可以解决类中的成员与 ...