chrome developer tools 的一個 bug

我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");

上面的代碼,如果在chrome中調試,並且在第2行打斷點,結果會發現斷點根本不起作用。

代碼分析:

  1. for(var key in undefined){ 這個循環根本不會執行到內部去,因為undefined不存在任何k-v對。
  2. 在runtime判斷undefined是否有k-v對之前,第2行應該可以interrupt的。

實際的情況又是怎樣的呢?在Firefox中,第3行不該進去卻進去了,但是這樣是沒有危害的。在chrome中,第2行應該interrupt,卻沒有,跳過去了。

chrome的這個特殊行為,給代碼調試帶來了非常惱火的麻煩。我們在第2行打了斷點,結果卻沒有按照預期停下來,一般情況下,我們會認為原因是,程序在此前就因為exception而停止了。但是查看控制台,卻沒有關於exception的任何信息,相反,卻能看到第8行被執行了。初次遇到該故障的程序員,可能一時間丈二和尚摸不著頭腦。要搞明白這個問題,就要花心思去調試和試驗,可能一折騰就是半天。

對策:

  1. 在chrome中有問題,換Firefox試試看,表現是否一致
  2. 在循環的前面加 alert ,看看是否已經進入該method

我暫時就只能想到這麼兩點而已,如果誰有剛好的經驗,望賜教。

原文地址:https://www.cnblogs.com/jonkee/p/4909131.html