likes
comments
collection
share

了解这些浏览器控制台api，让你事半功倍

作者站长头像
站长
· 阅读数 22

从去年换工作后，一直都是和浏览器打交道，每天都要打开无数次控制台，最近也学习了一些好用的控制台api，提供给大家参考。如果想要了解更多，这里非常推荐大家通读 Chrome DevTools  |  Chrome for Developers

终端实用api

$0-4

$0最常用，返回当前选中的dom元素。因为我从事的工作原因，经常会使用到它。

$1-4分别表示最近选中的元素。例如$1表示上次选中的元素，以此类推。

$_

返回终端中上一次计算的表达式的值。 了解这些浏览器控制台api，让你事半功倍

$(selector, parentNode?)

$(selector, parentNode?) 是 document.querySelector() 的快捷方式。还支持参数二，表示从哪个节点下查找,默认值document。

这个真的极大的减少了我在控制台写document.querySelector()方法获取dom。

了解这些浏览器控制台api，让你事半功倍

$$(selector, parentNode?)

$$(selector, parentNode) 等价于Array.from(document.querySelectorAll())。注意他返回的是一个数组，而不是一个类数组，因此我们可以直接调用数据api, 用法同$(selector, parentNode?)。

了解这些浏览器控制台api，让你事半功倍

copy(target)

将指定对象的字符串表示形式复制到剪贴板。将控制台变量复制到剪贴板让我们使用。我们都是右键直接复制对象，一般不使用这个。

了解这些浏览器控制台api，让你事半功倍

inspect(dom/fn)

定位到dom元素（Elements）和控制台中的js函数（在Sources中打开展示）。

了解这些浏览器控制台api，让你事半功倍

了解这些浏览器控制台api，让你事半功倍

getEventListeners(dom)

返回在指定对象上注册的事件监听器。返回值是一个对象，其中包含每个已注册事件类型（例如 click 或 keydown）的数组。每个数组的成员都是对象，用于描述为每个类型注册的监听器。就是elements面板中的Event Listenerstab。 如果你需要分析网站交互，这个就可以快速找到绑定的事件，很方便。

了解这些浏览器控制台api，让你事半功倍

keys(object)

会返回一个数组，其中包含属于指定对象的属性名称。如需获取相同属性的关联值，请使用 values()。类似于Object.keys(), Object.values()。

了解这些浏览器控制台api，让你事半功倍

monitor(function)

调用指定的函数时，控制台会记录一条消息，指明函数名称以及调用时传递给该函数的参数。使用 unmonitor(function) 可停止监控。

了解这些浏览器控制台api，让你事半功倍

monitorEvents(dom [, events])

当指定dom对象上发生其中一个指定事件时，该 Event 对象会记录到控制台中。您可以指定要监控的单个事件、事件数组或映射到预定义事件集合的某种通用事件“类型”。使用 unmonitorEvents(dom [, events]) 可停止监控。

我们可以先使用getEventListeners(dom)去查看当前dom绑定了哪些事件，然后在进行特定事件监听，不然输出内容很多。

了解这些浏览器控制台api，让你事半功倍

queryObjects(Constructor)

以数组形式返回使用指定构造函数创建的对象。查找范围为当前选择的执行上下文。

该api展示未发现有啥用途。

了解这些浏览器控制台api，让你事半功倍

一些快捷操作

  • ctrl+shift+f,在已加载的所有资源中查找指定内容。 了解这些浏览器控制台api，让你事半功倍
  • ctrl+shift+p, 打开全局面板
    • ? 提示命令语
    • > 运行命令

日志相关api

assert

如果条件为false，那么将在控制台输出error日志。实际就是if + error

const x = 5;
const y = 3;
const reason = 'x is expected to be less than y';
console.assert(x < y, {x, y, reason}); // 当表达式为false时，抛出错误。
console.log("=====assert抛出错误，但是后续代码依旧会执行")

了解这些浏览器控制台api，让你事半功倍

count(key)

