Chrome Debug專用的函數有哪些

小編給大家分享一下Chrome Debug專用的函數有哪些，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

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

雖然點擊左上角的清除

以上是“Chrome Debug專用的函數有哪些”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！