一、基础功能篇
1. elements
在elements中主要分为两大块:
A:HTML结构面板
B:操作dom样式、结构、事件的显示面板
(1)点击箭头选中一个元素,可以在HTML面板中定位到该元素,并且可以在右侧styles面板中查看和编辑该元素的样式,编辑时,效果可以实时更新,这对于前端工程师解决样式问题是个大大的福利,在HTML面板中ctrl+F,可以对html中的内容进行搜索。
(2)在右侧Computed面板中,可以查看对应元素的盒图和该元素上最终生效的样式(包含继承父级元素的样式和自己的样式)
(3)Event Listeners面板可以查看对应元素绑定的事件(旧版本谷歌浏览器不太好用,更换选取元素时该面板不会实时更新,只有重新打开审查元素才可以,新版本谷歌浏览器已解决这个问题,可以实时更新)
click是事件名称
handler里面包含事件的回调主体内容
useCapture表示该事件是否向上冒泡
还有一个方法,如果想要找到一个元素绑定的事件,我喜欢用google浏览器的search all files,搜索元素的id或class,从而找到该元素在js中绑定的事件,如下图:
(4)在HTML面板中选中一个元素,鼠标右键点击,会看到一个弹窗,里面有若干选项:
Add attribute : 为该元素添加属性
Edit attribute:修改该元素的属性
Edit as HTML : 编辑该元素(你可以重写它的整个content)甚至修改它的标签名称
:active / :hover / :focus / :visited : 点击这四项 元素被激活 / 鼠标滑过 / 获得焦点 / 链接点击之后 四个状态下元素的样式可以在右侧styles中显示
Break on:为该元素添加dom操作事件监听。包含三个选项(树结构改变、属性改变、节点移除)。这个选项的作用是帮助我们监控和定位操作元素的代码
针对Break on的示例如下:
勾选Break on -> Node removal,在B界面切换到DOM Breakpoints 选项,可以看到有注册信息。然后我们点击click me按钮触发删除div3的事件,可以看到浏览器自动为我们定位删除该元素的代码部分,并且停止执行js代码。
2.Network
Network是一个监控当前网页所有的http请求的面版,它主体部分展示的是每个http请求,每个字段表示着该请求的不同属性和状态 。
单击面板中的任意一条http信息,会在底部弹出一个新的面板,其中记录了该条http请求的详细参数:
header(表头信息、返回信息、请求基本状态)
Preview(返回的格式化文本信息)
response(返回的原始信息)
Cookies(该请求带的cookies)
Timing(请求时间变化)
3.Application
Application部分较简单,其中Frames主要向我们展示了本界面所加载的资源列表。还可以看到cookie和local storage 、session storage 等本地存储信息,在这里,我们可以自由地修改、增加、删除本地存储 。
二、进阶篇
1. Sources:谷歌浏览器开发者工具中最有用的面板
Sources面板几乎是前端开发工程师最常用到的功能面板,也是在我看来决解一般问题的主要功能面板。通常只要是开发遇到了js报错或者其他代码问题,在审视一遍自己的代码而一无所获之后,就会打开Sources进行js断点调试,而它也几乎能解决我80%的代码问题。
左侧双击某个js,在右侧的行号上点击进行打断点,上图中的1~6分别代表:
1、停止当前断点调试
2、不跳入函数中去,继续执行下一行代码(F10)
3、跳入函数中去(F11)
4、从执行的函数中跳出
5、禁用所有的断点,不做任何调试
6、程序运行时遇到异常时是否中断的开关
当你的项目已经线上,出现了一个bug,你修复了之后无法看到它真正在线上的效果,那么你可以在打开线上的项目,直接在浏览器中修改代码然后看到效果。这样的效果往往是最直接的,这种方法也能帮你省去频繁验证发布的麻烦,毕竟身为前端码农的你也一定会听到过后台(通常情况下是后台发布)大哥的抱怨:“XXX,测试通过了没,不要出现了哈,发布一次很麻烦的!”。而在谷歌浏览器打断点的文件中直接修改,你就可以验证你的代码在线上是否可行。
即使在断点时,你也可以编辑代码,按ctrl+S保存之后,你会看到断点区域的背景由白色变为浅色,而断点会重新开始执行 ,此时你就可以验证改的bug是否生效。
2. Audits
Audits面板会针对目前网页提出若干条优化的建议,这些建议分为两大类,一类是网络加载性能,另一类是界面性能。首先打开它的主界面。
Audits面板的网络优化建议参照的是雅虎前端工程师的十四条黄金建议。
(1)减少HTTP请求次数
(2)使用CDN(Content Delivery Network,内容分发网络)
(3)增加Expires Header
(4)压缩页面元素
(5)把样式表放在头上
(6)把脚本文件放在底部
(7)避免CSS表达式
(8)把JavaScript和CSS放到外部文件中
(9)减少DNS查询次数
(10)最小化JavaScript代码
(11)避免重定向
(12)删除重复的脚本文件
(13)配置ETags
(14)缓存Ajax
点击run,进行测试
3.Console
Console面版可以输出你自己代码 ,功能非常强大,详细讲解请 点击这里 查看一位大神的文章。
4. 移动开发模式
点击elements左侧小手机的图标,即可进入移动开发模式,并不能完全模拟出手机的真实情况(比如手机会弹出软键盘,引起兼容问题)
三、性能篇
一个网站的性能主要关乎两项,一是加载性能、二是执行性能。第一项可以利用Network来分析, 第二项可以利用Timeline来分析。
加载性能分析:
Request sent(发送请求):发送HTTP请求的时间(从第一个bit到最后一个bit)
Waiting(等待响应):通常是耗费时间最长的。从发送请求到收到响应之间的空隙,会受到线路、服务器距离等因素的影响。
Content Download(下载):下载HTTP响应的时间(包含头部和响应体)