Google调试技巧总结

选择sources模块，然后对要调式的方法设置断点。

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

谷歌浏览器network用法详解:

network工具功能强大，能够让我看到网页加载的信息，比如加载时间，和先后顺序，是否是并行加载，还是堵塞加载。

下面进入正题:

 

上面就是network面板的截图。

默认情况下有八列:

（1）.Name:表示加载的文件名。

（2）.Method:表示请求的方式。

（3）.Status:表示状态码（200为请求成功，304表示从缓存读取）。

（4）.Type:表示文件的MIME Type的类型。

（5）.Initiator:表示发出这个文件请求的发出者。

（6）.Size:表示文件大小。

（7）.Time:表示每个请求的总时长。

（8）.Timeline:以图表的形式显示元素的请求和加载情况。

当然内容不仅仅先于以上8个，右击上面八个任意一个选项卡可以弹出一个菜单，可以查看更多内容:

 

不同颜色的横向柱条表示不同的含义:

 

（1）.Stalled：浏览器得到要发出这个请求的指令，到请求可以发出的等待时间，一般是代理协商、以及等待可复用的TCP连接释放的时间，不包括DNS查询、建立TCP连接等时间等。

（2）.Request sent：请求第一个字节发出前到最后一个字节发出后的时间，也就是上传时间。

（3）.Waiting 请求发出后，到收到响应的第一个字节所花费的时间(Time To First Byte)。

（4）.Content Download 收到响应的第一个字节，到接受完最后一个字节的时间，就是下载时间。

其他条目的含义，大家可以自行在网上查询。

选项卡筛选:

 

点击顶部选项卡可以实现加载的资源筛选效果。

查看文件详细信息:

 

点击具体的文件可以查看更为详细的信息。

区间选中:

点击顶部类似于时间轴的区域，可以实现定位加载时间区间效果。

 

再双击就可以恢复到原来状态。

--------------------------------------------------------------------------------------
温馨提示：我是一个技术男，但我天生乐观的性格让我与技术男的形象有冲突，爱交朋友和聊天，想找我可以随时联系我。不信搜索我的微信公众号“好有趣耶”或者扫我的图标二维码，可以看到好多搞笑段子与微简报。