特殊情況下無法下中斷點
這是筆者在工作上遇到的一種狀況，情境是這樣子的：
Chrome在Source頁籤中，有一個地方會把一開始網頁有用到的所有HTML、CSS、Javascript都放在一個視窗，這個視窗的位置在可以下中斷點視窗的左邊，如下圖
但是特殊情況下，會找不到想下中斷點的程式碼。筆者寫了二段程式碼，讓我們直接來看這範例的程式碼：
test.html：主要是將test2的網頁讀進來。
test2.html：剛剛示範的程式碼放在test2裡。
在這種情況下，我們在瀏灠器開啟的，是test.html，此時test.html會用load的方式，呼叫test2.html，並執行test2.html裡的程式，這個時候，我們再回來看Chrome的Sources頁籤部份。
下圖是Chrome的Elements頁籤，可以看到二個html的內容完整的呈現，代表瀏灠器有執行test.html的程式：
Chrome的Sources的頁籤裡，卻找不到test2.html可以選擇：
-
此時Console可以看到test2.html執行的結果。
我們可以發現，在Sources頁籤是找不到test2.html的，歸咎原因如下：
當網頁不是在一開始被下載的情況下，在Sources的頁籤中是找不到的。
在這種情況下，如果我們還是需要下中斷點的話，有幾種解決的方法：
-
瀏灠器直接呼叫test2.html。
-
在瀏灠器中重新宣告要Debug的程式。
-
呼叫要執行的程式，並在呼叫的時候下中斷點。
第一種辦法有可能會遇到問題是，某些Javascript只在test.html中被宣告，但是在test2.html中卻直接使用。這種情況下，如果瀏灠器直接開啟test2.html的話，會出現錯誤，可能還沒停在我們想要的中斷點前，程式就出錯而就被迫中斷了。
第二種的重新宣告程式，我們來示範一下用法，不過在示範前，先了解一下原理。
Javascript宣告的Function，是以一種Key、Value的方法儲存的，Key是程式名稱，Value是程式內容，以上方的test2.html為例，它會在Javascript中儲存一個outputLog的Function，在有人呼叫時去執行，所以我們待會要做的事情是，在可以下中斷點的地方，覆蓋掉原本outputLog的Function。瞭解了原理後與作法後，我們就來實作吧。
-
首先將滑鼠移到下圖的地方。
-
在空白的地方按右鍵，選擇「New」，來新增一個可以寫程式的地方。
-
將我們要Debug的程式貼上，下中斷點後，點擊下圖滑鼠指定的地方，讓這一段程式被執行一次；因為我們用相同的function名稱宣告並執行，所以會把舊有的function覆蓋掉，之後有人呼叫outputLog的function時，會執行我們最後覆蓋掉的程式。
-
在console呼叫程式，就可以停在中斷點。
透過上述的程序，就可以達到我們的要求，這裡有一個要注意的是：在「Scripte Sinppet ＃1」的視窗中，右方的Debug操作按鈕順序變成了
最左邊的按鍵是執行，而不再是跳到下一個中斷點，如果在中斷期間按到執行按鈕，此會重新宣告一次程式，而設定的中斷點也是被對應到新的程式，導至目前中斷的程式沒有下一個中斷點；簡單的說，就是會讓你有錯覺，認為怎麼沒有停在中斷點呢？而解決方法就是：重新再呼叫一次程式，重新再進入中斷點即可。
-
雖然Console也可以下程式並執行，但是並無法下中斷點，二邊的情況不同。
第三種方式「呼叫要執行的程式，並在呼叫的時候下中斷點」，其實也是利用Snippet可以執行程式、下中斷點的特性來實作的，方式如下：
-
進到「Scripte Sinppet ＃1」視窗，呼叫要執行的程式，並下中斷點。
-
執行snippet的程式，進到中斷點。
-
利用單步執行的Debug方式（按下下圖滑鼠位置的按鈕），進入內部程式。
利用這種方式也可以在這種特殊情況下進行Debug，不過有一個要注意的重點是，這一個視窗的背景是黃色的，視窗的標題也是一個奇怪的「VM58」，其實這是表示這個視窗對Chrome來說是一個暫存的地方，整個頁面重新整理後，這個「VM58」的視窗就會不見，或是視窗還留著，但中斷點無論如何進不去，因為重新整理頁面之後，Chrome會開一個「VM60」之類的視窗，而「VM60」的視窗的程式重新宣告後，會覆蓋掉「VM58」的程式，所以程式不會停在「VM58」視窗的中斷點；這一點要特別注意。
重點說明
透過上述的說明，我們可以很瞭解如何進行Javascript的Debug模式，甚至AJAX也可以用這種方式，將中斷點下在success的function裡，由此去確認伺服器端帶回的資料。
留言列表
工具 (1)
