Chrome开发者工具-高级使用技巧

 

---

 

一、Console控制台

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

在控制台中，$_是一个特殊变量，它的值始终等于控制台中上一次操作的执行结果

实际调试中可以使用变量 $_ 引用上一次操作的结果

 

2.快速复制变量

在控制台使用 copy函数 可以将 JS 变量的值复制到浏览器外的地方

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

 

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

• 选择某个元素
• 右键点击鼠标
• 存储为全局变量

 

4. 在控制台中引用当前选定的 DOM 元素

$0是另一个特殊变量，它会引用“元素”面板中当前选定的 DOM 元素

 

 

 

5.表对象数组

假设有数组对象

let Department = [{name: '检验', code: 'LIS' },
                  {name: '输血',code: 'BD'},
                  {name: '微生物', code: 'MIC'}]

该数组在控制台正常显示如下：

 

Chrome 提供了表格展示功能，可以使用 table函数 将数组对象进行列表展示，方便理解

 

 

6.保持日志记录

重新加载页面之后控制台的日志内容会被清空，可以通过勾选 Console -  - Preserve log 来保持日志记录

 

 

二、Elements元素面板

 

1.对DOM元素进行拖放

“元素”面板中，你可以拖放任何 HTML 元素来更改其在页面中的显示位置：

 

 

 

2.快捷方式隐藏HTML元素

在元素面板选择元素并按下键盘上的H 键，就可以快速隐藏该元素

 

3.CSS样式触发

可以在元素面板中选择触发或关闭伪类样式：

 

 

4.DOM操作断点

对于 DOM 操作也可以添加断点。通常可以在某个会发生属性更改的节点上断点跟踪调试

 

 

 

三、Network网络控制

1.重新发送XHR请求

（xhr,全称为XMLHttpRequest,用于与服务器交互数据,是ajax功能实现所依赖的对象,jquery中的ajax就是对 xhr的封装）

刷新页面比较麻烦。可以直接在网络面板中进行调试：

 

• 打开网络面板
• 单击 XHR 按钮
• 选择要重新发送的 XHR 请求
• 重放 XHR 请求

 

 

2.将图像复制为Data URI

Data URL，即前缀为Data:协议的 URL，允许内容创建者在文档中嵌入小文件。在被 WHATWG 撤消该名称之前，它们被称为“Data URI”。

 

处理网页上的图像的通常有两种方法，一种是通过外部资源链接加载它们，另一种是将图像编码为 Data URI。

将这些小图像编码到 Data URL 并将它们直接嵌入到代码中，可以减少页面需要发出的 HTTP 请求的数量，从而加快页面加载速度。

在 Chrome 浏览器中，可以将图像转换为 Data URL：

 

 

四、Sources源代码面板

1.事件监听器断点

可以通过访问源代码面板打开一个 js 文件，检查其中的相关事件并可以设置触发断点

 

 

 

五、Chrome命令菜单

 

打开 Chrome 开发者工具，然后使用以下快捷键打开命令菜单：

• windows：Ctrl + Shift + P

• macOS：Cmd + Shift + P

然后，可以转到命令面板，在这里可以输入一些命令来执行很多强大的功能

 

 

 

1.源码文件黑盒处理

在进行堆栈跟踪时，会发现堆栈信息中大多数来自核心框架文件（如 jQuery），为了避免在调试器中包含这些核心文件，可以对它们进行黑盒处理，这意味着调试时将跳过这些文件：

打开命令面板 -> 输入 BlackBox -> 设置黑盒调试过滤通配符

 

2.动画审查

动画标签将展示记录任何发生在网站上的动画。可以重播它们、看看它们的宽松程度，然后根据时间或持续时间调整

打开命令面板 -> 输入 animation -> 打开动画标签

 

 

 

3.页面截屏

 

开发者工具自带截屏功能，可以从整个页面、单个节点(被选中的节点)或视图中创建图像

• 打开命令面板 -> 输入 Screenshot Capture full size screenshot -> 截取网页上所有内容的屏幕快照，包括可视窗口中未显示的所有内容（长截图）

• 打开命令面板 -> 输入 Screenshot Capture node screenshot -> 精确捕获 DOM 元素的内容

 

• 

 

 

 

六、其他

 

1.本地覆盖

 

 

本地覆盖功能能够加载生产文件的本地副本，并使用它们来替代捆绑的副本。当一个问题只发生在特定的环境中而不能在本地复现时，这一点尤其有用。

可以在源代码面板下启用 "Overrides"（重写）。如果没有看到 Overrides 链接，点击 Page 右侧的锯齿图标。可以将打印文件复制到本地文件并对其进行扩展。重写将通过页面重新加载保持

 

2.查看代码覆盖率

 

对代码进行性能优化会导致很多代码没有用了但是还没及时清除。在覆盖工具的帮助下，可以分析资源并查看哪些行没有执行

打开命令面板 -> 输入 coverage -> 打开代码覆盖率工具 -> 点击重新加载图标开始记录，所有红色显示的内容都不会被执行

​

 

---