chrome developer tools 的一個 bug - 嘯嘯生
嘯嘯生发表于 2015-10-25 09:35:00
我10月12進入新公司，到現在已經半個月了。
這家公司主要是做移動互聯網產品的，非常適合我，每天都能見識到新東西。
今年五六月份，在好易調試代碼時，發現chrome存在一個莫名其妙的問題，總是毫無緣故地刷新網頁。這個問題後來沒有找到原因，不了了之。這週在新公司調試代碼，又發現chrome的developer tools存在一個bug，並且找出了重現的condition。
1 function loop(){
2 for(var key in undefined){ //we add a break-point here,but it doesn't break at this line
3 var item=undefined[key]; //it will never get into this loop,cause of value undefined has no key-value pairs in it
4 console.log(item);
5 }
6 }
7 loop(); //add a break point here,it works
8 console.log("here we get the end");
2 for(var key in undefined){ //we add a break-point here,but it doesn't break at this line
3 var item=undefined[key]; //it will never get into this loop,cause of value undefined has no key-value pairs in it
4 console.log(item);
5 }
6 }
7 loop(); //add a break point here,it works
8 console.log("here we get the end");
上面的代碼，如果在chrome中調試，並且在第2行打斷點，結果會發現斷點根本不起作用。
代碼分析：
- for(var key in undefined){ 這個循環根本不會執行到內部去，因為undefined不存在任何k-v對。
- 在runtime判斷undefined是否有k-v對之前，第2行應該可以interrupt的。
實際的情況又是怎樣的呢？在Firefox中，第3行不該進去卻進去了，但是這樣是沒有危害的。在chrome中，第2行應該interrupt，卻沒有，跳過去了。
chrome的這個特殊行為，給代碼調試帶來了非常惱火的麻煩。我們在第2行打了斷點，結果卻沒有按照預期停下來，一般情況下，我們會認為原因是，程序在此前就因為exception而停止了。但是查看控制台，卻沒有關於exception的任何信息，相反，卻能看到第8行被執行了。初次遇到該故障的程序員，可能一時間丈二和尚摸不著頭腦。要搞明白這個問題,就要花心思去調試和試驗，可能一折騰就是半天。
對策：
- 在chrome中有問題，換Firefox試試看，表現是否一致
- 在循環的前面加 alert ，看看是否已經進入該method
我暫時就只能想到這麼兩點而已，如果誰有剛好的經驗，望賜教。
本文链接：chrome developer tools 的一個 bug，转载请注明。