Chrome开发者工具的11个高级使用技巧

2020 年 8 月 25 日

Chrome开发者工具的11个高级使用技巧

本文作者从开发者角度出发,介绍了几个关于 Chrome 开发者工具的高级用法。熟练使用这些高级用法可以大大地提高你的生产力。如果你选择 Chrome 作为开发环境,那么你应该知道下面关于它的 11 个使用技巧。



图片来源 Morning Brewon,Unsplash


好了,现在由于某种原因,你最终选择了 Chrome 浏览器作为开发及调试的环境。接下来,打开开发者工具并开始调试代码。



很多时候你可以打开“控制台”面板来检查程序的输出,或者打开“元素”面板来检查 DOM 元素的 CSS 代码。



但是你真的了解 Chrome 开发者工具吗?实际上,它提供了许多强大但很多人未知的功能,可以极大地提高我们的开发效率。


在这里,我将介绍几个最有用的功能,希望能对你有所帮助。


在开始之前,我想介绍一下 Chrome 的命令菜单。命令菜单之于 Chrome,就像 Shell 之于 Linux 一样。你可以在键盘敲入相应命令来操作 Chrome。


首先,我们打开 Chrome 开发者工具,然后使用以下快捷键打开命令菜单:


  • windows:Ctrl + Shift + P

  • macOS:Cmd + Shift + P


或者我们可以按照下图所示的步骤将其打开:



然后,我们可以转到“命令”面板,在这里我们可以输入一些命令来执行很多强大的功能。



1. 强大的屏幕截图


捕获屏幕内容是一个非常常见的功能需求,当然我非常确定在你当前的计算机上已经有了非常方便的截图工具了。但是,你可以完成以下任务吗?


  • 截取网页上所有内容的屏幕快照,包括可视窗口中未显示的所有内容。

  • 精确捕获 DOM 元素的内容。


这是两个很普通的要求,但是使用操作系统随附的屏幕截图工具不太容易解决。这个时候,我们可以在 Chrome 使用相关命令来帮助我们完成此要求。


上面两个需求的对应的命令是:


  • Screenshot Capture full size screenshot

  • Screenshot Capture node screenshot


举个例子


现在可以打开任意的网页,例如,Medium 上 JavaScript 的热门文章页面。


https://medium.com/tag/javascript


打开“命令”菜单并执行Screenshot Capture full size screenshot



然后,我们可以就获得当前页面的完整屏幕截图了。



上面的原始图像实际上非常清晰,只是在这里我上传了压缩图像以节省你的流量。


同样地,如果要截取某个 DOM 元素的屏幕截图,就完全可以使用系统自带的屏幕截图工具,但当窗口不能完全捕获该元素内容时,此时,你可以使用Capture node screenshot命令。


首先,我们在“元素”面板中选择一个元素,然后运行Capture node screenshot命令,如下图所示。



下面是准确的屏幕截图的结果:



2. 在控制台中引用上一次的执行结果


我们常常需要在控制台中调试代码。比如你想知道如何在 JavaScript 中反转字符串,然后你在网络上搜索相关信息并找到以下代可行代码。


'abcde'.split('').reverse().join('')
复制代码



没问题,上面的代码确实对字符串进行了翻转。但你还想了解 split()、reverse()、join() 这些方法的作用以及运行他们的中间步骤的结果。因此,现在你想逐步执行上述代码,可能会编写如下内容:



好了,经过上面这些操作,我们确实知道了每个方法运行的返回值,也就了解了各个方法的作用。


但是,这给人的感觉有点多此一举。上面的做法既容易出错,又难以理解。实际上,在控制台中,我们可以使用魔术变量$_引用上一次操作的结果。



$_是一个特殊变量,它的值始终等于控制台中上一次操作的执行结果。它可以让你更加优雅地调试代码。



3. 重新发送 XHR 请求


XHR,即 XMLHttpRequest,是一种创建 AJAX 请求的 JavaScript API 。


在我们的前端项目中,我们经常需要使用 XHR 向后端发出请求来获取数据。如果你想重新发送 XHR 请求,那么该怎么办呢?


对于新手来说,可能会选择刷新页面,但这可能比较麻烦。实际上,我们可以直接在“网络”面板中进行调试。



  • 打开“网络”面板

  • 单击 XHR 按钮

  • 选择要重新发送的 XHR 请求

  • 重放 XHR 请求


下面是一个 gif 示例,方便你理解:



4. 监控页面加载状态


从一开始完全加载页面可能需要十秒钟以上的时间。我们有时需要监控页面在不同的时间点相关资源的加载行为。


在 Chrome 开发者工具中,我们可以使用“网络”面板下的Capture Screenshots功能来捕获页面加载时的屏幕截图。



