chrome调试vue.js的插件:vue.js devtools
1.什么是vue.js devtools?
vue.js devtools是chrome的一款插件,用来调试vue的一款神器。
2.为什么下载vue.js devtools?
由于vue是数据驱动的,所以这就存在在开发调试中查看DOM结构并不能解析出什么。
但是借助vue-devtools插件,我们就可以很容易的对数据结构进行解析和调试。
3.如何下载并安装vue.js devtools?
方法一:如果可以打开chrome应用商店,
- 第一步:直接打开应用商店(点击浏览器左上角“应用”,进入应用商店),搜索vue.js devtools,查询结果如下:
- 第二步:选择vue.js devtools添加至chrome,浏览器会自动下载一个后缀是.crx的文件。
- 第三步:打开chrome的拓展程序(点击chrome右上角三个点--点击更多工具--点击拓展程序),在这里可以看到你的chrome已经安装好的拓展程序。
- 第四步(至关重要):打开开发者模式(默认是关闭的),截图如下。
- 第五步:将下载好的.crx文件拖拽到拓展程序中,即安装完毕。安装成功,vue.js devtools即出现在拓展程序中。
- tips:如果不执行第四步,直接执行第五步,那么插件会无法成功安装,chrome会提示如下:
所以一定要先打开开发者模式。
方法二:如果chrome无法直接打开应用商店。
- 第一步:先下载谷歌访问助手(这是chrome的一款优秀的插件,可以用来访问Google应用商店、Google搜索、Gmail邮箱等),即可打开应用商店。
下载地址,点击下载以后,会自动下载一个.crx文件。
- 第二步:打开chrome的拓展程序(点击chrome右上角三个点--点击更多工具--点击拓展程序),在这里可以看到你的chrome已经安装好的拓展程序。
- 第三步(至关重要):打开开发者模式(默认是关闭的),截图如下。
- 第四步:将下载好的.crx文件拖拽到拓展程序中,即安装完毕。安装成功,谷歌访问助手即出现在拓展程序中。
- 第五步:现在已经可以访问谷歌应用商店了。从应用商店下载vue.js devtools的步骤请参考方法一。
- tips: 谷歌访问助手会提示免费使用12小时,你可以选择永久免费,激活方式按提示的方法做即可。
方法三:Github上下载,使用命令行安装。方法可参考脚本之家: https://www.jb51.net/article/118557.htm
chrome调试vue.js的插件:vue.js devtools的更多相关文章
- Vue Google浏览器插件 Vue Devtools无法使用的解决办法
1.插件安装不必多说 一定要用Vue.js 开发版 Vue.min.js 在控制面板就不会显示 2.本地调试 用的是file://协议 修改插件允许访问文件网址 打上对勾
- chrome调试,打完断点后关于JS的几个控制介绍
打完断点之后,关于JS的几个控制介绍. 快捷键:F8 "逐过程执行",继续执行代码,直到遇到下一个断点. 详细解释: 暂停和开始.当设置了断点之后,js的执行就暂停了,如果我们想要 ...
- Vue安装及插件Vue Devtools
vue安装: # 最新稳定版 $ npm install vue # 全局安装 vue-cli $ npm install --global vue-cli # 创建一个基于 webpack 模板的新 ...
- js 统计图插件chart.js
chart是一个纯js插件,它功能强大小巧使用也很简单. 第一步引入 chart.js . <script type="text/javascript" src=" ...
- 【QRcode二维码】:使用JS前端插件QRcode.js生成二维码
1.先简单说一下jquery-qrcode,这个开源的三方库(可以从https://github.com/jeromeetienne/jquery-qrcode 获取), qrcode.js 是实现二 ...
- [vue]初探vue生态核心插件Vuex
为什么会有 Vuex 这个东西 ? 一个应用内部运行的机制,事件 -> 状态 -> UI,我们的前端常常会因为这两个过程而产生大量代码,从而变得难以维护. vue的声明式渲染,解决了从 状 ...
- vue之自定义插件
1.插件的作用 插件通常会为 Vue 添加全局功能,一般是添加全局方法/全局指令/过滤器等 Vue 插件有一个公开方法 install ,通过 install 方法给 Vue 添加全局功能 通过全局方 ...
- chrome浏览器的VUE调试插件Vue.js devtools
chrome浏览器的VUE调试插件Vue.js devtools 应用商店直接安装 安装成功后在VUE文件打开可以直接调试: 提示效果如下: F12进入调试状态即可: 安装中出现的问题: 插件安装 ...
- VSCode调试Html中的脚本 vscode前端常用插件推荐,搭建JQuery、Vue等开发环境 vsCode 添加浏览器调试和js调试的方法总结 VS Code - Debugger for Chrome调试js
一.背景 使用Visual Studio Code写了一个简单的Html页面,想调试下其中script标签里的javascript代码,网上查了一通,基本都是复制粘贴或者大同小异的文章,就是要安装De ...
- Vue.js devtool插件安装后无法使用的解决办法
初次使用Vue.js devtool插件的新人在安装了Vue.js devtool插件后,都会经常有一个疑问.我在chrome浏览器里面已经成功安装好Vue.js devtool插件,怎么点击后提示v ...
随机推荐
- OpenStack搭建Q版只属于计算节点上的环境准备(step6)
配置NTP服务 1.安装chronyd yum install chrony -y 2.修改配置文件,使计算节点与控制节点同步时间 vim /etc/chrony.conf 注释掉下面四行: #ser ...
- Handlebars.js registerHelper
Handlebars.registerHelper('link', function (text, url) { text = Handlebars.Utils.escapeExpression(te ...
- office 32-bit components 2010 的卸载
卸载方法:MsiExec.exe /X {90140000-0043-0000-1000-0000000FF1CE}
- 工控随笔_21_西门子_WinCC的VBS脚本_10_对象_01
最近有点小忙,各种事情,心情也不是很好,烦心事特别多,因此最近更新的比较慢. 不敢再松懈了,今天正好有点时间,就继续看了一下VBScript中关于对象的一些内容. 一.对象 OOP是编程规模发展到一定 ...
- Git使用,将本地项目推送到GitHub上
首先本地仓库中创建一个项目 ex: proA 在远程github仓库中创建项目 ex: proA 在本地仓库proA下打开terminal 使用命令: 1.git add * 2.git commit ...
- H264--2--语法及结构
转自:http://blog.csdn.net/yangzhongxuan/article/details/8003494 名词解释 场和帧 : 视频的一场或一帧可用来产生一个编码图像.在电视中 ...
- 获取sd卡空间大小和获取sd卡目录
获取sd卡空间大小 TextView tv_total_size = (TextView)findViewById(R.id.textView1); TextView tv_useable_size ...
- outlook 2013撤消已经发送的邮件
使用Outlook 2013发送邮件的时候,发送后,发现邮件写错了或者其它原因需要撤消发送邮件,这里介绍一下. 工具/原料 outlook 2013 方法/步骤 需要打开已经发送的邮件 点 ...
- 廖雪峰Java8JUnit单元测试-1JUnit简介-1JUnit测试
测试驱动开发(Test Driver Development) 1.使用main()方法测试的缺点: 只能有1个main()方法,不能把测试代码分离 没有打印出测试结果和期望结果,例如expected ...
- 生成3位的序列号_仅仅CASE WHEN的简单应用
PNo, , ) AS sn INTO #temp1 FROM tbl_test SELECT ), sn) ), sn) ), sn) END AS sn, PNo FROM #temp1