四川盐亭网站制作公司

ChromeDebug专用的函数有哪些-创新互联

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

站在用户的角度思考问题，与客户深入沟通，找到普定网站设计与普定网站推广的解决方案，凭借多年的经验，让设计与互联网技术结合，创造个性化、用户体验好的作品，建站类型包括：成都网站建设、做网站、企业官网、英文网站、手机端网站、网站推广、国际域名空间、网络空间、企业邮箱。业务覆盖普定地区。

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

Console Utility Functions

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

$_

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

Chrome Debug专用的函数有哪些

在遇到不能链式调用的函数时可以用$_ 来避免游标被修改：

Chrome Debug专用的函数有哪些

顺带提一句，将来也有可能会出现 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 页面的所有存储库名称：

Chrome Debug专用的函数有哪些

不过如果已经把 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 类别的事件：

Chrome Debug专用的函数有哪些

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

Chrome Debug专用的函数有哪些

getEventListeners

getEventListeners(element)

输出已注册在元素上的监听器，就拿刚才的例子来说，输入monitorEvents(element) 后再输入getEventListeners(element) 就会看到所有事件都被注册了一波：

Chrome Debug专用的函数有哪些

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

  • 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 产生的所有实例，不过我的理解是：返回所有原型链中包含该原型的对象。

Chrome Debug专用的函数有哪些

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

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


copy

copy(object)

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

Chrome Debug专用的函数有哪些

还很贴心的加上了缩进

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专用的函数有哪些”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注创新互联行业资讯频道！


当前文章：ChromeDebug专用的函数有哪些-创新互联
分享网址：http://scyanting.com/article/dpjopg.html

其他资讯