谷歌浏览器调试简单说明

谷歌浏览器调试简单说明_第1张图片

Elements

元素面板,用来操作DOM和样式,可以 直接在上面进行编辑进行界面效果调试,主要是针对html和css的调试,可以在html中找到对应的js方法到Sources里去找

谷歌浏览器调试简单说明_第2张图片
Elements

Console

web控制台,可以在代码中通过console.log(data)来打印出数据,也可以直接在控制台输入javascript进行操作,直接获取元素,一般异常信息都是在这里头看,有异常会告诉你在哪个js哪一行,然后到对应的js方法到Sources里去找。

谷歌浏览器调试简单说明_第3张图片
Console

Sources

这里是页面的源代码,最常用的功能就是进行断点调试,顾名思义就是你可以设置在某一个节点进行调试。

谷歌浏览器调试简单说明_第4张图片
Sources

Network

包括所有的网络请求,记录当前页面的网络操作,包括详细的时间,http请求和响应,cookies等

谷歌浏览器调试简单说明_第5张图片
Network

附赠:
15个必须知道的chrome开发者技巧(GIF)
http://mp.weixin.qq.com/s/vkk-Detg0iGooqAocNPqCQ

侵图删!

感谢查看
奉上福利一枚
http://note.youdao.com/noteshare?id=a2558c7afd02fa55ff9814fd429c8884&sub=69B8AAF714104B5DA168E9D17B53C682

你可能感兴趣的:(谷歌浏览器调试简单说明)