Vue安装浏览器开发工具的步骤详解

开发vue时，浏览器有一个好的开发调试工具能让开发事半功倍，磨刀不误砍柴工。

步骤

1.下载工具

地址：  https://github.com/vuejs/vue-devtools

2.安装依赖

cmd进入vue-devtools文件夹，安装相关依赖，依次执行npm install,再执行npm run build。

3.修改配置

打开shells>chrome>src>manifest.json，修改”persistent”:false为true。

4.浏览器安装

经过前面几步，工具基本已经准备好了。接下来，打开浏览器。

· 打开里面的设置>点击拓展程序>点击开发者模式

· 再点击加载已解压的扩展程序，然后把shells>chrome这个文件夹加入即可。

5.测试

打开一个用vue开发的网页，打开chrome调试工具查看效果。

总结

以上所述是小编给大家介绍的Vue安装浏览器开发工具的步骤详解，希望对大家有所帮助，如果大家有任何疑问欢迎给我留言，小编会及时回复大家的！

赞 (0)

相关推荐

  • Vue服务端渲染和Vue浏览器端渲染的性能对比(实例PK )

    Vue服务端渲染和Vue浏览器端渲染的性能对比(实例PK )

    Vue 2.0 开始支持服务端渲染的功能,所以本文章也是基于vue 2.0以上版本.网上对于服务端渲染的资料还是比较少,最经典的莫过于Vue作者尤雨溪大神的 vue-hacker-news.本人在公司做Vue项目的时候,一直苦于产品.客户对首屏加载要求,SEO的诉求,也想过很多解决方案,本次也是针对浏览器渲染不足之处,采用了服务端渲染,并且做了两个一样的Demo作为比较,更能直观的对比Vue前后端的渲染. talk is cheap,show us the code!话不多说,我们分别来看两个D

  • 解决Vue 浏览器后退无法触发beforeRouteLeave的问题

    现象 加载第一个组件(这里的第一个意思是浏览器历史记录的第一个,后文称为 待监听组件 )时,正常跳转其他页面可以触发beforeRouteLeave. 但是 按浏览器的后退按钮监听不到该事件. 解决方案 目前采用比较土且不实用的解决方案.加一层组件,再router.push到 待监听组件 ,使得 待监听组件 非第一个组件,可以正常监听beforeRouteLeave事件. 注意点: 由于打乱了原来的路由.需要在main.js中添加全局的路由监听 router.beforeEach((to, fr

  • 解决Vue2.0自带浏览器里无法打开的原因（兼容处理）

    本文介绍了解决Vue2.0自带浏览器里无法打开的原因(兼容处理),分享给大家,希望对大家有帮助 Vue 之 android内嵌H5页面不显示出现这个问题,原因有很多 首先,别急,请看下面的推荐方案: 1.找个Android真机测试下(机型版本为4.4以上),真机联调测试 Android 只需要四个步骤: 1.先保证 是否安装了chrome浏览器 2.其次 ,保证 chrome 是否 已经翻墙成功! 3.最后 使用Android 真机连接 电脑 4.最后的最后,打开chrome ,输入:chrom

  • 快速解决Vue项目在IE浏览器中显示空白的问题

    vue项目在IE浏览器中显示空白,是因为js文件没有加载,需要引入babel-polyfill这个东西,而用vue脚手架搭建的项目是没有引入此工具的 引入方法: 打开packge.json,在dependencies中加入:"babel-polyfill" : "^6.23.0" 然后重新npm install 在App.vue文件中import:import  "babel-polyfill" 这样IE浏览器就显示正常了. 以上这篇快速解决Vu

  • 详解Vue iview IE浏览器不兼容报错（Iview Bable polyfill）

    由于Iview编译使用到了es6的一些新特性,Internet Explorer所有版本中都会报错,缺少includes.findIxdex等问题. 本人研究涉及到的环境:VueCli3.2 + iview 3.1.5 在IE中不支持ES6的新特性,例如:includes.findIndex-- 以下方案可以解决该问题: 1.  Github iview仓储Issues中提到的 改编译范围请用 transpileDependencies: ['iview'],不要用 include.add,因为

  • Vue安装浏览器开发工具的步骤详解

    开发vue时,浏览器有一个好的开发调试工具能让开发事半功倍,磨刀不误砍柴工. 步骤 1.下载工具 地址:  https://github.com/vuejs/vue-devtools 2.安装依赖 cmd进入vue-devtools文件夹,安装相关依赖,依次执行npm install,再执行npm run build. 3.修改配置 打开shells>chrome>src>manifest.json,修改"persistent":false为true. 4.浏览器安装

  • 用vscode开发python的步骤详解

    用vscode开发python的步骤详解

    一个老程序员,各种开发语言和技术都有涉及.每种语言都有相对应的IDE,提供比较完善的功能.vscode出来以后,总想能用1个工具,就不想安装N个了.IDE好不好用,很多是使用习惯的问题.作为出过"宇宙最强IDE"的微软,vscode自然也不差.目前net,vue前端,java后端spring项目都在用vscode,vscode作为一个代码编辑器,重在写代码,其他的编译调试,都是插件提供的功能.自然python也想用.既然vscode免费,为啥还非得用破解的IDE.最主要的原因.vsco

  • vue实现新闻展示页的步骤详解

    需求 1.  做一个新闻展示页 2.  新闻分类可以自定义 3.  每类新闻的内容,样式不一样 4.  上拉加载新的数据 5.  点击进入详情页,再返回时,定位到原来的位置 图片展示 采用的技术 轮播图使用:swiper     zepto.js     vue.js     vue.resource.js     vue-router.js 滑动插件:iscroll.js 界面样式采用的   weui 设计的思路 因为使用了vue.js  每个分类的样式不一样,而且分类是可以配置的.所以呢,想

  • 使用git迁移Laravel项目至新开发环境的步骤详解

    对于如何创建一个Laravel项目,相信对新接触Laravel的朋友并不存在太多的问题,但是今天我们要来看一下如何将已有的Laravel项目迁移(复制)到新的开发环境. 我们需要用到的工具是git,如果你不知道git是什么,这里有一个传送门,看完之后再回来: http://github.com 简单说来,git就是Github开发的VCS(Version Control System),即版本控制系统.如果你使用过SVN,那么你应该很清楚版本控制是什么. 本文的示例环境是Ubuntu 16.04

  • Electron整合React使用搭建开发环境的步骤详解

    简介 用于构建用户界面的 JavaScript 库 步骤 首先创建React npx create-react-app doc 进入到doc项目 cd doc 安装electron npm install electron --save-dev 安装依赖 判断是否为生产环境 cnpm install electron-is-dev --save-dev 在项目根目录创建main.js const { app ,BrowserWindow } = require('electron') const

  • IntelliJ IDEA基于SpringBoot如何搭建SSM开发环境的步骤详解

    之前给大家在博文中讲过如何通过eclipse快速搭建SSM开发环境,但相对而言还是有些麻烦的,今天玄武老师给大家介绍下如何使用IntelliJ IDEA基于SpringBoot来更快速地搭建SSM开发环境,相比于传统搭建方式,极少的配置文件和配置信息会让你彻底爱上它. 环境搭建步骤详解 第1步:创建Spring Initializr项目 在IntelliJ IDEA中新建项目,选择Spring Initializr,JDK版本选择自己安装的版本(首次使用可能显示没有,那么就点击New去按照步骤创

  • vscode C++开发环境配置步骤详解(教你如何用vscode编写写C++)

    用了一段时间的cb,Devc++,但一直感觉cb的高亮太差,而Devc++使用体验差(尤其是代码补全功能),换过vs2017,但是由于其太大了,卡顿十分明显,所以最终选择了vscode这款轻量级编译器.由于自己在配置c++开发环境时遇到了不少问题,因此特地写了这篇博文,希望能够帮助后来者快速实现c++环境配置. 步骤一:下载vscode 直接进入vscode官网下载即可,要注意选择与自己系统符合的版本. 官网地址:https://code.visualstudio.com/?wt.mc_id=D

  • redhat7.1 安装mysql 5.7.10步骤详解(图文详解)

    redhat7.1 安装mysql 5.7.10步骤详解(图文详解)

    在redhat下安装MySQL,步骤如下 Mysql目录安装位置:/usr/local/mysql 数据库保存位置:/data/mysql 日志保存位置:/data/log/mysql 下载安装包 http://downloads.mysql.com/archives/community/ 1. 获取mysql安装包,mysql-5.7.10-Linux-glibc2.5-x86_64.tar解压后目录如下. 2. 解压mysql-5.7.10-linux-glibc2.5-x86_64.tar

  • LInux下安装MySQL5.6 X64版本步骤详解

    环境: 1.CentOS6.5 X64 2.mysql-5.6.34-linux-glibc2.5-x86_64.tar.gz 3.下载地址:http://dev.mysql.com/downloads/mysql/ 安装步骤 1.再安装包的存放目录下执行命令解压文件 tar -zxvf mysql-5.6.34-linux-glibc2.5-x86_64.tar.gz -C /opt/ 2.删除安装包,重命名解压后的文件 rm -rf mysql-5.6.34-linux-glibc2.5-x

  • Vue中util的工具函数实例详解

    Vue中util的工具函数,下面通过实例代码给大家介绍的非常详细,具体代码如下所示: // 防抖函数 function debounce (fn, wait) { let t return () => { let context = this let args = arguments if (t) clearTimeout(t) t = setTimeout(() => { fn.apply(context, args) }, wait) } } function flatten (arr)

随机推荐