前言

想的再多，不如行动起来，大家好，我是啊Q，让我们徜徉在知识的海洋里吧。

一起“开启掘金成长之旅！这是我参与「掘金日新计划 · 2 月更文挑战」的第5天， 点击查看活动详情 。

简介

目前vue在国内的前端开发地位应该是首屈一指的，因此掌握和了解一些vue的相关调试方法还是有必要的。

开发环境

插件安装和调试

首先安装chrome浏览器的调试插件

- 在线安装：

- 离线安装：在商店中下载 VueTools，然后本地拖拽到浏览器中即可。
- 源码安装：github.com/vuejs/vue-d… 。方式过于复杂，不推荐使用。

安装好之后，我们启动项目，然后在浏览器中打开F12 在控制台即可看到一个vue的tab。

- components : 组件，可以看到页面使用了哪些组件以及组件相关的属性和数据。其中的data值我们可以实时修改，以观察修改后的效果。
- TimeLine：时间线，可以看到你组件的一些操作状态，比如键盘，鼠标点击事件，组件调用事件等事件的相关信息。
- Routes：路由，这个就不解释了吧，很好理解。

idea中调试代码

导入前端项目，首先使用idea导入前端项目。

- 使用 File -> project structure 导入model

- 导入后，idea会智能编译环境，不可以的 node i 编译一下（vue 低版本的没有智能提示的下载一下vue.js插件）。
- 打开 Edit configurations并且像如下配置：

- 接下来就可以像调试java代码一样在idea中调试vue（node）的前端代码了。

生产环境

一般说来生产环境是屏蔽了debug的，也就无法看到vue的调试控制台。有时候想找一些错误或者调试代码就很麻烦。

因此我写了一个油猴(Tampermonkey) 插件,地址：www.tampermonkey.net/ 。插件源码如下(原理都写在了源代码中)：

// ==UserScript==
// @name         vue调试插件
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  try to take over the world!
// @author       You
// @match        *
// @include      *
// @grant        none
// ==/UserScript==

(function() {
  'use strict';

  // Your code here...
  function openVueTool(){
    //在方法中执行，避免污染全局变量
    //开启vue2 production调试的方法

    //1.找vue实例，可以说99%的应用是用的app.__vue__
    //如果实在找不到,那么就到找到任意组件，用组件元素.__vue__.$root来获取
    var vue = app.__vue__

    //2.vue构造函数
    var constructor = vue.__proto__.constructor

    //3.Vue有多级，要找到最顶级的
    var Vue = constructor;
    while(Vue.super){
      Vue = Vue.super
    }
    console.log(Vue)

    //4.找到config，并且把devtools设置成true
    Vue.config.devtools = true;

    //5.注册到Vue DevTool上
    var hook = window.__VUE_DEVTOOLS_GLOBAL_HOOK__
    hook.emit('init',Vue)


    //6.如果有vuex store
    if(vue.$store){
      var store = vue.$store;
      store._devtoolHook = hook;
      hook.emit('vuex:init', store);
      hook.on('vuex:travel-to-state',function(targetState){
        store.replaceState(targetState);
      });
      store.subscribe(function(mutation, state){
        hook.emit('vuex:mutation', mutation, state);
      });
    }
  }
  openVueTool();
})();

关于vue的调试技巧

前言

简介

开发环境

插件安装和调试

idea中调试代码

生产环境