Chrome DevTools 有趣的调式
【摘要】 Store As Global当我们从控制台获取一些数据却没有变量名时（在开发时特别常见），可以通过右键点击数据旁的小三角形，通过其来储存为全局变量，变量名为 temp1 一直延续下去，就可以配合 copy 获取变量名打印了，该功能对 HTML 元素同样适用$这个 $ 和 jQuery 中的 $ 有部分相似之处，均可以作为选择器来使用，这里依次介绍其用法。首先是 $0 ~ $4 可以获取点击...
Store As Global
当我们从控制台获取一些数据却没有变量名时（在开发时特别常见），可以通过右键点击数据旁的小三角形，通过其来储存为全局变量，变量名为 temp1 一直延续下去，就可以配合 copy 获取变量名打印了，该功能对 HTML 元素同样适用
$
这个 $ 和 jQuery 中的 $ 有部分相似之处，均可以作为选择器来使用，这里依次介绍其用法。
首先是 $0 ~ $4 可以获取点击的 HTML 元素，其中 $0 对应着最后一次点击的元素，$1 次之，依序排列直到$4 。
根据这个操作可以很轻易的复制一个元素，并对其执行一些 DOM 操作。
copy
copy 函数可以让你在 console 里拿到任意的资源，甚至包括一些变量，在复制一些特别冗长的数据时特别有用，当复制完成后，直接使用 ctrl + v 即可。
copy 接受一个变量作为参数，如果有多个参数，则忽略第一个后面的所有参数，当需要复制不存在变量名的数据时，可以配合 Store As Global 来使用。
monitor
这是 DevTools 自带的监听器，简单的说明就是监听函数的函数，使用起来很简单，直接套娃就行。目前没发现有什么特别方便的地方和使用它的需求，了解即可。
inspect
inspect 提供了一个可以快速跳转到 DOM 元素对应位置的方法，对于一些嵌套层级复杂或者未知的元素，可以通过 inspect 配合调试，将元素的选择器至传入函数中，则会自动跳转到其对应位置。
【版权声明】本文为华为云社区用户原创内容，转载时必须标注文章的来源（华为云社区）、文章链接、文章作者等基本信息， 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱：
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
评论（0）