在 Chrome 的 DevTools 中的控制臺(tái)提供了一些 Debug 專用的函數(shù)，每一個(gè)都身懷絕技。

Console Utility Functions

這些函數(shù)只能用在 Chrome 的 console 中。當(dāng)我在第一次看到這些函數(shù)時(shí)非常興奮，把它們直接寫到了自己的代碼中，結(jié)果當(dāng)然是跳出了各種 Uncaught ReferenceError：xxx is not defined 錯(cuò)誤。

$_

$_ 會(huì)存儲(chǔ)的執(zhí)行結(jié)果，在控制臺(tái)測(cè)試 JavaScript 的時(shí)候通常都需要逐步確認(rèn)，這正是 $_ 的用武之地：

在遇到不能鏈?zhǔn)秸{(diào)用的函數(shù)時(shí)可以用 $_ 來避免游標(biāo)被修改：

順帶提一句，將來也有可能會(huì)出現(xiàn) Pipeline operator 來做到任意的函數(shù)鏈接，一次來促進(jìn)提升性或避免修改內(nèi)建原型。

 

let a; 
a = 1 
  |> ((n) => add(n, 5)) 
  |> double; 
 
console.log(a); // 12 

$, $$

$(selector[, element]), $$(selector[, element]) 

$ 和 $$ 分別就是 document.querySelector 和 document.querySelectorAll 的縮寫，其來源于大家都熟知的 JQuery。

第二個(gè)參數(shù)可以傳入起始的元素，搭配 $0 就可以先檢驗(yàn)一個(gè)元素，然后再?gòu)乃_始搜尋。

$('.btn', $0) 

我經(jīng)常用 $$ 來快速測(cè)試一些東西，例如輸出某個(gè)人 GitHub 頁(yè)面的所有存儲(chǔ)庫(kù)名稱：

不過如果已經(jīng)把 JQuery 引入為 $ 的話，還是會(huì)正常執(zhí)行 JQuery 的。

debug

debug(function) 

參數(shù)為一個(gè)函數(shù)，只要執(zhí)行到該函數(shù)就會(huì)觸發(fā)調(diào)試器，可以用 undebug(fn) 來取消：

 

function a() { 
  console.log(1); 
} 
 
debug(a); 
// undebug(a); 

其效果相當(dāng)于：

 

function a() { 
  console.log(1); 
} 
a = (function() { 
  const origin = a; 
  return function() { 
    debugger; 
    origin(); 
  } 
})(); 

monitor

monitor(function) 

用法和 debug 類似，monitor 函數(shù)被執(zhí)行時(shí)會(huì)輸出函數(shù)名稱和參數(shù)，可用 unmonitor(function) 來停止，不過不能用于箭頭函數(shù)，如果要監(jiān)聽箭頭函數(shù)的執(zhí)行就只能手動(dòng)重寫了。

monitorEvents

monitorEvents(element[, eventType]) 

可以監(jiān)聽并輸出元素的特定事件，比較特別的是除了能監(jiān)聽單個(gè)事件，還能監(jiān)聽事件類型，例如輸出 window 的點(diǎn)擊事件和所有 touch 類別的事件：

 

效果和以下 JavaScript 相同：

 

window.addEventListener('click', console.log) 
window.addEventListener('touchstart', console.log) 
window.addEventListener('touchmove', console.log) 
window.addEventListener('touchend', console.log) 
window.addEventListener('touchcancel', console.log) 

可以用 unmonitorEvents(element [, eventType])來停止監(jiān)聽。

getEventListeners

getEventListeners(element) 

輸出已注冊(cè)在元素上的監(jiān)聽器，就拿剛才的例子來說，輸入 monitorEvents(element) 后再輸入 getEventListeners(element) 就會(huì)看到所有事件都被注冊(cè)了一波：

展開的話可以看到監(jiān)聽器的各種屬性：

• listener：觸發(fā)事件執(zhí)行的函數(shù)
• once：該監(jiān)聽器只會(huì)觸發(fā)一次
• passive：無法執(zhí)行event.preventDefault()，通常用于提升監(jiān)聽器的性能，如 scroll
• type：監(jiān)聽事件類型
• useCapture：監(jiān)聽器會(huì)在 Capture 階段攔截事件

以上屬性都是在執(zhí)行 addEventListener 時(shí)所能夠提供的參數(shù)，別忘了在 removeEventListener 時(shí)也要填入相同的參數(shù)才能除監(jiān)聽器。

 

const options: { 
  capture: true, 
  passive: true, 
  once: false 
} 
window.addEventListener('click', console.log, options); 
// window.removeEventListener('click', console.log, options); 

queryObjects

queryObjects(object) 

官方說明是返回 Constructor 產(chǎn)生的所有實(shí)例，不過我的理解是：返回所有原型鏈中包含該原型的對(duì)象。

可以看到以 a 為原型創(chuàng)建的 b也會(huì)出現(xiàn)在 queryObjects(A) 的結(jié)果中。

另外由于 queryObjects 并不會(huì)直接返回?cái)?shù)組，所以要點(diǎn)右鍵菜單中的 Store as global variable 把數(shù)組放進(jìn)變量 temp1。

copy

copy(object) 

copy 能夠把 DOM 或?qū)ο髲?fù)制到剪貼板，我有時(shí)會(huì)用 copy 把對(duì)象轉(zhuǎn)為 JSON 并粘貼到接口文檔中，或者在控制臺(tái)中快速創(chuàng)建或修改假數(shù)據(jù)。

還很貼心的加上了縮進(jìn)

keys, values

keys(object), values(object) 

輸出對(duì)象本身的所有 key 或 value，效果與 Object.keys(object)，Object.values(object)相同，為什么要強(qiáng)調(diào)自身呢?如果是用 in 來遍歷對(duì)象的每個(gè)屬性，就會(huì)把原型鏈上所有的屬性全都拿出來出來跑一遍：

 

const object = Object.create({ foo: 1}); 
object.bar = 2; 
for (let key in object) { 
  console.log(key) 
} 
// bar 
// foo 

除了自身的 key，還要 enumerable or not.)。

如果想要確認(rèn)屬性是否是定義在對(duì)象本身可以用 Object.prototype.hasOwnProperty：

 

for (let key in object) { 
  if (Object.prototype.hasOwnProperty.call(object, key)) { 
    console.log(key); 
  } 
} 
// bar 

至于為什么不用 object.hasWonProperty(key)，請(qǐng)參考下面的代碼：

 

const object1 = { 
  hasOwnProperty: function() { 
    return false; 
  }, 
}; 
const object2 = Object.create(null); 
 
object1.key = 'key'; 
object2.key = 'key'; 
 
object1.hasOwnProperty('key'); // ? 
object2.hasOwnProperty('key'); // ? 

clear

clear() 

雖然點(diǎn)擊左上角的 🚫 就可以把 Console 清理干凈，但我還是習(xí)慣用 clear()，就像在終端中輸入clear 那樣。

注意在 Preserve log 開啟的情況下不能用 clear 清空 Console。