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

Posted on Edited on In Views: Word count in article: 466 Reading time ≈ 2 mins.

[toc]

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

打开命令菜单

  1. 打开 Chrome 开发者工具
  2. 使用以下快捷键打开命令菜单：
1
2
windows：Ctrl + Shift + P
macOS：Cmd + Shift + P

Chrome 屏幕截图

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

  1. 截取网页上所有内容的屏幕快照，包括可视窗口中未显示的所有内容。
  2. 精确捕获 DOM 元素的内容

HTML DOM 是 HTML Document Object Model (文档对象模型) 的缩写，HTML DOM 则是专门适用于 HTML/XHTML 的文档对象模型。熟悉软件开发的人员可以将 HTML DOM 理解为网页的 API。它将网页中的各个元素都看作一个个对象，从而使网页中的元素也可以被计算机语言获取或者编辑。

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

截取网页上所有内容的屏幕快照

1
Screenshot Capture full size screenshot

精确捕获 DOM 元素的内容

1
Screenshot Capture node screenshot

监控页面加载状态

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

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

Trace Viewer