网页开发利器之Chrome开发者工具简介

工欲善其事,必先利其器,好的开发工具,可以让你的开发得心应手,帮助你梳理流程逻辑,可以让你明察数据传输,下面介绍Chrome浏览器开发者工具的使用技巧。浏览任何一个网页的时候,只要按下F12或者Ctrl+Shift+I或者在【设置/更多工具/开发者工具】中打开。

1) Elements  元素

点击标签Elements,可以看见当前网页的源码结构,点击任何一个节点,可以查看当前标签以及它的父子兄弟元素,也可以直接编辑标签内容,为标签增加属性和内容等。
右侧Styles列出了所有此标签引用的CSS样式,具体每一个样式是哪个文件定义的,样式是否有效都列了出来,同样也可以在这里直接增加删除修改样式,修改后的结果会实时的在页面上发生改变。
Chrome开发者工具网页源码浏览和编辑
Chrome开发者工具网页源码浏览和编辑

右侧Computed列出了当前DOM元素的盒模型图示,以及最终的CSS样式值,因为每个标签的样式属性可能定义在多个文件多个片段中。

右侧Event Listeners列出了当前选择的DOM节点上绑定的监听动作。

Chrome元素浏览器查看DOM节点绑定的Javascript动作
Chrome元素浏览器查看DOM节点绑定的Javascript动作
Properties标签以树形结构列出了当前节点的原型属性。

2)Console 控制台

在这里可以执行任意的Javascript代码来调试页面,可以调用页面中的Javascript函数操作DOM。

也可以在代码中使用下面列举的方法来记录调试日志和错误信息,这些信息是不会展示在页面上的,只有当打开控制台才可以看见。

常用的console的方法:
console.log() 基本记录
console.error() 显示错误消息
console.group() 和 console.groupEnd() 对消息进行分组显示
console.assert() 显示条件性错误消息
console.time() 和 console.timeEnd() 记录一段代码的时耗
console.clear() 清除控制台记录
console.count() 计数
console.table() 以表格形式展示数据

还有更多的方法不一而足,控制台使用时会有支持的函数自动完成提示。

一些公司前端开发团队会在控制台这里发布招聘信息以便寻求人才。

知乎在Chrome控制台发布的招聘信息
知乎在Chrome控制台发布的招聘信息

3)Sources 资源

这个栏目以树状结构列举出来当前页面加载的所以页面要素,包括HTML/CSS/Javascript以及图片资源。

可以查看当前页面加载的所有文件资源的源码,也可以在Javascript文件中设置断点方便调试。

Chrome查看页面资源和设定调试断点
Chrome查看页面资源和设定调试断点

4 ) Network 网络

此栏目会记录页面的所有的网络请求, 请看下图的标注说明:

Chrome开发者工具网络请求栏目说明
Chrome开发者工具网络请求栏目说明

可以看到,网络捕获功能十分强大,可以记录所有发出的请求的HTTP详情,可以按条件过滤需要特别关心的请求,可以定位加载时候有问题的资源, 可以看到时延的时间,可以看到HTTP数据包的详细内容。

5 ) Performance 性能

分析运行时性能,这个属于比较高级的功能,如果Javascript出现卡顿,视差滚动,页面不够流畅时可以使用这个功能,分析器可以在函数级别上找到开销大的代码,建议在匿名模式下去分析,这样可以避免安装的插件带来的外部影响。这里列举出Google官方给出的建议:

*)不要编写会强制浏览器重新计算布局的 JavaScript。将读取和写入功能分开,并首先执行读取。
*)不要使您的 CSS 过于复杂。减少使用 CSS 并保持 CSS 选择器简洁。
*)尽可能地避免布局。选择根本不会触发布局的 CSS。
*)绘制比任何其他渲染活动花费的时间都要多。请留意绘制瓶颈。

6)Applications  应用

这个栏目可以查看Manifest,离线缓存等信息,可以浏览和修改Cookie信息。

Chrome开发者工具查看Manifest和Cookie信息
Chrome开发者工具查看Manifest和Cookie信息

综上所述,Chrome开发者工具的功能非常强大,本文只是浅显的做了介绍,还有更多更专业的功能需要您自己发现和使用,掌握好这个工具,程序的开发调试工作便如虎添翼,简化工作复杂度,提高工作效率!

发表评论

电子邮件地址不会被公开。 必填项已用*标注

*