[toc]
在开始之前，我想介绍一下 Chrome 的命令菜单。命令菜单之于 Chrome，就像 Shell 之于 Linux 一样。你可以在键盘敲入相应命令来操作 Chrome。
打开命令菜单
- 打开 Chrome 开发者工具
- 使用以下快捷键打开命令菜单：
1 | windows：Ctrl + Shift + P |
Chrome 屏幕截图
捕获屏幕内容是一个常见的功能需求，你当前的计算机上已经有了非常方便的截图工具了。但是，你可以完成以下任务吗？
- 截取网页上所有内容的屏幕快照，包括可视窗口中未显示的所有内容。
- 精确捕获 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 功能来捕获页面加载时的屏幕截图。
