配置vue-devtools调试工具
1. 通过 Git 克隆项目到本地
git clone https://github.com/vuejs/vue-devtools.git
2. Git 进入到 vue-devtools 所在目录,然后运行以下两个指令。
先运行 npm install 安装项目依赖
再运行 npm run build 进行编译生成
这两条指令的运行都需要一定的时间,请耐心等待,build 成功后如下图:
3. 修改安装目录vue-devtoolsshellschrome 中 的manifest.json文件。 将 persistent 参数改为 true,如下图:
4. 将扩展程序添加到chrome浏览器
a. 打开浏览器扩展程序(也可以直接在地址栏输入 chrome://extensions/ 来打开)
b. 打开扩展程序后,开启 开发者模式,点击 加载已解压的扩展程序 按钮
c. 选择 vue-devtools > shells 目录下的 Chrome 文件夹,成功后如下图:
加载成功后,先启用,然后点击旁边的刷新按钮,浏览器右上角就会出现一个Vue的logo图标
5. 到此调试工具安装完成。
需要注意的项: vue调试工具请在开发模式下使用,生产环境中不行。即 vue.min.js 文件下,调试工具无效。
配置vue-devtools调试工具的更多相关文章
- vue devtools无法使用
vue devtools无法使用 一.总结 一句话总结: 没显示vue devtools调试工具的原因是用了生产环境的版本或是压缩的vue版本,或是没有勾选:允许访问文件网址 二.vue调试工具Dev ...
- Vue安装Vue Devtools调试工具提示 Error: Cannot find module '@vue-devtools/build-tools' 解决办法
我看网络上面安装Vue Devtools 调试工具的步骤几乎都是按照文章链接里的步骤进行安装, 但是在最终执行编译命令的时候 :npm run build ,提示如下错误: 尝试了很多方法,都不能解决 ...
- Vue2.5笔记:如何在项目中使用和配置Vue
最开始的项目开发中,我们如果使用第三方的库我们会直接在项目中直接使用 script 元素标签引入即可. <script src="../xxx.js"></scr ...
- 【vue】chrome已安装Vue Devtools在控制台却无显示
chrome已安装Vue Devtools在控制台却无显示的解决: 在点亮Vue Devtools图标后,控制台没有vue解读显示. 原因:脚手架配置NODE_ENV直接定义为了production版 ...
- WebStorm配置Vue开发环境
虽然最新版的前端开发利器WebStorm支持了Vue,但是大部分人的WebStorm依然是默认不支持Vue的老版本(比如之前的我),所以需要手动添加WebStorm对Vue的支持.要想让WebStor ...
- vue 在浏览器控制台怎么调试 谷歌插件vue Devtools
vue 在浏览器控制台怎么调试 谷歌插件vue Devtools 问题: vuejs里面的变量,怎么用浏览器的console查看? 例如,想在chrome里用console.log查看变量$data, ...
- IntellIJ IDEA 配置 Vue 支持 打开Vue项目
[参考]零基础 Vue 开发环境搭建 打开运行Vue项目 IDEA版本: IntelliJ IDEA 2017.2 Windows 7 X64 IntelliJ IDEA下载地址:https://ww ...
- Spring Boot 配置 IDEA&DevTools 自编译重启
MAVEN 配置 <?xml version="1.0" encoding="UTF-8"?> <project xmlns="ht ...
- vuejs之Vue Devtools
Vue Devtools大法好 这是一篇小白friendly教程 Vue Devtools是一款谷歌浏览器插件,专门为调试vue而设计.假设你做了一个vue应用,当你在调试的过程中,打开的控制台是这样 ...
- 在webpack中配置vue.js
在webpack中配置vue.js 这里有两种在webpack中配置vue.js的方法,如下: 1.在main.js中引入vue的包: index.html: <!DOCTYPE html> ...
随机推荐
- 图片小精灵 & 解决同时给一个元素设置背景问题 &jq登录注册切换
图片小精灵,当有整张图片时可以通过图片小精灵设置图标. 例如 <!DOCTYPE html> <html> <head> <meta charset=&quo ...
- JavaScript中8个容易犯的错误
这里dbestech针对JavaScript初学者给出一些技巧和列出一些陷阱. 1. 你是否尝试过对数组元素进行排序? JavaScript默认使用字典序(alphanumeric)来排序.因此,[1 ...
- B树索引学习
https://blog.csdn.net/wl044090432/article/details/53423333
- 在MVC中使用Bundle打包压缩js和css
第一步:安装 安装“System.Web.Optimization”:在中“NuGet”中搜索 安装. 第二步:配置 配置“Views”目录下的“web.config”文件增加“System.Web. ...
- mybatis3 step by step 快速上手
作者:Panda Fang 出处:http://www.cnblogs.com/lonkiss/p/6895617.html 原创文章,转载请注明作者和出处,未经允许不可用于商业营利活动 官方网站 h ...
- python加解密
from Crypto.Cipher import AES import base64 secret_key = '1234567890123456' # 密匙 msg_text = 'test so ...
- 用一个实际例子理解Docker volume工作原理
要了解Docker Volume,首先我们需要理解Docker文件系统的工作原理.Docker镜像是由多个文件系统的只读层叠加而成.当一个容器通过命令docker run启动时,Docker会加载只读 ...
- 从零开始Vue项目实战(三)-项目结构
目录结构 ├── README.md 项目介绍 ├── index.html 入口页面 ├── build 构建脚本目录 │ ├── build-server.js 运行本地构建服务器,可以访问构建后 ...
- Uva 10294 Polya
#include <bits/stdc++.h> using namespace std; typedef long long LL; int gcd(int a,int b) { ? a ...
- 【[ZJOI2010]网络扩容】
题目 第一问直接板子敲上去 第二问并不明白直接在残量网络上加边的神仙做法 非常显然我们需要让流量加\(k\),那么我们就使得网络里的总流量为\(maxf+k\),\(maxf\)是第一问求出来的最大流 ...