专注于WEB前端开发,HTML基础知识,CSS基础知识,HTML5和CSS3,Javascript,Jquery,Jquery插件,移动开发,微信开发等技术话题

当前位置:CSSTOP主页 > JS技巧与优化 > 正文

Chrome开发者工具控制面板介绍

打开chorme器,按F12进入开发者工具,会看到顶部有一组工具栏,每一个选项都有特定的功能,如下图所示:

每个选项的具体功能如下:
Elements:DOM节点和CSS。Elements 面板可以让您查看 DOM 树里的所有节点,包括JavaScript创建的节点和 iframe 里的节点;当然,您也可以看到每个节点的CSS样式。
Resources:网页资源。Resource 面板可以让您查看当前网页加载的所有相关资源,包括Cookie、网页缓存、HTML5数据库和本地存储等。
Network:网络连接情况。Network 面板可以让您查看所有的网络请求,包括图片、JS文件、CSS和AJAX等。
Sources:
Timeline:时间抽。Timeline 面板可以让您了解解析当前网页所花费的时间细节,包括解析JavaScript、加载网络资源、绘制DOM等。
Profiles: