提高开发效率的前端调试方法（2）

入职快一年了，很多调试都已经快已经潜移默化了，整理一下个人感觉比较实用的调试方法。

1. 使用全局搜索，我最喜欢使用的一个方式，任意搜索内容，然后命中。比如如下图我不想在代码里面debugger，直接复制一部分标识代码然后搜索，会直接跳到source面板。

2. 通过network面板Initiator查看请求的代码位置，很nice!! 比如我在项目Home.vue文件夹的mounted阶段发起了getMockInfo请求。如下图可以看到调用栈里面在Home.Vue声明的那个方法，直接点一下就知道了。

3. vue生产环境唤起,比如我唤起掘金的线上vue-devtools，用了这个可以解决一些线上问题。也可以用于研究一些项目。

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;
  }
}

4. 各种filter,方便调试css和查看对应元素 。

5. flex元素调试，右侧面板可直接修改方向、水平垂直方向展现形式。

6. 检查元素盒子模型对应颜色。盒子四个组成部分与查看元素是颜色统一 。