你知道 Chrome 爲調試專門提供的這些函數嗎？

在 Chrome 的 DevTools 中的控制檯提供了一些 Debug 專用的函數，每個都身懷絕技。

Console Utility Functions

這些函數只能用在 Chrome 的 console 中。當我在第一次看到這些函數時很是興奮，把它們直接寫到了本身的代碼中，結果固然是跳出了各類 Uncaught ReferenceError：xxx is not defined 錯誤。

$_

$_ 會存儲的執行結果，在控制檯測試 JavaScript 的時候一般都須要逐步確認，這正是 $_ 的用武之地：

　

在遇到不能鏈式調用的函數時能夠用 $_ 來避免遊標被修改：

順帶提一句，未來也有可能會出現 Pipeline operator 來作到任意的函數連接，一次來促進提高性或避免修改內建原型。

let a;
a = 1
  |> ((n) => add(n, 5))
  |> double;

console.log(a); // 12

$, $$

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

$ 和 $$ 分別就是 document.querySelector 和 document.querySelectorAll 的縮寫，其來源於你們都熟知的 JQuery。

第二個參數能夠傳入起始的元素，搭配 $0 就能夠先檢驗一個元素，而後再從它開始搜尋。

$('.btn', $0)

我常常用 $$ 來快速測試一些東西，例如輸出某我的 GitHub 頁面的全部存儲庫名稱：

不過若是已經把 JQuery 引入爲 $ 的話，仍是會正常執行 JQuery 的。

　

debug

debug(function)

參數爲一個函數，只要執行到該函數就會觸發調試器，能夠用 undebug(fn) 來取消：

function a() {
  console.log(1);
}

debug(a);
// undebug(a);

其效果至關於：

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

monitor

monitor(function)

用法和 debug 相似，monitor 函數被執行時會輸出函數名稱和參數，可用 unmonitor(function) 來中止，不過不能用於箭頭函數，若是要監聽箭頭函數的執行就只能手動重寫了。

monitorEvents

monitorEvents(element[, eventType])

能夠監聽並輸出元素的特定事件，比較特別的是除了能監聽單個事件，還能監聽事件類型，例如輸出 window 的點擊事件和全部 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])來中止監聽。

getEventListeners

getEventListeners(element)

輸出已註冊在元素上的監聽器，就拿剛纔的例子來講，輸入 monitorEvents(element) 後再輸入 getEventListeners(element) 就會看到全部事件都被註冊了一波：

展開的話能夠看到監聽器的各類屬性：

• listener：觸發事件執行的函數
• once：該監聽器只會觸發一次
• passive：沒法執行event.preventDefault()，一般用於提高監聽器的性能，如 scroll
• type：監聽事件類型
• useCapture：監聽器會在 Capture 階段攔截事件

以上屬性都是在執行 addEventListener 時所可以提供的參數，別忘了在 removeEventListener 時也要填入相同的參數才能除監聽器。

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

　

queryObjects

queryObjects(object)

官方說明是返回 Constructor 產生的全部實例，不過個人理解是：返回全部原型鏈中包含該原型的對象。

能夠看到以 a 爲原型建立的 b也會出如今 queryObjects(A) 的結果中。

另外因爲 queryObjects 並不會直接返回數組，因此要點右鍵菜單中的 Store as global variable 把數組放進變量 temp1。
　

copy

copy(object)

copy 可以把 DOM 或對象複製到剪貼板，我有時會用 copy 把對象轉爲 JSON 並粘貼到接口文檔中，或者在控制檯中快速建立或修改假數據。

還很貼心的加上了縮進

　

keys, values

keys(object), values(object)

輸出對象自己的全部 key 或 value，效果與 Object.keys(object)，Object.values(object)相同，爲何要強調自身呢？若是是用 in 來遍歷對象的每一個屬性，就會把原型鏈上全部的屬性全都拿出來出來跑一遍：

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

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

若是想要確認屬性是不是定義在對象自己能夠用 Object.prototype.hasOwnProperty：

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

至於爲何不用 object.hasWonProperty(key)，請參考下面的代碼：

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()

雖然點擊左上角的 🚫 就能夠把 Console 清理乾淨，但我仍是習慣用 clear()，就像在終端中輸入clear 那樣。

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

　

---

本文首發微信公衆號：前端先鋒

歡迎掃描二維碼關注公衆號，天天都給你推送新鮮的前端技術文章

---

歡迎繼續閱讀本專欄其它高贊文章：

• 深刻理解Shadow DOM v1
• 一步步教你用 WebVR 實現虛擬現實遊戲
• 13個幫你提升開發效率的現代CSS框架
• 快速上手BootstrapVue
• JavaScript引擎是如何工做的？從調用棧到Promise你須要知道的一切
• WebSocket實戰：在 Node 和 React 之間進行實時通訊
• 關於 Git 的 20 個面試題
• 深刻解析 Node.js 的 console.log
• Node.js 到底是什麼？
• 30分鐘用Node.js構建一個API服務器
• Javascript的對象拷貝
• 程序員30歲前月薪達不到30K，該何去何從
• 14個最好的 JavaScript 數據可視化庫
• 8 個給前端的頂級 VS Code 擴展插件
• Node.js 多線程徹底指南
• 把HTML轉成PDF的4個方案及實現

---

• 更多文章...