Google调试技巧总结

工欲善其事 必先利器。

Google调试面板一一介绍：Mac: Alt + Command + I,window:Ctrl + Shift + I.

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的所有属性

console.dir() //显示元素的dom属性

Using the %c format specifier allows you to style the console output.

console.log('%cThis text is styled!', 'color: #86CC00; background-color: blue; font-size: 20px; padding: 3px;')

更多console命令 更多