好，现在出于一些理由，你最终选择了Chrome作为你开发时使用的浏览器。然后你开始打开了Chrome Developer Tools，开始调试你的代码。
我们有时会打开Console面板来检查我们程序输出的结果，有时也会打开Elements面板来查看DOM元素对应的CSS代码。
但是你真的会使用Chrome DevTools吗？其实它提供了非常多的强大的但是又不为人知的功能，可以大大的提高我们开发的效率。
下面我就来介绍其中最有用的功能，希望可以帮助到大家。
Commmand 菜单
在正式开始前，我想先介绍下Command菜单。
首先我们打开Chrome Developer Tools，然后我们通过下面的快捷命令打开Command菜单：
- windows：Ctrl + Shift + P
- macOS：Cmd + Shift + P
或者我们可以直接通过鼠标点击下面的按钮来打开：
之后我们就可以进入Command面板了，在这里有各种命令可以供我们选择，进而完成各种强大的功能。
1. 强大的截屏功能
截取屏幕中的某一个部分是一个非常常见的需求，我相信你目前的电脑上一定已经有非常方便的截图软件了。但是，你能不能完成下面的任务？
- 将一个网页上所有的内容都截图下来，包括那些没有出现在可视化窗口中的内容
- 精准的截取某个dom元素对应的内容
这其实是两个很常见的需求，但是使用操作系统自带的截图工具却不能很好解决。这时候，我们可以通过Command命令来帮助我们完成这个需求。
对应的命令是：
-
Screenshot Capture full size screenshot -
Screenshot Capture node screenshot
现在任意打开一个网页，比如说JavaScript对应的top stories
然后打开command菜单，输入 Screenshot Capture full size screenshot
然后我们就可以获得当前网页的完整截图了。
（为了节省你的流量，我对上面的图片进行了压缩）
同样的，如果你想对某一个dom元素进行截图，当然你也可以使用系统自带的截图工具，但是你往往无法精确的截取这个元素。这时候，使用Command中的截图命令就可以了。
首先我们在element面板选中一个元素，然后执行Screenshot Capture node screenshot
下面这个就是精确截图的结果了：
2. 在控制台中引用上一次操作的结果
我们经常需要在控制台中调试代码。假设你想知道如何在JavaScript反转字符串，然后你在网上搜索相关的资料，发现了下面这行代码。
'abcde'.split('').reverse().join('')
很好，上面的代码确实反转了字符串。但是你还是不理解split() reverse() join()这些方法做了什么，以及这些中间步骤的运行结果。所以你现在想分步骤的执行上面的代码，你可能会这样写：
很好，经过上面这些步骤，我们确实知道了每个方法运行的返回值了。
但是上面的写法非常的冗余，既容易出错，也不方便理解。而在Console中，我们可以使用$_这个魔法变量来引用上一步运算的结果。
$_是一个特殊的变量，它的值始终等于控制台中上一次运算的结果。这个技巧可以非常方便的帮助我们调试代码。
3. 重新发起XHR请求
我们的前端项目中，往往需要用过XHR向后端发起请求进而获得数据。如果现在你想重新发起一次XHR请求，那么你会怎么做呢？
对于新手来说，他可能会刷新页面，但是这种方式会比较麻烦。其实我们可以直接在NetWork面板调试。
打开network面板 -> XHR -> 选中希望重新发起的XHR请求 -> Replay XHR
这是一个示例：
4. 追踪页面加载情况
网页从开始加载到完全加载完成，可能需要十几秒。这时候我们就需要监控在不同时刻时，页面的加载情况。
单击每个屏幕截图，以显示相应时间的网络请求。这种直观的演示将使你更好地了解每时每刻正在发生的网络请求。
5. 复制变量
你能不能将一个JavaScript变量的值复制到其他地方？
这看似是个无法完成的任务，但是其实Chrome浏览器中，提供了一个叫做copy的函数，可以帮助我们复制一个变量。
下面的动图演示了整个流程：
6. 将图片复制为数据 URI
我们页面中的图片有两种处理方式，一种是通过外部资源链接的方式加载，另一种是将图片编码为data url。
Data URLs，即前缀为
data:协议的URL，其允许内容创建者向文档中嵌入小文件。
将那些小型的图片编码成data URLs然后直接内嵌到我们的代码中，可以减少我们页面需要发起的HTTP请求次数，进而提高页面的加载速度。
7. 触发CSS伪类
我们可能会为一个元素编写多个伪类，为了方便我们测试这些样式，我们可以直接在Elements面板触发这些样式
8. 隐藏页面中的元素
有时候我们需要隐藏元素，这时候我们只需要在Element面板中选中这个元素，然后按下H键就行了：
9. 存储DOM元素
如果我们在Element面板中选中一个元素，然后点击Store as a global variable，就可以存储这个DOM的引用，然后在Console中使用：
10. 表格化对象
比如时候有这样的一个对象数组：
let users = [{name: 'Jon', age: 22}, {name: 'bitfish', age: 30}, {name: 'Alice', age: 33}]
如果我们在控制台直接打印这个对象，看起来会很不直观：
这时候我们可以使用table函数，这是Chrome浏览器提供的，可以帮助我们以表格的形式输出结果。
