你可能不知道的Chrome Debug专用的函数!


当前第2页 返回上一页

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

  • listener:触发事件执行的函数
  • once:该监听器只会触发一次
  • passive:无法执行event.preventDefault(),通常用于提升监听器的性能,如 scroll
  • type:监听事件类型
  • useCapture:监听器会在 Capture 阶段拦截事件

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

1

2

3

4

5

6

7

const options: {

  capture: true,

  passive: true,

  once: false

}

window.addEventListener('click', console.log, options);

// window.removeEventListener('click', console.log, options);

queryObjects

queryObjects(object)

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

6.png

可以看到以 a 为原型创建的 b也会出现在 queryObjects(A) 的结果中。

另外由于 queryObjects 并不会直接返回数组,所以要点右键菜单中的 Store as global variable 把数组放进变量 temp1

copy

copy(object)

copy 能够把 DOM 或对象复制到剪贴板,我有时会用 copy 把对象转为 JSON 并粘贴到接口文档中,或者在控制台中快速创建或修改假数据。

7.png

还很贴心的加上了缩进

keys, values

keys(object), values(object)

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

1

2

3

4

5

6

7

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

1

2

3

4

5

6

for (let key in object) {

  if (Object.prototype.hasOwnProperty.call(object, key)) {

    console.log(key);

  }

}

// bar

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

1

2

3

4

5

6

7

8

9

10

11

12

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

1.png

2.png

注意在 Preserve log 开启的情况下不能用 clear 清空 Console。

更多编程相关知识,请访问:编程视频!!

以上就是你可能不知道的Chrome Debug专用的函数!的详细内容,更多文章请关注木庄网络博客

返回前面的内容

相关阅读 >>

javascript和css的区别是什么

js对象基础知识的巩固学习笔记

什么是js深拷贝和浅拷贝及其实现方式

python为什么像javascript

javascript怎么验证是否为数字

javascript生成一次性密码(otp)

mac写javascript用什么软件

javascript如何处理并行请求?四种方式浅析

javascript中load用法是什么

如何理解javascript中的变量提升

更多相关阅读请进入《Chrome》频道 >>




打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,您说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

分享从这里开始,精彩与您同在

评论

管理员已关闭评论功能...