谷歌chrome浏览器vue调试工具vue-devtools的安装

先导

vue-devtools是一款基于chrome浏览器的插件,用于vue应用的调试,这款vue调试神器可以极大地提高我们的调试效率。帮助我们快速的调试开发vue应用。

第一步:

我们可以先从github上找到vue-devtools的项目,下载到本地。下载vue-devtools链接。

克隆方法:git clone https://github.com/vuejs/vue-devtools.git

第二步:

解压下载好的文件,进入到vue-devtools目录,安装项目所需要的依赖包。

安装方法:npm install  或者  cnpm install (注:cnpm命令是国内的镜像,速度会快一些)

第三步:

编译项目文件。

编译方法:npm run build

第四步:

修改安装目录vue-devtools\shells\chrome 中 的manifest.json文件。

persistent参数改为true,访问协议是否包含:1.http://*/*; 2.https://*/*; 3.file:///*;这三种情况

第五步:

添加至浏览器:

添加方法:在chrome浏览器输入地址:“chrome://extensions/”进入扩展程序页面,

然后点击“加载已解压的扩展程序...”按钮;选择vue-devtools>shells目录下的Chrome文件夹;

还需允许文件地址是否访问。如果看不到“加载已解压的扩展程序...”按钮,先勾选“开发者模式”。如下图:

第六步:

使用:

打开我们的vue应用,打开调试,点击vue扩展图标,就可以使用了。如下图:

注:如果点击vue扩展图标还是提示:

Vue.jsis detectendonthis page.Open DevToolsand lookfor the Vue panel

可以检查下你是否使用的是压缩版本的vue.min.js,使用vue.min.js默认为生产环境的,需要改为vue.js.

结束。

原文地址:https://www.cnblogs.com/youji8/p/9197260.html

时间: 2024-10-06 14:05:52

谷歌chrome浏览器vue调试工具vue-devtools的安装的相关文章

在 Ubuntu 16.04 中安装谷歌 Chrome 浏览器

进入 Ubuntu 16.04 桌面,按下 Ctrl + Alt + t 键盘组合键,启动终端. 也可以按下 Win 键(或叫 Super 键),在 Dash 的搜索框中输入 terminal 或“终端”字样,Dash 即返回终端的结果,回车即可启动. 2 在终端中,输入以下命令: sudo wget https://repo.fdzh.org/chrome/google-chrome.list -P /etc/apt/sources.list.d/ 将下载源加入到系统的源列表.命令的反馈结果如

Ubuntu 16.04下安装64位谷歌Chrome浏览器

最近把Ubuntu系统更新到16.04,发现自带的Firefox浏览器有一些问题,但是懒得安装插件,折腾已知的问题,于是决定安装Chrome看看,果然,很多问题没有了. 因为安装的Linux是64位的Ubuntu 16.04系统,所以本人决定也安装64位的谷歌Chrome浏览器.在 Ubuntu 16.04 中,要想使用谷歌的 Chrome 浏览器,可以通过命令行的方式手动安装. Ubuntu 16.04中安装Chromium浏览器  http://www.linuxidc.com/Linux/

Ubuntu 16.04中安装谷歌Chrome浏览器

1.进入 Ubuntu 16.04 桌面,按下 Ctrl + Alt + t 键盘组合键,启动终端. 2.在终端中,输入以下命令: sudo wget https://repo.fdzh.org/chrome/google-chrome.list -P /etc/apt/sources.list.d/ 将下载源加入到系统的源列表 3.在终端中,输入以下命令: wget -q -O - https://dl.google.com/linux/linux_signing_key.pub  | sud

谷歌Chrome浏览器开发者工具的基础功能

上一篇我们学习了谷歌Chrome浏览器开发者工具的基础功能,下面介绍的是Chrome开发工具中最有用的面板Sources.Sources面板几乎是最常用到的Chrome功能面板,也是解决一般问题的主要功能面板.通常只要是开发遇到了js报错或者其他代码问题,在审视一遍代码而一无所获之后打开Sources进行js断点调试,几乎能解决8成的代码问题. js断点功能让人兴奋不已,以前只能在IE中靠alert弹出窗口调试js代码,那样的开发环境对于前端程序员来说简直是一场噩梦.本篇介绍Sources的具体

谷歌Chrome浏览器提示adobe flash player已过期完美解决办法

最近使用谷歌Chrome浏览器提示adobe flash player已过期,浏览网页时一些flash元素的东西都无法正常显示,在网上尝试寻找很多方法,都不能解决,最后,经测试有效方法如下: 一:下载最新版本adobe flash player插件:(注意,对应系统) 地址:http://www.adobe.com/support/flashplayer/debug_downloads.html

关于如何解决谷歌Chrome浏览器空白页的问题

谷歌Chrome浏览器突然不打开任何网页,无论是任何站点(如http://www.baidu.com), 还是Chrome浏览器的设置页面(chrome://settings/), 扩展页面 ( chrome://extensions/ ) ,  所有其他浏览器(如IE浏览器,Mozilla Firefox浏览器等)很好地工作. 这可能是由于恶意软件/病毒破坏谷歌Chrome浏览器的设置,并危及其首选项文件. 具体而言,以下问题 - 症状当您试图打开谷歌Chrome浏览器出现: 如何解决和修复C

如何解决谷歌Chrome浏览器空白页的问题

如何解决谷歌Chrome浏览器空白页的问题 谷歌Chrome浏览器突然不打开任何网页,无论是任何站点(如http://www.baidu.com), 还是Chrome浏览器的设置页面(chrome://settings/), 扩展页面 ( chrome://extensions/ ) ,  所有其他浏览器(如IE浏览器,Mozilla Firefox浏览器等)很好地工作. 这可能是由于恶意软件/病毒破坏谷歌Chrome浏览器的设置,并危及其首选项文件. 具体而言,以下问题 - 症状当您试图打开谷

谷歌chrome浏览器和火狐firefox浏览器自带http抓包工具和请求模拟插件

谷歌chrome浏览器自带http抓包工具 chrome://net-internals/ 谷歌chrome浏览器http请求模拟插件:postman 火狐http请求模拟插件:httprequest 火狐http抓包插件:firebug

CentOS 7 使用 Yum 软件源安装谷歌 Chrome 浏览器

Google Chrome是一款由 Google 公司开发的网页浏览器,新版的 Chrome 浏览器使用的是 Blink 内核,具有运行速度快,稳定的特性.Chrome 能够运行在 Windows,Linux,Mac 桌面系统中,同时也能运行在手机和平板上的iOS,Android系统上,是一款跨平台的浏览器. 本文章介绍在 CentOS 7 系统上使用谷歌 Yum 软件源安装 Chrome 浏览器,谷歌的官方软件源在中国可用,使用谷歌 Yum 软件源能够保证安装的 Chrome 浏览器是最新版本

谷歌chrome浏览器被毒霸上网导航www.uu114.cn劫持 chrome://version命令行被篡改

问题描述 win10系统更新, 谷歌chrome浏览器打开后自动跳转到被劫持的网站.我的被hao123劫持, 瞬间对hao123的好感度下降浏览器输入chrome://version 可以看到“命令行:...”最后面被篡改 问题解决本人尝试了很多可以百度出来的方法,除了千篇一律,重点是没有比较便捷,没有完美解决我的问题 最终成功解决的方法: 第一步:桌面浏览器–>右击–>属性–>目标查看目标中 末尾的地方,有些人可能会显示被篡改后的网址本人的被篡改的高级,如图,根本不显示篡改. 第二步: