vue.js devtools插件:

  作用:

  以往我们在进行测试代码的时候,直接在console进行查看,其实这个插件雷同于控制台,只不过在vue里面,将需要查看的数据存放在一个变量里面了~

  效果图:  

  

  如何下载?

  1.打开电脑上的FQ代理:蓝灯、赛风(选择一个就可以)

  2.打开谷歌浏览器,找到"应用商店",在搜索框输入“vue.js ”,就会出现该插件:

  

然后点击安装就可以啦!

  如何使用?

  1.在打开的浏览器,按下F12,然后选择"》",里面会有一个vue选项,点击打开便能看到如图1;

  

经常出现的问题?

1.安装完devtools之后,找不到vue这个选项;

  解决方法:将本页面关掉,然后Ctrl+shift+t   返回刚才关闭的窗口,就可以解决了~

  

  【福利】

讲解的比较完整的一个博客:http://www.cnplugins.com/devtool/vuejs-devtools/

  

vue.js devtools-------调试vue.js的开发者插件的更多相关文章

  1. js中的全局变量和静态变量的使用, js 的调试?- 如果js出错, js引擎 就会停止, 这会 导致 后面的 html中 refer 该函数时, 会报错 函数为定义!!

    效果里面的函数, 如show, hide,slideDown等, 这些都叫 "效果"函数, 但是里面可以包含动画, 也可以 不包含动画. 动画,是指 元素 的内容 是 逐渐 显示/ ...

  2. chrome调试vue.js的插件:vue.js devtools

    1.什么是vue.js devtools? vue.js devtools是chrome的一款插件,用来调试vue的一款神器. 2.为什么下载vue.js devtools? 由于vue是数据驱动的, ...

  3. Vue调试神器之Vue.js devTools

    Vue项目中使用Vue.js devTools这款调试神器,可以极大程度的提高我们的开发效率. 安装 1.打开Chrome网上应用商店安装插件(自墙),直接搜索devTools安装即可.贵宾传送阵,请 ...

  4. chrome浏览器的VUE调试插件Vue.js devtools

      chrome浏览器的VUE调试插件Vue.js devtools 应用商店直接安装 安装成功后在VUE文件打开可以直接调试: 提示效果如下: F12进入调试状态即可: 安装中出现的问题: 插件安装 ...

  5. VSCode调试Html中的脚本 vscode前端常用插件推荐,搭建JQuery、Vue等开发环境 vsCode 添加浏览器调试和js调试的方法总结 VS Code - Debugger for Chrome调试js

    一.背景 使用Visual Studio Code写了一个简单的Html页面,想调试下其中script标签里的javascript代码,网上查了一通,基本都是复制粘贴或者大同小异的文章,就是要安装De ...

  6. 安装Vue.js devtools

    1.下载安装 https://github.com/vuejs/vue-devtools#vue-devtools 通过以上地址下载安装包,解压以后进入文件,按住shift,点击鼠标右键打开命令窗口 ...

  7. 1.1 vue.js devtools使用教程

    1. vue.js devtools使用教程

  8. Vue.js更改调试地址端口号

    Vue项目一般使用自带的脚手架工具vue-cli和webpack打包方式进行项目构建运行.开发中,我们在控制台输入命令行npm run dev部署项目后,默认开启的页面调试地址是8080端口.但是有时 ...

  9. webstorm如何调试vue项目的js

    webstorm如何调试vue项目的js webstormvuewebstorm调试jsjs 1.编辑调试配置,新建JavaScript调试配置,并设置要访问的url地址,如下图所示: 在URL处填写 ...

随机推荐

  1. excel表中判断A列与B列内容是否相同,相同的话在C列按条件输出!

    判断两列数据是否相同,有以下几个函数判断(做笔记于此,方便以后查找): 1.=IF(AND(A4=B4),"相同","") 在C列输出相同字符 2.=IF(A1 ...

  2. webgl学习笔记四-动画

    写在前面 建议先阅读下前面我的三篇文章. webgl学习笔记一-绘图单点 webgl学习笔记二-绘图多点 webgl学习笔记三-平移旋转缩放   下面我们将讲解下如何让一个正方形动起来~不断擦除和重绘 ...

  3. WPF中Image控件的Source属性的设置

    1.直接关联到文件,关联后不能删除此图片,因为图片正在使用. imageEditImage.Source = new BitmapImage(new Uri(strImagePath, UriKind ...

  4. debug - taotao项目 - IDEA拖动文件的自动重命名是超级巨坑, 一定要非常小心

    大量的如下错误: org.springframework.beans.factory.BeanCreationException: Could not autowire field 还是要相信报错 不 ...

  5. 使用SetupDI* API列举系统中的设备

    原文链接地址:https://blog.csdn.net/clteng/article/details/801012?utm_source=blogxgwz8 在Windows系统中提供一组有用的函数 ...

  6. 洛谷 P4066 [SHOI2003]吃豆豆 解题报告

    P4066 [SHOI2003]吃豆豆 题目描述 两个PACMAN吃豆豆.一开始的时候,PACMAN都在坐标原点的左下方,豆豆都在右上方.PACMAN走到豆豆处就会吃掉它.PACMAN行走的路线很奇怪 ...

  7. 硬盘杀手!Windows版Redis疯狂占用C盘空间【转】

    [问题的原因] Windows版Redis启动后,会在C盘自动创建一个很大的文件,C:\Users\{你的用户名}\AppData\Local\Redis\RedisQFolk_****.dat 我们 ...

  8. Centos 7.3 下 的QT 输入中文

    我的QT 目录在 /opt/Qt/Tools/QtCreator,进入到 /bin 目录,然后运行 ./qtcreator.sh  就可以运行 在qtcreator.sh 中加入 export QT_ ...

  9. PID控制算法的C语言实现七 梯形积分的PID控制算法C语言实现

    在PID控制律中积分项的作用是消除余差,为了减小余差,应提高积分项的运算精度,为此,可将矩形积分改为梯形积分. 梯形积分的计算公式为: pid.voltage=pid.Kp*pid.err+index ...

  10. laravel5.1 eloquent with 通过闭包筛选特定 field 得不到结果的问题

    (图片有点大,可右键新tab查看) User模型 class User extends Model { public function profile() { return $this->has ...