今天一位同学在群里问
image.png

image.png

image.png

我以这个问题为例..讲讲最基本的debug思路. 以后同学们遇到问题可以先安装这个思路 自己debug一遍

1. 发现报错 cannot read property 'classlist' of undefined
   
2. 翻译 无法在undefined上读取classlist属性
   
3. 报错旁边有个行号的.去到这个报错的地方
   
4. 根据2 就是说 nodes[i] 是undefined
   image.png
   
5. 因为是在循环里 我不确定是哪个 nodes[i] 是undefined . 所以我直接在循环里,报错语句的上面 console.log(i, nodes[i])
   image.png
   
6. 得到报错之前输出了 0, undefined
   
7. 发现第一次就报这个错误了,也就是说 我的nodes连0都没有被赋值
   
8. nodes在哪里被赋值的, 发现是在上面的if的循环里
   
9. 各种log看看进了哪个if语句 是否进入了循环
   
10. 此题发现根本没有走循环
    
11. 思考为什么不走循环
    
12. 循环的终止条件,或者初始状态不对
    
13. 初始状态 i = 0 , 那么终止的条件应该是 当 i < xxxx 为false时
    
14. 发现 nodes.length
    
15. nodes的length哪来的,看到上面定义的地方 并没有给 nodes.length 赋值 所以他是undefined 即 0 < undefined // false
    
16. 故一次都没进入循环是符合逻辑的
    
17. 那我为什么要用nodes.length
    
18. 原来我写错了 应该是 temp
    

完~