工欲善其事 工欲善其事，必先利器。
Google调试面板一一介绍：F12回想一下大家都应该知道，哈哈
element面板
这个面板显示了页面所有html代码。用于调试css代码。右側展示左側相应选择元素属性。点击属性值可进行改动查看。
调试小技巧：
1，改变字体大小或者间距时，按住alt+箭头可零点一个像素间距调整，按住shift+箭头可十个像素间距调整；
2。定位元素快捷键：ctrl+shift+c
3，edit as HTML快捷键 F2
properties用于查看属性所具有的所有属性方法
Network面板
这个面板用于查看网络响应内容。包含Ajax类请求。点击左側请求右側显示请求响应头部详细信息及cookies。
Required Headers/Response Headers请求/响应头信息。 Query String Parameters 请求參数。可实时检測每一个请求是否被正确发出、对应信息是否正确等。
Source面板
这个面板可进行js调试
选择需调试js，单击側栏加入断点。页面运行到断点处出现右側调试单步控制条，各局部、全局变量；
F8 pause/continue 暂停继续
F10 step over 单步跳过
F11 step into 单步进入
shift+F11 step out单步跳出
在watch expressions(查看变量)处，输入你想查看的变量名可方便查看变量变化
在js右键选择本地改动可调出控制台，在控制台进行属性改动调试。
单击{}可美化js
TimeLIne面板
这个面板显示系统载入页面耗时情况，方便开发人员在优化页面载入速度时进行针对性优化。
resource面板
显示该页面全部资源 包含图片、css、js，可对页面进行全面下载浏览。对于意图细致研究某页面时发挥非常大作用。
audits面板
对于前端开发人员是一大利器，可提供优化页面的建议。
点击run之后就可以显示。
console面板
除了查看错误信息、打印调试信息（console.log()）、写一些測试脚本之外，还能够当做js API用。比如：依次输入var d=new Date() ->按enter -> d -> 按enter -> console.dir(d)就可以显示d的全部属性
版权声明：本文博主原创文章，博客，未经同意不得转载。