Chrome Debug专用的函数有哪些

  • 时间:
  • 浏览:16
  • 来源:恰卡网

小编给大家分享一下Chrome Debug专用的函数有哪些,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!

在 Chrome 的 DevTools 中的控制台提供了一些 Debug 专用的函数,每一个都身怀绝技。

Console Utility Functions

这些函数只能用在 Chrome 的 console 中。当我在第一次看到这些函数时非常兴奋,把它们直接写到了自己的代码中,结果当然是跳出了各种 Uncaught ReferenceError:xxx is not defined 错误。

$_

$_ 会存储的执行结果,在控制台测试 JavaScript 的时候通常都需要逐步确认,这正是 $_ 的用武之地:

顺带提一句,将来也有可能会出现 Pipeline operator 来做到任意的函数链接,一次来促进提升性或避免修改内建原型。

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

console.log(a);//12

$, $$

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

$$$ 分别就是 document.querySelectordocument.querySelectorAll 的缩写,其来源于大家都熟知的 JQuery。

第二个参数可以传入起始的元素,搭配 $0 就可以先检验一个元素,然后再从它开始搜寻。

$('.btn',$0)

我经常用 $$ 来快速测试一些东西,例如输出某个人 GitHub 页面的所有存储库名称:

效果和以下 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])来停止监听。

展开的话可以看到监听器的各种属性:

  • listener:触发事件执行的函数

  • once:该监听器只会触发一次

  • passive:无法执行event.preventDefault(),通常用于提升监听器的性能,如 scroll

  • type:监听事件类型

  • useCapture:监听器会在 Capture 阶段拦截事件

以上属性都是在执行 addEventListener 时所能够提供的参数,别忘了在 removeEventListener 时也要填入相同的参数才能除监听器。

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

queryObjects

queryObjects(object)

官方说明是返回 Constructor 产生的所有实例,不过我的理解是:返回所有原型链中包含该原型的对象。

还很贴心的加上了缩进

keys, values

keys(object), values(object)

输出对象本身的所有 key 或 value,效果与 Object.keys(object)Object.values(object)相同,为什么要强调自身呢?如果是用 in 来遍历对象的每个属性,就会把原型链上所有的属性全都拿出来出来跑一遍:

constobject=Object.create({foo:1});
object.bar=2;
for(letkeyinobject){
console.log(key)
}
//bar
//foo
除了自身的 key,还要 enumerable or not.)。

如果想要确认属性是否是定义在对象本身可以用 Object.prototype.hasOwnProperty

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

至于为什么不用 object.hasWonProperty(key),请参考下面的代码:

constobject1={
hasOwnProperty:function(){
returnfalse;
},
};
constobject2=Object.create(null);

object1.key='key';
object2.key='key';

object1.hasOwnProperty('key');//?
object2.hasOwnProperty('key');//?

clear

clear()

虽然点击左上角的清除

以上是“Chrome Debug专用的函数有哪些”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注亿速云行业资讯频道!

猜你喜欢

PHP中->、self、$this三者的区别是什么

本篇文章给大家分享的是有关PHP中-gt;、self、$this三者的区别是什么,小编觉得挺实用的,因此分享给大家学习,希望大家阅读完这篇文章后可以有所收获,话不多说,跟着小编一起来看看吧。

2021-03-01

Git&GitHub之图形化界面操作、Eclipse中Git插件的使用案例

这篇文章主要介绍了GitGitHub之图形化界面操作、Eclipse中Git插件的使用案例,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了

2021-03-01

PHP中gt、self、$this三者的区别是什么

本篇文章给大家分享的是有关PHP中-gt;、self、$this三者的区别是什么,小编觉得挺实用的,因此分享给大家学习,希望大家阅读完这篇文章后可以有所收获,话不多说,跟着小编一起来看看吧。

2021-02-26