vue 在浏览器控制台怎么调试 谷歌插件vue Devtools

问题： vuejs里面的变量，怎么用浏览器的console查看？

例如，想在chrome里用console.log查看变量$data，会显示undefined。

解决方案:

再main.js里面声明window.Vue = new Vue

window.Vue = new Vue({
el: '#app',
router,
store,
components: { App },
template: '<App/>'
})
在浏览器控制台里面用Vue代替this就可以了

vue 在浏览器控制台怎么调试 谷歌插件vue Devtools的更多相关文章

  1. 浏览器控制台命令调试——console

    控制台命令调试时通过浏览器开发工具中的控制台命令嵌入到JavaScript中,输出特定的信息或日志,从而达到调试的目的. 我们常用的Chrome和FireFox,都可以通过F12来打开开发工具. 下面 ...

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

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

  3. vuejs-devtools浏览器调试chrome插件

    vuejs-devtools浏览器调试chrome插件(360极速浏览器也可以安装,需要FQ)https://chrome.google.com/webstore/detail/vuejs-devto ...

  4. 关于安装了Vue-devtools插件但在浏览器控制台不显示的解决方案

    Google浏览器中开发调试的时候,右上角出现vue的图标,但是在开发者工具中没有出现vue调试(已在扩展程序中安装 Vue Devtools) 控制台却没有. 错误原因: 没显示调试工具的原因是用了 ...

  5. 不依赖浏览器控制台的JavaScript断点调试方法

    随着浏览器的逐渐强大,绝大多数情况下的代码调试都是可以通过浏览器自带的一些调试工具进行解决.然而对于一些特殊情况仍然无法享受到浏览器的强大 调试能力,比如QQ客户端内嵌web的调试(虽然说QQ目前已经 ...

  6. 从零开始系列之vue全家桶（2）安装调试插件vue Devtools

    小白安装前提是会用git,会从github上找东西. 第一步: 我们可以先从github上找到vue-devtools的项目,下载到本地.下载vue-devtools链接. 克隆方法:git clon ...

  7. 1.Google Chrome浏览器 控制台全解析

    Google Chrome浏览器 控制台全解析 在Google Chrome浏览器出来之前,我一直使用FireFox,因为FireFox的插件非常丰富,更因为FireFox有强大的Firebug,对于 ...

  8. 利用谷歌插件破解今日头条的新闻ajax参数加密，新手都能懂

    最近在学习谷歌插件,想找个项目练练手,就拿今日头条开刀 首先访问地址是:https://www.toutiao.com/c/user/50025817786/#mid=50044041847 通过抓包 ...

  9. Vue安装及插件Vue Devtools

    vue安装: # 最新稳定版 $ npm install vue # 全局安装 vue-cli $ npm install --global vue-cli # 创建一个基于 webpack 模板的新 ...

随机推荐

  1. react服务端渲染同构报错Browser history needs a DOM

    https://github.com/nozzle/react-static/issues/343 去掉了browserRouter就不报错了,但是又会有其他报错..

  2. 【Postgres】空间数据库创建

    1.数据库创建问题-Navicat-ERROR: source database "template1" is being accessed by other users 2.解决 ...

  3. OpenGL——OpenCV与SOIL读取图片进行纹理贴图

    使用OpenCV读取图片代码如下 img = imread(m_fileName); if (img.empty()) { fprintf(stderr, "Can not load ima ...

  4. Zephyr学习（四）系统时钟

    每一个支持多进程(线程)的系统都会有一个滴答时钟(系统时钟),这个时钟就好比系统的“心脏”,线程的休眠(延时)和时间片轮转调度都需要用到它. Cortex-M系列的内核都有一个systick时钟,这个 ...

  5. Linux下的搜索查找命令的详解(which)

    我们经常在linux要查找某个文件,但不知道放在哪里了,可以使用下面的一些命令来搜索:  which  查看可执行文件的位置. whereis 查看文件的位置.  locate   配合数据库查看文件 ...

  6. python DBUtils 线程池 连接 Postgresql（多线程公用线程池，DB-API : psycopg2）

    一.DBUtils DBUtils 是一套允许线程化 Python 程序可以安全和有效的访问数据库的模块,DBUtils提供两种外部接口: PersistentDB :提供线程专用的数据库连接,并自动 ...

  7. Linux基本的命令使用2018-4-20 18:47:28

    1.1ls -a 显式所有文件,包括隐藏文件 1.2  ls -l  列表形式显式文件名称 1.3  ls -l -h 列表显式大小和名称 也可以这样写 ls -alh  (-可以省略) 重定向 ls ...

  8. 一次CTF后对二维码的认识

    前一段时间参加一个CTF比赛的时候其中有一个题目就是一张二维码图片,然后获取其中的信息来解题,那个二维码的特别之处在于,它把3个位置探测区域用几张美女图片代替了,然后在做题的时候顺便简单的了解了一下二 ...

  9. Vue.js——60分钟快速入门(转载)

    Vue.js介绍 Vue.js是当下很火的一个JavaScript MVVM库,它是以数据驱动和组件化的思想构建的.相比于Angular.js,Vue.js提供了更加简洁.更易于理解的API,使得我们 ...

  10. JQuery实现表格自动增加行，对新行添加事件

    实现功能: 通常在编辑表格时表格的行数是不确定的,如果一次增加太多行可能导致页面内容太多,反应变慢:通过此程序实现表格动态增加行,一直保持最下面有多个空白行. 效果: 一:原始页面 二:表1增加新行并 ...