前端调试知识, 各种调试姿势

在日常开发过程中，如果我们的程序出问题了，要找出是哪里导致的问题的时候，往往会遇到一个变量在10多20多个地方被改变了，然后找不到时哪一次的改变导致的异常；
笨的方法也有，就是每一个有可能改到的地方都加上一个console.log，通过log一个数字来判断，它执行到哪了，为什么只跑到那一步。这种方法的缺点也很明显，就是耗时耗力。

下面说方法:

1. 在相关的地方打debugger

这里可以看到运行到这里的时候, 就可以看到调用栈, 还有局部变量等等信息

2. 在页面上右键检查, 然后在右键dom元素, 选择break on:

• 子树改变断点(文字改变等)
• 属性改变断点(class改变等)
• 节点被移除断点(remove节点事件)
  
  

这里可以看到是什么函数导致他改变的

3. 在F12上找到该JS, 相关地方点一下, 打断点

这个是最基础的, 控制台打断点

4. 使用vue的watch

这个方法可以监听参数的改变

  blogLists: {
      handler(newName, oldName) {
      // ...
        debugger;
      },
      deep: true, // 对象内的改动
      immediate: true
    }

• deep: true, // 对象内的改动都可以监听到
• immediate: true // 第一次进入的时候就调用监听

5. 使用Object.defineProperty

之前遇到一个坑, 就是在watch里面监听, 结果监听不到他的调用栈(调用方法), 实际上是由于vue的监听机制的实现导致的, 那一次是因为watch的变量param实际上没有改变, 导致没有调重新计算的方法, 导致计算的剩余量被初始化为0

思路就是使用 Object.defineProperty() 方法, 对vue的watch进行监听, 如果key值是param这个自定义变量, 重新定义set方法, 然后在里面设置debugger, 就可以看到是哪里改动了param这个变量.

说一下调试键

• F8: 跳过这个断点, 进入下一个断点
• F9: 一行一行执行
• F10: 步进, 不进入函数内
• F11: 步进, 进入函数内