Chrome调试工具的使用

<strong>(目前对于javascript等知识并不了解，此章节需要在今后完善 )</strong>
按F12打开调试工具，显示如图
样本：观察者网首页

1.png

（用Windows自带的画图编辑的截图，有些简陋）

• Elements
  Elements面板是用来控制DOM结构和CSS样式的。
  <strong>(!DOM是啥？,以后要弄明白)</strong>
  左侧区域是html的源代码
  可以在左侧区域对HTML内的元素进行编辑，移动，或者删除
  可以查看元素绑定了哪些事件
  在右侧区域可对选中的元素的样式进行修改，可直观地看到所选元素的
  宽，高，内边距，外边距的值
  所有的修改都会即时在页面上得到呈现。

• Console
  控制台，用于调试JS和向百度投简历

  
  
  1222.png
  
  

  （需要补充）

• Sources
  这个面板用于展示源文件
  （需要补充）

• Network
  Network标签页用于分析网站请求的网络情况
  按F5刷新，开始分析

  
  
  3.png
  
  

  在这里也可以模拟在不同网速（3G、4G、GPRS等）情况下页面的网络响应时间
  在输入框中输入关键字搜索对应请求的文件

• Timeline
  Timeline告诉我们整个代码的运行时间
  Timeline(时间轴)不是指网络请求的响应时间（这个在Network里）
  这个Timeline指的JS执行时间、页面元素渲染时间
  点击Timeline 按F5刷新 可查看渲染时间

2.png

• Profiles
  在这里可以查看CPU执行时间与内存占用等信息
  （需要补充）
• Resource
  Resources面板展示了各种资源文件
  包括本地存储，cookies，cache等信息
  （需要补充）
• Security
  不知道干啥用的，这个部分以后弄明白了要补上
  （需要补充）
• Audits
  在这里Chrome 对开发者提供了关于此页面的优化建议

123333.png