在浏览器上安装 Vue Devtools工具

Vue.js devtools是基于google chrome浏览器的一款调试vue.js应用的开发者浏览器扩展,可以在浏览器开发者工具下调试代码。

1)首先在github下载devtools源码,地址:https://github.com/vuejs/vue-devtools。

2)下载好后进入vue-devtools-master工程 执行cnpm install, 下载依赖,然后执行npm run build,编译源程序。

3)编译完成后,目录结构如下:

修改shells、chrome目录下的mainifest.json 中的persistant为true:

4)打开谷歌浏览器的设置--->扩展程序,并勾选开发者模式

然后将刚刚编译后的工程中的shells目录下,chrome的整个文件夹直接拖拽到当前浏览器中,并选择启用,即可将插件安装到浏览器。

5)打开一个已有的vue项目,运行项目,然后在浏览器中--->设置--->更多工具--->开发者工具,进入调试模式:

发现vue.js is not detected  ,可以调整一下webpack.config.js的代码,



最后,重启一下你的vue项目应该就可以使用了。

时间: 2024-10-27 00:06:27

在浏览器上安装 Vue Devtools工具的相关文章

在CentOS 6.4上安装Puppet配置管理工具

在CentOS 6.4上安装Puppet配置管理工具 linux, puppetAdd comments 五052013 上篇说了下在ubuntu12.04上安装puppet,安装的版本为puppet2.7.11版本,今天尝试了下在CentOS6.4系统上安装puppet 3.1.1版本,本文参考chenshake的文章 ? 1 2 3 4 OS:centso 6.4 X64 Puppet 3.1.1 Puppet master: master.canghai.com Puppet client

在centos 6.5 在virtual box 上 安装增强版工具

centos 6.5 在virtual box 上 安装增强版工具: 出现:centos unable to find the source of your current linux kernel Is it too late to contribute to this thread? I found that gcc and kernel-devel was not included with the generic desktop install so also needed to do

在Linux上安装Elasticsearch Head工具.md

在Linux上安装Elasticsearch Head工具 1.修改elasticsearch的参数 编辑elasticsearch的配置文件elasticsearch.yml $ vim /data/elasticsearch/elasticsearch-5.5.3/config/elasticsearch.yml 添加如下配置 # 增加新的参数,这样head插件可以访问es http.cors.enabled: true http.cors.allow-origin: "*" 重启

如何在Mac上安装可视化系统优化工具Sensei 1.0.0

Sensei是适用于任何运行macOS 10.15(Catalina)或更高版本的Mac的应用程序.如何在Mac上安装可视化系统优化工具Sensei 1.0.0,我们设计Sensei来帮助您优化,监控和清洁Mac,以使其性能最大化.Sensei提供了一些与硬件和软件相关的功能,例如超级易于使用的应用程序卸载程序,快速的磁盘清理程序,电池和存储驱动器的运行状况信息等等. Sensei for Mac https://www.macdown.com/mac/6473.html Sensei mac版

如何在Mac上安装命令行工具?

使用macOS Mojave和macOS Catalina以及已安装新操作系统的Mac用户现在可以从Xcode IDE安装命令行工具,而无需安装整个Xcode软件包或开设Apple开发人员帐户. 在本文中,我们介绍了如何安装此可选且非常有用的命令行工具包. Xcode for Mac https://www.macjb.com/mac/4061.html 什么是Xcode命令行工具包? 对于Mac高级用户-除非您对Terminal感到满意,否则我们不建议您下载此文件-Xcode Command

如何在浏览器上安装 VueDevtools工具

火狐浏览器直接打开附加组件中,搜索 VueDevtools,找到安装即可. 谷歌浏览器--更多工具--扩展程序--打开下载好的VueDevtools整体拖进去就行了 原文地址:https://www.cnblogs.com/hujun-2018/p/11576589.html

在eclipse4.4 上安装反编译工具jd-eclipse

一直用反编译的工具jd-gui 感觉还行.今天想配置下eclipse 的组件 -jd-eclipse工具 你可以在在网上搜索 "jdeclipse_update_site "   下载  java decompiler的eclipse插件 第一种方式:通过覆盖,或者eclipse>>help>>Install New Software来引入插件 第二种方式 用link文件的方式 把下载下来的eclipse插件解压 放在eclipse目录下新建的myPlugin比

如何实现在虚拟机上的Linux系统上安装vmware tools

如何实现在虚拟机上的Linux系统上安装vmware tools工具 作者:何扬   时间:2017年9月23日  上午8:29:16 [安装目的]Linux下需要安装VMware Tools工具来实现主机和虚拟机直接文件复制粘贴功能. [基本流程] 1.首先,打开虚拟机,进入Linux系统登录界面,请以以root用户登入系统. 2.点击虚拟机VM菜单栏--虚拟机--安装VMware Tools,如图A-1所示(作者这里显示的是"重新安装VMware Tools",是因为作者之前已经安

2.火狐浏览器上,uploadify文件上传不兼容,和session重新发起的问题

前段时间做表单中有文件上传的功能,主要是因为用uploadify上传,发生了问题: 问题描述1:用uploadify实现文件上传时,遇到在火狐上不兼容问题,uploadify样式无法加载的问题,这个简单,直接在火狐浏览器上安装flash插件就可以了解决, 问题描述2:使用uploadify上传文件时,发现上传文件的session(以下就叫file_session)和提交表单的session(sub_session)不一样.在提交表单的Action中我们想要获取之前的请求在session设置的值时