调试js与不调试运行结果不一样问题分析 | 技术部

工作中，同事发现我们网页上的相册点上一张下一张的时候显示不全，这种现象具体的说是打开的图片是上一张图片的大小，这样图片大小不一样的时候就显显示部分图片或是空余一部分。

根据以往的经验推理肯定是js获取图片的大小不对。不过对相册的js代码分析一遍，没有发现什么错误的逻辑。

最后我拿出了我的杀手锏，使用火狐的firebug对js进行在线调试。最怪的事情出现了，调试的时候竟然运行正常，图片也显示正常。是不是firebug的一个bug呢，于是我使用了google浏览器对代码进行调试，发现也是运行正常。

纠结了很长时间，百度时也有人说是ajax异步问题。但是我这只是换个图片效果而已，没有使用ajax技术啊。最后在代码

1 2 3 4 5

function showindex(m){     var img = $('div.slide img');         $('div.slide img').attr('src', m);         resize($('div.slide img').width(),$('div.slide img').height()); }

resize前面添加断点，这样就能正常运行了。既然js获取的大小是前一张图片的大小，说明图片还没有加载。忽然豁然开朗，原来是图片加载问题。

1	$('div.slide img').attr('src', m);

这句话是给img新的地址，由于程序运行的特别快，图片还未加载就去获取图片的大小，所以获取的是上一张图片的大小。于是修改代码为

1 2 3 4 5 6 7 8

function showindex(m){     var img = $('div.slide img');         $('div.slide img').attr('src', m);         $('div.slide img').load(function(){             resize($('div.slide img').width(),$('div.slide img').height());         });            }

等图片加载完后再获取图片大小就可以了。

分析：一般来说调试环境和运行环境唯一的区别就是时间问题，正常来说程序运行是非常快的，像是加载元素的时候特别慢的动作会在调试时与正常运行时有所区别。

总结：用firebug或谷歌浏览器等调试工具对程序进行调试时出现结果不一样，一般来说是异步操作或是加载其它元素慢造成的。