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

站在用戶的角度思考問題，與客戶深入溝通，找到普定網(wǎng)站設(shè)計(jì)與普定網(wǎng)站推廣的解決方案，憑借多年的經(jīng)驗(yàn)，讓設(shè)計(jì)與互聯(lián)網(wǎng)技術(shù)結(jié)合，創(chuàng)造個(gè)性化、用戶體驗(yàn)好的作品，建站類型包括：成都網(wǎng)站建設(shè)、做網(wǎng)站、企業(yè)官網(wǎng)、英文網(wǎng)站、手機(jī)端網(wǎng)站、網(wǎng)站推廣、國際域名空間、網(wǎng)絡(luò)空間、企業(yè)郵箱。業(yè)務(wù)覆蓋普定地區(qū)。

在 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)測試 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è)元素，然后再從它開始搜尋。

$('.btn', $0)

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

不過如果已經(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)

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

展開的話可以看到監(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í)例，不過我的理解是：返回所有原型鏈中包含該原型的對象。

可以看到以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 把對象轉(zhuǎn)為 JSON 并粘貼到接口文檔中，或者在控制臺(tái)中快速創(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 來遍歷對象的每個(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)屬性是否是定義在對象本身可以用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í)更多知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

網(wǎng)頁名稱：ChromeDebug專用的函數(shù)有哪些-創(chuàng)新互聯(lián)
標(biāo)題URL：http://aaarwkj.com/article36/dpjopg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供虛擬主機(jī)、動(dòng)態(tài)網(wǎng)站、標(biāo)簽優(yōu)化、做網(wǎng)站、網(wǎng)站建設(shè)、建站公司

廣告

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