小机灵鬼|Chrome 开发者工具的 11 个高级使用技巧( 三 ) 本文作者从开发者角度出发

5. 复制变量你可以将 JavaScript 变量的值复制到其他地方吗？
这似乎是不可能完成的任务，但是在 Chrome 浏览器中，有一个名为copy的函数可以帮助你实现这个功能。
该copy函数不是由 ECMAScript 定义的，而是由 Chrome 浏览器提供的。使用此功能，你可以将 JavaScript 变量的值复制到你的剪贴板中，方便在其他位置使用。
6. 将复制图像为 Data URI处理网页上的图像的通常有两种方法，一种是通过外部资源链接加载它们，另一种是将图像编码为 Data URI 。
Data URL ，即前缀为data:协议的 URL ，允许内容创建者在文档中嵌入小文件。在被 WHATWG 撤消该名称之前，它们被称为“Data URI” 。
将这些小图像编码到 Data URL 并将它们直接嵌入到我们的代码中，可以减少页面需要发出的 HTTP 请求的数量，从而加快页面加载速度。
所以在 Chrome 浏览器中，我们该如何将图像转换为 Data URL 呢？可以参考下面的 gif 图像：
7. 表对象数组假设我们有一个下面这样的数组对象：
let users = [{name: 'Jon', age: 22},{name: 'bitfish', age: 30},{name: 'Alice', age: 33}]
这样的数组在控制台中不容易查看阅读。如果数组更长，元素内容很复杂，那么该数据将变得更加难以理解。
幸运的是， Chrome 提供了表格展示功能，可以将数组对象进行列表展示，方便理解。
在很多情况下，该功能非常好用。
8. 在“元素”面板对 DOM 元素进行拖放有时我们想调整页面上某些 DOM 元素的位置以测试 UI 。在“元素”面板中，你可以拖放任何 HTML 元素来更改其在页面中的显示位置：
上面的展示中，在“元素”面板中将某个 div 的位置拖动到其他位置，它在网页上的展示位置就会同步更改。
9. 在控制台中引用当前选定的 DOM 元素$0是另一个魔术变量，它会引用“元素”面板中当前选定的 DOM 元素。
10. CSS 样式触发CSS 伪类不仅可以让你将样式应用于文档树内容，还可以将其应用于外部元素，例如导航器的历史记录（例如:visited），其内容的状态（例如某些表单元素的:checked），或鼠标的位置（例如:hover ，它可以让你知道当前鼠标是否在某个元素内容之上）。
我们可能为一个元素编写多个 CSS 伪类，并且为了方便我们对这些样式进行测试，我们可以直接在“元素”面板中选择触发或关闭这些样式。
举个例子下面有一个测试网页：

小机灵鬼|Chrome 开发者工具的 11 个高级使用技巧( 三 )

推荐阅读

「德宏古茶」茶水服药的危害，可不只有影响药效

游戏爆料菌菌|点开在榜国一，哭了，全国最难上榜的省有多恐怖？马超一万战力才排名64

洋葱加花露水可以驱蚊吗花露水加花椒驱蚊吗

传统文化|为什么洗衣机排水管不能插地漏？我家入住才知坑，懊悔没早发现

做人怎样才能做得尽善尽美（一个抑郁症患者最后的心结请帮帮忙！）

购房后女子遭电话“轰炸” 团伙泄漏超10万条信息被判

『阿粉娱乐说』夫妻各玩各的，女方曾发声生理上的事不算事！，徐峥多次绯闻缠身

母婴参考|孕妈会发生几个变化，做好这些长胎不长肉，胎儿体重增长关键期

美国国债|中国连续抛出1200亿美债后，特朗普是扛不住了，亮出最后的底牌！

「温暖」温暖延续成都地铁“搭一把手”为高考学子出份力

两世欢▲《两世欢》还未收官，爱奇艺又一虐恋剧来袭，主演阵容让人满意！

[英为财情Investing]低于预期，美国南方公司 Q1 每股收益超出预期，营收

成成影视|让人丝毫没有抵抗力吧，丝绸紧身裤,

瘦腰最好的运动是什么？

三十而已■三十而已：如何看待梁正贤的不婚主义，如果是你，你会接受吗？

鱼的记忆有多久孔雀鱼的记忆有多久

中国|国防部：今起在台海附近组织实战化演练

黑苦荞茶有什么好处,黑苦荞茶和黄苦荞茶哪个好

龙息椒的辣度是多少龙息辣椒到底有多辣

老年人卧床怎样不得褥疮原因是什么