使用handsontable插件修改bug心得

这段日子有个坑爹的项目——南网,这篇文章就来纪念它。里面有用到一个jq插件:handsontable,作用是生成一个类似excel的表格,不得不说功能十分强大,实现了类似excel的各种功能,使用的api也比较简单,然而…后面有些莫名其妙的bug,奈何于水平有限,其源码也太长(30000+),各种嵌套,无法从正确的逻辑中找到出问题的地方,只能在关键的地方强制使用自己的逻辑,下面就说说怎么找这个bug关键的地方

平时修改bug

  1. js的bug:我总是想一遍过程,整个流程构思的跑一遍,然后哪儿的逻辑出了问题或者疏忽了,自然就知道了对应的地方。
  2. 页面的bug:google浏览器,你懂得。我对页面渲染理解着实不深,所以经常”不求甚解”。

这次修改handsontable插件bug的经验

bug1:要渲染的数据很多,但是只显示了一部分:

Created with Raphaël 2.1.2根据官方demo发现handsontable是先渲染一部分数据,然后滚动的时候渲染新数据在页面上使用开发者工具查看handsontable的绑定事件,发现事件:wheel查看绑定事件的地方,发现嵌套多层,理不清楚,转而在源码中搜索关键字:wheel搜索发现wheel都与方法:onTableScroll()有关在onTableScroll()内打断点,查看代码执行的步骤,通过对比官方demo发现步骤中不同的地方在自己使用handsontable的地方加一个全局变量:window.flag,在onTableScroll()中使用此变量来强制执行正确的步骤

注:使用全局变量window.flag是为了在其他地方不影响

bug2-n:双击编辑时弹框位置不对、点击某些单元格时却滚动到表格顶部、下拉列表的显示位置不对…

Created with Raphaël 2.1.2开发者工具查看绑定事件,找到可以搜索的关键字:click、mousedown、mouseup、edit、select、render…搜索关键字,在觉得有可能影响的地方都打上断点,如果关键字是方法,那调用它的地方都有可能影响开始苦逼的调试,在触发哪个断点的时候导致了bug发生是否由包含该断点的方法里的步骤导致的,是或否?使用全局变量,在该步骤处”拨乱反正”以包含该断点的方法名为关键字yesno
总结:不清楚插件内部逻辑的情况下:搜索关键字,根据打的断点找到关键性代码

为了找到关键代码,断点是打了n遍,每次都发现外层的方法已经产生了bug,如此循环多次之后才找到。感觉方法很笨,但却很有效,经验大概就是这样起作用。不知道谁有好点的找bug的方法吗,请留言。

[1] hexo竟然不支持markdown的流程图语法,上面的流程图是用其他Markdown编辑器生成的html
[2] 每次用eclipse打包、启动maven管理的项目都忍不住吐槽,各种报错,浪费时间。最近终于换了idea,和webstorm是一家公司的,真强大啊,再也不用每次更新代码就打包了,而且tomcat还可以配置两个module,不用切来切去,真爽。附上idea使用教程

堂 wechat
欢迎关注我的微信公众号,里面有各种小故事哦!
坚持原创技术分享,您的支持将鼓励我继续创作!