工欲善其事 必先利器。
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命令
更多