你知道 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。
