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
