2014.4.8.Chrome调试工具的使用 2014.4.8.Chrome调试工具的使用

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

文章图片
1.png
（用Windows自带的画图编辑的截图，有些简陋）

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

文章图片
1222.png
（需要补充）
Sources
这个面板用于展示源文件
（需要补充）
Network
Network标签页用于分析网站请求的网络情况
按F5刷新，开始分析

文章图片
3.png
【2014.4.8.Chrome调试工具的使用】在这里也可以模拟在不同网速（3G、4G、GPRS等）情况下页面的网络响应时间
在输入框中输入关键字搜索对应请求的文件
Timeline
Timeline告诉我们整个代码的运行时间
Timeline(时间轴)不是指网络请求的响应时间（这个在Network里）
这个Timeline指的JS执行时间、页面元素渲染时间
点击Timeline 按F5刷新可查看渲染时间