单击每个屏幕截图可以显示相应的当前时间的网络请求状态。这种可视化的演示会让你更好地了解网络请求的详细过程。



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 伪类,并且为了方便我们对这些样式进行测试,我们可以直接在“元素”面板中选择触发或关闭这些样式。



举个例子


下面有一个测试网页:


我们在浏览器中将其打开,然后通过“元素”面板对 CSS 样式进行调试。



隐藏元素的快捷方式


在调试 CSS 样式时,我们通常需要隐藏一个元素。如果选择元素并按下键盘上的H键,我们就可以快速隐藏该元素。



此操作实际上增加了visibility: hidden !important;样式到对应的元素上面。


11. 将 DOM 元素存储在全局临时变量中


如果要想在控制台中快速获取某个 DOM 元素的引用,可以执行以下操作:


  • 选择某个元素

  • 右键点击鼠标

  • 存储为全局变量



以上就是我想要介绍的 Chrome 开发者工具的高级用法,希望可以帮助到你。


作者介绍:


bitfish,Medium 平台社区编辑,爱好阅读、写作和编程。


原文链接:


https://medium.com/javascript-in-plain-english/use-chrome-devtools-like-a-senior-frontend-developer-99a4740674


2020 年 8 月 25 日 12:004716
用户头像
蔡芳芳 InfoQ高级编辑

发布了 502 篇内容, 共 228.0 次阅读, 收获喜欢 1365 次。

关注

评论 4 条评论

发布
用户头像
写得很棒
2020 年 08 月 31 日 10:59
回复
蟹蟹~
2020 年 08 月 31 日 11:49
回复
学到了, F12, ctrl +shirft + p ,输入capture 可以捕获当前页面截图,楼主的帖子很棒
2020 年 11 月 04 日 00:29
回复
用户头像
666
2020 年 08 月 31 日 10:05
回复
没有更多评论了
发现更多内容

腾讯云数据库登陆印尼,金融行业显神威

数据君

tdsql

深入浅出Spark

大数志

大数据 spark 数据科学

架构师训练营第一周UML图

Geek_xq

区块链跨境溯源平台搭建,助力跨境电商防伪溯源

13530558032

EMAS 移动 DevOps 解决方案 —— Mobile DevOps

应用研发平台EMAS

阿里云 DevOps 运维 开发 emas

精心整理MySQL基本使用(数据库的操作、数据类型、MySQL的常用命令)

ShenDu_Linux

c++ MySQL 程序员 数据类型

我就不信2W字把源码拆的这么碎,你还不明白mybatis缓存

996小迁

Java 源码 架构 面试 mybatis

白皮书丨关于工业互联网,你想知道的都在这儿

华为云开发者社区

工业互联网 华为云 白皮书 ICT 智能

如何保护视频资源?这几个防盗链使用技巧你一定要知道!

腾讯云视频云

音视频 防盗链 内容安全 视频防盗 视频资源防盗

【得物技术】供应链库存幂等实战分享

得物技术

幂等 供应链 得物技术部 实战 得物

警务大数据可视化平台建设方案,公安大数据平台搭建

13530558032

清华大佬马士兵告诉你从阿里P5级一直学到P8架构师的成长路线+视频教程!

比伯

Java 编程 架构 面试 计算机

架构师训练营 week10 作业

陈皓07

架构师训练营第一周架构方法学习总结

Geek_xq

从数据库巨人身上撕开一道口子

数据君

跨国区块链投资 花式“割韭菜”骗光你的钱

CECBC区块链专委会

区块链

《具有算法和程序的离散数学基础》PDF免费下载

计算机与AI

算法 离散数学

有了它,数据库也能空中加油,一边迁移一边跑起来

数据君

一张图彻底理解Spring如何解决循环依赖!!

冰河

spring aop ioc 源码解析 循环依赖

去“测试”下的测试重生,不为焦虑买单

陈磊@Criss

软件测试 自动化测试 测试开发 智能化测试

架构师训练营 -week10-总结

大刘

极客大学架构师训练营

架构方法

raox

极客大学架构师训练营

架构师训练营第 10 周学习总结

netspecial

极客大学架构师训练营

我是如何在五年阿里面试官的连珠炮问下三面斩获Java岗offer,最后定级P6的呢?

马士兵老师

WSL2:我在原生的Win10玩转Linux系统

梁桂钊

数字时代,如何跟上互联网医院的建设潮?

CECBC区块链专委会

数字化医疗

区块链数字版权应用落地开发,区块链版权溯源解决方案

13530558032

“通证经济”实质是生产关系的变革

CECBC区块链专委会

通证经济

5G矿山,工业真金,以及智能体矿井

脑极体

Week 1 学习总结

J

极客大学架构师训练营

学习工作即游戏:游戏化生存的现实物语

脑极体

Chrome开发者工具的11个高级使用技巧-InfoQ