关注大学生就业,培养泛IT高端人才

陕西新榜样官方网站

您的位置: 主页 > 新闻动态 > 公司动态 >

审查元素都有哪些模块?

来源:WEB开发培训 发布时间:2018-11-08 浏览量:

  以最常用的百度搜索界面为例,打开审查元素,右侧出现审查元素界面,也就是网页的HTML代码元素,其中包括以下模块:

  一、Elements(元素/标签):

  查看页面中所有的HTML元素,左面是用树形结构展示的HTML标签,鼠标移到上面会在页面中显示这个标签的位置、实际长宽等。右面是每个元素的CSS属性,继承关系等等,还有DOM属性、继承关系、绑定的事件。

  二、Resource(资源):

  显示页面中用到的所有资源,页面、图片、样式表、脚本等。还有本地储存、Cookie。

  三、Sources(源代码):

  用于对js进行调试,左面有所有js代码的列表,中间是代码区域(下面有个格式化代码的功能),右边是断点、触发器、调用栈等等。

  四、Network(网络):

  显示所有的网络事件,你需要先打开开发人员工具,切换到这个选项卡,之后再刷新页面才会有显示。

  这里会显示每个文件的信息、由何处触发这个网络活动、HTTP报头等等。

  五、Profiles(报告):

  可以截取一段时间的CPU使用情况报告、CSS类使用情况报告(用来剔除未用到的CSS)、堆内存快照(用于优化js脚本和DOM结构)。

  六、Console(控制台):

  这是一个js控制台,你可以直接运行js代码,对页面进行操作。

  七、Timeline(时间轴):

  同样需要先打开这个选项卡,点击下面的“开始捕捉”才会有显示。

  这个选项卡会显示页面中的一切时间,包括运行脚本、网络活动、页面渲染等等。

  而且会很详细的显示每个活动占用的CPU和内存。

  可以利用这些信息对网页进行优化。

  八、Audits(审计):

  让Chrome给你的网页提出一点建议,一般是关于哪些代码不必要、没用到。

  更多相关WEB开发培训资讯,请点击: www.xinbangyang.com

  联系地址:陕西省西安市碑林区东大街端履门云龙大厦9楼

IT培训 服务