背景

1. 平时开发或线上调试出现问题不知如何定位问题。
2. 大概知道问题出在哪里但排查需花费大量时间。
3. 线上环境无法打印出变量的值

调试方法

一、获取节点

1、通过Store as global variable获取节点实例

2、通过$0获取节点实例

二、获取线上变量的值

1、通过节点实例变量进行debug调试

2、通过vue dev-tools读取变量信息

// 代码块
var Vue, walker, node;
walker = document.createTreeWalker(document.body,1);
while ((node = walker.nextNode())) {
  if (node.__vue__) {
    Vue = node.__vue__.$options._base;
    if (!Vue.config.devtools) {
      Vue.config.devtools = true;
      if (window.__VUE_DEVTOOLS_GLOBAL_HOOK__) {
        window.__VUE_DEVTOOLS_GLOBAL_HOOK__.emit("init", Vue);
        console.log("==> vue devtools now is enabled");
      }
    }
    break;
  }
}

3、全局异常捕获调试