調用並調試函數

debug命令可以調用並調試一個函數

在我們想要查找問題並進行詳細調試的時候，一個簡單的技巧就是先調用一下 debugger 命令。例如，假設我們有以下形式的函數：

function fn() {
  /* 某些代碼 */
}

可以在自己的控制檯裏這樣操作：

debugger; fn(1);

然後點擊 Step into next function call，就能對 fn 函數的具體實現進行調試了。

這個技巧在你不想找到函數 fn 的詳細定義並手動設置斷點，或者當這個 fn 函數是動態綁定到某個函數上，你又不清楚具體源頭在哪裏時，尤其好用。

在 Chrome 瀏覽器裏，可以在命令行裏直接使用 　　

debug(fn) 

命令，這樣每次運行 fn 函數時，調試器都會暫停在這個函數的執行過程中，方便你查看和排查問題。

debug還可以調試系統對象的方法，例如

debug(window.location.replace);
debug(window.location.assign);

debug比inspect好用，inspect對函數，僅能定位到函數的定義，不能直接調試，各有千秋吧

調試屬性讀取

如果你有一個對象，想知道它的屬性什麼時候會被讀取，可以在對象的 getter 中調用 debugger。例如，將 {configOption: true} 轉換爲

{ 
  get configOption() { 
    debugger; return true; 
  }
}

當你將一些配置選項傳遞給某個地方，並且想要看到它們如何被使用時，這個技巧非常有用

 

 

出處：一些你可能不知道的奇葩調試技巧