作为一款深受开发者喜爱的浏览器，Chrome配备的强大好用的开发者工具Devtools功不可没。开发者工具面板包含了：
Elements(元素)面板Console(控制台)面板Sources(源代码)面板Network(网络)面板Performance(性能)面板Memory(内存)面板Application(应用)面板Security(安全)面板Audits(审计)面板
等，覆盖了和开发有关的各个方面。但如果你和曾经的我一样日常仅仅使用Devtools来审查网页元素、打印变量和查看网络请求的话显然没有发挥出它的威力，接下来的时间不妨跟着我一起了解学习一下Chrome浏览器的调试技巧。
快捷键
掌握快捷键可以为你省去滑动鼠标找菜单的时间，提高工作效率，所以务必熟记。
注：本文所有快捷键针对Mac系统
快速打开Devtools面板
你可以通过组合键command+option+i或command+option+j快速打开开发者工具，前者会默认打开上一次关闭时使用的功能面板，后者默认打开Console面板。此外还有另一组我最常使用的快捷键:command+shift+c，这样默认打开的是Element面板，并启用元素审查。
切换面板位置
根据不同人的使用习惯、屏幕大小或者面板内容，我们有时需要切换面板显示位置，都知道可以点击三个小点点处改变面板位置:
但你也可以用快捷键command+shift+d快速实现:
切换设备模式
使用快捷键command+shift+m切换至设备模式，调试移动端页面:
切换面板
使用command+[和command+]左右切换功能面板:
查看鼠标悬浮状态下的元素样式
当我们想查看一个元素在鼠标悬浮状态下的样式时会发现无法保持住hover状态，要是能有办法将页面定住就好了。你别说，还真有。首先将面板切换至Source，把鼠标悬浮到待查看的元素上，按下command+\，此时页面和debug模式一样，脚本已经暂停运行，这个时候再选中该元素就可以看到其hover下的样式了。
另一种方法是在元素面板下，在目标元素上右键唤起菜单，选择Force state强制修改状态:
命令菜单(Command Menu)
Devtools功能十分强大，但毕竟面板有限无法同时展现全部功能，你可以通过command+shift+p打开命令菜单查看全部功能:
自带截屏功能
Chrome自身配备了截图功能，而且非常好用。打开上面的命令菜单输入screenshoot可以看到筛选出来了四种截图方式，由上到下分别为自定义区域截图、长图截图、Dom节点截图、当前可视区域截图。
控制台小技巧
诚然使用console.log足够完成一般的调试工作，但掌握更多的控制台技巧则会为你的调试添砖加瓦。
将变量名一起打印
只打印变量值的话当日志内容多起来的时候很容易分不清是谁的值，应该将变量用大括号括起来打印键值对:
打印对象数组
对于数组对象，打印时可以使用console.table让他们更整洁，还可以传入第二个参数控制需要展示的属性，并且支持排序:
断言打印
使用console.assert，当条件为假时打印内容:
打印上一次运行结果
使用$_打印上一次运行结果:
获取当前选中节点以及之前选中节点
$0可以获取当前选中节点，$1~$4获取最近选中的4个节点:
将DOM结点以DOM树的结构进行输出
使用console.dir可以将DOM结点以DOM树的结构进行输出，方便查看属性方法:
为打印结果加时间戳
在命令菜单中找到Show timestamps可以为打印结果加上时间戳:
copy
copy方法可以将内容复制到系统的剪贴板中，并返回格式化后的结果:
代码片段
Devtools为我们提供了一个功能用来快速运行一段JavaScript代码，并且可以保存下来在各个页面复用，这意味你无需反复的编写相同的代码，也不用为了验证一段代码的结果而新建一个文件。
它就是位于Source面板的Snippets:
上图我创建了一个代码片段并声明了一个时间戳格式化的方法，保存后右键文件或command+Enter运行代码了，此时该方法已被创建并可使用。
改变网络环境
有些时候我们需要模拟不同的网络情况进行弱网测试，尤其是针对移动端，那么如何在浏览器上面做到？在Network面板上就有关于这种需求的设置，有几个预设网络情况，你还可以新增模式进行具体的限速:
