Chrome浏览器面板基础了解

本篇参考博客连接：

http://www.javashuo.com/article/p-pubornuu-bc.html

http://www.cnblogs.com/camille666/p/memory_debug_chrome.html

拓展连接：

https://developers.google.com/web/tools/chrome-devtools/?hl=zh-cn#_2

Chrome开发者工具面板

面板上包含了Elements面板、Console面板、Sources面板、Network面板、Performance面板、Memory面板、Application面板、Security面板、Audits面板这些功能面板。

这些按钮的功能点以下：

• Elements:查找网页源代码HTML中的任一元素,手动修改任一元素的属性和样式且能实时在浏览器里面获得反馈。
• Console:记录开发者开发过程当中的日志信息，且能够做为与JS进行交互的命令行Shell。
• Sources:断点调试JS。
• Network:从发起网页页面请求Request后分析HTTP请求后获得的各个请求资源信息（包括状态、资源类型、大小、所用时间等），能够根据这个进行网络性能优化。
• Performance:记录并分析在网站的生命周期内所发生的各种事件，以此能够提升网页的运行时间的性能。
• Memory:若是你须要Timeline所能提供的更多信息时，能够尝试一下Profiles,好比记录JS CPU执行时间细节、显示JS对象和相关的DOM节点的内存消耗、记录内存的分配细节。
• Application:记录网站加载的全部资源信息，包括存储数据（Local Storage、Session Storage、IndexedDB、Web SQL、Cookies）、缓存数据、字体、图片、脚本、样式表等。
• Security:判断当前网页是否安全。

• Audits:对当前网页进行网络利用状况、网页性能方面的诊断，并给出一些优化建议。好比列出全部没有用到的CSS文件等。

Elements面板

上图左侧是网页的主体标签，须要查看哪一个节点直接双击就能够；

上图右侧是elements面板中的几个子功能：包含有Styles/Computed/EventListeners/DomBreakpoints/Properties/Accessibility多种功能。

• Styles:查看当前选中的标签的样式设置，其中标签状态可选，如图所示，直接勾选便可，也能够经过inherited from来查看继承的样式，同时这里能够直接编辑元素的样式，能够直接在浏览器中查看效果，也能够同勾选样式或者改变样式数据来测试各类样式的效果，很是方便。
• Computed：点击右侧Computed面板，能够编辑左侧选中的盒子模型参数，全部的值都是能够修改的;点击不一样的位置(top、bottom、left、right) 就能够修改元素的padding、border、margin属性值。（基本归纳完毕，我没有添加了）
• EventListeners：这里是查看页面元素添加过的事件。
• DomBreakpoints：暂时不清楚。
• Properties：元素具备的属性与方法，但这里我本身并无看太明白。
• Accessibility：暂时不清楚。
• 查看网页的本地修改历史  这一点还没发现\(^o^)/~（摘自原博客）
  • 点击Styles面板中修改过属性的文件名，会跳转到Source面板
  • 在文件位置右击选择Local modifications,能够查看本地的全部修改记录
  • 点击指定的时间点能够看到粉红背景的删除内容和绿色背景的添加内容
    
    

 

Console面板

elements面板左下面板还有的选项就是缩小版的打印台哈：1是选择一些功能，见下面的右图，右图的这些功能我还没搞清楚，搞清楚了再来补充；2是选择文件；3是过滤；4不清楚；5是查看各个文件的console值

         

Sources面板

这个面板我目前主要是用于调试js,左侧分为page/filesystem/overrides/contentscripts/snippets几个功能,目前主要查看page功能，查看页面的各个源文件，选择相应的js文件，而后选择要调试的代码段使用右侧的功能键进行调试，右侧一层是开始/暂停/跳过/进入调试具体功能函数的按钮，二层watch是监视须要监视参数，观察其具体变化，再下层的这些都并不太了解，待补充。

Network面板

 这个面板主要用来查看网络请求、页面响应的各个参数，方便优化。1行是用来选择须要查看请求响应的方式，2行选择查看须要查看的文件类型，3行是是显示请求响应时间，4行是具体的各个页面请求数据。

第1行：

• group by frame: 逐帧显示
• preserve log: 保留请求日志
• disable cache:禁用缓存
• offline:离线
• online的各个选择：模拟调试3G网络测试

第4行：选择一个文件双击

• headers:请求头信息和响应头信息
• preview: 根据你所选择的资源类型（JSON、图片、文本）显示相应的预览。
  　　　　在Preview(预览功能)中，控制台会把发送过来的json数据自动转换成javascript的对象格式
• response:响应主体，页面内容
• timing:时间

performance面板

这个面板主要是用来查看调试网页的性能的，有多种选择，这个层次目前对于我来讲过高了，略过不表。

这里暂告一段落。