Chrome浏览器开发者工具调试冷知识

1. 格式化压缩文件
   浏览器调试的时候总会遇到一些被压缩过的文件，该怎么办呢，当然是选择解决啊。如图1所示，箭头所指的地方，通过点击{}就可以格式化代码，使得更方便调试。
   图1 格式化

2. 事件监听断点
   当你不能直接找到某一事件的js内容时，如果知道事件名可以通过Ctrl+Shift+F直接搜索；如果不知道就在开发者工具里面找到Sources，然后在Event Listener Breakpoints找到对应事件类型打上勾。比如给click打上勾，click事件就会进入到对应事件的方法并暂停下来。
   图2 事件监听断点

3.模拟不同浏览器以及移动设备
开发者工具–>Source–>右上角三个点–>More tools–>Network conditions
以上步骤即可看到如图3左下角所示内容。NetWork throttling可以模拟手机的网速。User agent去掉Select automatically（自动选择），下面的下拉框可以选择模拟不同的浏览器（IE、Firefox、Opera、Safari等）和移动设备（Android，iPhone）。注意点击需要模拟的浏览器或移动设备之后刷新浏览器才能看到效果，另外用完之后记得勾选Select automatically（自动选择）。
图3 模拟浏览器和移动设备

除了以上方法可以模拟移动设备以外，Chrome浏览器还提供了一个专门模拟移动设备的功能。如图4所示，可以选择不同的移动设备，另外还可以自己编辑。
图4 Toggle device toolbar模拟移动设备

想了解更多的前端知识，欢迎来微信关注前端程序媛，我们一起学习进步~~