Google调试技巧总结

工欲善其事 工欲善其事，必先利器。

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的全部属性

版权声明：本文博主原创文章，博客，未经同意不得转载。