ChromeDebug專用的函數(shù)有哪些

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

成都創(chuàng)新互聯(lián)公司網(wǎng)站建設(shè)服務(wù)商，為中小企業(yè)提供成都網(wǎng)站設(shè)計、成都網(wǎng)站制作服務(wù)，網(wǎng)站設(shè)計，網(wǎng)站托管、服務(wù)器托管等一站式綜合服務(wù)型公司，專業(yè)打造企業(yè)形象網(wǎng)站，讓您在眾多競爭對手中脫穎而出成都創(chuàng)新互聯(lián)公司。

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

Console Utility Functions

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

$_

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

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

順帶提一句，將來也有可能會出現(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。

第二個參數(shù)可以傳入起始的元素，搭配 $0 就可以先檢驗(yàn)一個元素，然后再從它開始搜尋。

$('.btn', $0)

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

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

debug

debug(function)

參數(shù)為一個函數(shù)，只要執(zhí)行到該函數(shù)就會觸發(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ù)名稱和參數(shù)，可用 unmonitor(function) 來停止，不過不能用于箭頭函數(shù)，如果要監(jiān)聽箭頭函數(shù)的執(zhí)行就只能手動重寫了。

monitorEvents

monitorEvents(element[, eventType])

可以監(jiān)聽并輸出元素的特定事件，比較特別的是除了能監(jiān)聽單個事件，還能監(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)

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

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

• listener：觸發(fā)事件執(zhí)行的函數(shù)

• once：該監(jiān)聽器只會觸發(fā)一次

• passive：無法執(zhí)行event.preventDefault()，通常用于提升監(jiān)聽器的性能，如 scroll

• type：監(jiān)聽事件類型

• useCapture：監(jiān)聽器會在 Capture 階段攔截事件

以上屬性都是在執(zhí)行 addEventListener 時所能夠提供的參數(shù)，別忘了在 removeEventListener 時也要填入相同的參數(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í)例，不過我的理解是：返回所有原型鏈中包含該原型的對象。

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

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

copy

copy(object)

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

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

keys, values

keys(object), values(object)

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

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)屬性是否是定義在對象本身可以用 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()

雖然點(diǎn)擊左上角的清除

以上是“Chrome Debug專用的函數(shù)有哪些”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學(xué)習(xí)更多知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

當(dāng)前標(biāo)題：ChromeDebug專用的函數(shù)有哪些
鏈接URL：http://www.muchs.cn/article14/ishsge.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站內(nèi)鏈、網(wǎng)站制作、品牌網(wǎng)站建設(shè)、網(wǎng)站策劃、手機(jī)網(wǎng)站建設(shè)、網(wǎng)站改版

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)