Silentash-默尘

dean.edwards在被问及“不写代码的时候都在干些什么？”时非常囧地答道：“在测试和修bug(testing&debugging)”，这便是开发工程师共同的命运=.=! 我们整天都在编码、测试、Debug，忙的不亦乐乎。不过还好，有很多现成工具可以帮助我们更容易更快速地定位页面内的脚本问题，抽空还能偷个懒，简单搞个例子，看看它们是如何帮助我们的。

随便找个IE 和 FF 都报脚本错误的页面，问题有点小复杂



FF 的错误报告明显清楚很多，不过因为报错的是线上混淆后的脚本文件，全部是缩写还只有一行，所以看的还是一头雾水。可以用Fiddler 指定一个本地源文件看看究竟。FF 需要用插件支持fiddler，推荐使用 Chappell大作Fiddler开关

打开 Fiddler 后，刷新页面，在左侧的一坨请求里找到相应脚本


拖进 AutoResponder 窗口，选择本地文件，保存


再刷新页面，看错误报告，有点不一样了


进入错误报告里的链接，这下清楚多了


让Firebug告诉我们更清楚的情况，先设置脚本控制台，勾上“在错误处中断”


刷新下页面，有提示了：tab is null，和之前的错误提示一样嘛


看下右侧的监控选项，发现一溜的 undefined 和 null，到这里应该心里有数了，不过我们还可以往下找


堆栈里显示有两处引用到了中断点


一处是脚本本身的function


一处是页面内部的代码片段


很明显是页面内部的代码片段传值有问题（相应 DOM 元素不存在），这便是监控选项里看到一溜 undefined 的原因



再用 Fiddler 修改页面请求，首先要开启请求的编辑许可，如图


转到 Inspectors 选项，看 Textview，可以直接搜索，找到代码块，删之


转至 AutoResponder，将请求拖入，并点 Save 保存


FF 与 IE 均测试通过，大功告成。

也许有朋友要问了，如果仅 IE only 的问题如何定位呃，不用担心，firebug 可以做的,IE 的“开发人员工具”也可以做到：
打开这个工具，启动调试


刷新页面，错误提示比较贴心


查看“调用堆栈”，定位到可能出问题的地方



如果熟悉出问题的脚本，也可以去监控和局部变量选项查看变量是否如预期一样传递、赋值。我在这里的截图忘了保存，有点杯具，不过不碍事，用过就知道了。

基本上用这几个工具可以快速定位大多数脚本问题，再次感谢贡献这些工具的牛人们。
善用工具，人懒了，做的事情却更多了，这也是懒懒交流会的宗旨！