常识级别的 chrome 控制台操作接口

最新推荐文章于 2025-06-19 21:06:24 发布

weixin_33971977

最新推荐文章于 2025-06-19 21:06:24 发布

阅读量1.5k

点赞数

CC 4.0 BY-SA版权

原文链接：https://segmentfault.com/a/1190000017545045

本文介绍了Chrome DevTools中的一些高效使用技巧，包括特殊变量如$_、$0~$4的功能，特殊方法如$()、$$()、$x()、inspect()、copy()的使用，以及如何监视函数和元素事件，提升前端开发效率。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

原文链接： https://ssshooter.com/2018-12...

快 2019 年了，我才去看 chrome DevTools 的 api，唉，晚是晚点，总比不知道好吧？对于这些接口，不知道也不会导致你无法正常开发，但是知道了效率是能提高很多的。其实很多“常识”都因为“太常识”了，所以大家都不说，不讨论，结果知道的人反而不多。

以下是几句话的简单总结。

特殊变量

$0 ~ $4 $0 返回上次选中的 dom 元素（需要用审查元素或直接在开发工具点击元素，使用下面的 $() 不生效），$n 返回上 n + 1 次选择的元素。

inspect() 审查某元素，例如 inspect($0)。这里有一个不容易注意的坑，如果你的页面有一个 id 为 inspect 的元素，那么你输入 inspect 就会获得那个 dom 元素，而不是审查函数。
copy() 复制一个变量。之前我一直有一个很苦恼的问题，有时候想用 js 处理一些数据，例如存放对象的数组，想在浏览器直接处理，但是当时不知道这个方法，复制不出来，只能用 node 写文件然后复制，十分蠢，其实明明一个 copy(var) 就完事了呀。
monitor(function) 监视一个函数