计算指定的key调用次数。这个api不需要我们使用变量累加去排错了。如果没有这个api，我们就需要设置一个标识，累加计数了。

let flag = Math.random()
while(flag > 0.5) {
  console.count("循环次数...");
  console.log(flag)
  flag = Math.random()
}

了解这些浏览器控制台api，让你事半功倍 还可以调用console.countReset(key?)重置计数。

console.count();
console.count('coffee');
console.countReset(); // 重置指定key的计数
console.count();
console.count();

了解这些浏览器控制台api，让你事半功倍

debug, info

在使用上讲，等同于console.log。

dir

输出指定对象的 JSON 表示法。一般我们打印一个dom元素，它是以html结构输出的。但是我们想要看到当前dom元素的属性，我们就可以使用这个。

// 输出指定对象的 JSON 表示法。
const obj = {
  name: "zh",
  1: 1
}
console.dir(obj)
console.log(obj)
console.log(document.head) // 直观地dom结构输出
console.dir(document.head) // 对象的形式打印
console.log("%O", document.head) // 对象形式打印
// 输出 node 后代的 XML 表示形式。
console.dirxml(document.body)
console.log("%o", document.head)

了解这些浏览器控制台api，让你事半功倍

group, groupCollapsed

直观地将消息分组在一起，直到调用 console.groupEnd(label?) 为止。一般不会使用到。

const label = '分组标题';
console.group(label); // 以展开的形式堆积打印。可以嵌套使用
// console.groupCollapsed(label) // 以收起的形式堆积打印
console.log('zh');
console.error('error');
console.debug('debugger');
console.info('info');
console.groupEnd(label); // 停止直观呈现消息分组。
console.log("不分组了....")

了解这些浏览器控制台api，让你事半功倍

了解这些浏览器控制台api，让你事半功倍

table(obj, [column1, column2, ...]?)

以表格的形式记录一组对象，并且可以使用第二个参数指定展示哪些字段，并且他最多展示两层对象。行表示第二层属性，列表示第一层属性。

// 以表的形式记录一组对象。
console.table({
  name: "zh",
  age: 20,
  man: 1
})
console.table([
{
  first: 'René',
  last: 'Magritte',
},
{
  first: 'Chaim',
  last: 'Soutine',
  birthday: '18930113',
},
{
  first: 'Henri',
  last: 'Matisse',
}
])
// 只会展示两层内容
console.table({
  obj: {
    name: "zh",
    age: {
      num: 20
    }
  },
  obj1: "zhs"
})
// 可以指定展示的列数据，通过第二个参数可以决定展示哪些列属性
console.table({
  obj: {
    name: "zh",
    age: {
      num: 20
    }
  },
  obj1: "zhs"
}, ["value"])

了解这些浏览器控制台api，让你事半功倍

time(key?)

启动一个新的计时器与停止计时器配合可以计算当前代码的执行时间。这个在开发中也是比较常用的,一般我们都是使用时间戳进行计算。

(async function () {
    console.time("label");
    await new Promise((resolve) => {
    setTimeout(() => {
      resolve()
    }, 2000)
    })
    console.timeEnd("label");
})()

了解这些浏览器控制台api，让你事半功倍

并且我们可以使用timeLog来获取中间状态的时间, 必须在time和timeEnd之间调用。

// 输出time监听的值， 必须在time和timeEnd之间调用
console.time("answer time");
alert("Click to continue");
console.timeLog("answer time"); // 第一次关闭的时间
alert("Do a bunch of other stuff...");
console.timeEnd("answer time"); // 第二次关闭的时间

了解这些浏览器控制台api，让你事半功倍

参考

往期年度总结

往期文章

专栏文章

结语

本篇文章到此就结束了，欢迎在评论区交流。

🔥如果此文对你有帮助的话，欢迎💗关注、👍点赞、⭐收藏、✍️评论，   支持一下博主~

转载自:https://juejin.cn/post/7366457260415123493
评论
请登录