Chrome开发者工具学习

Chrome开发者工具分为8个大模块，每个模块功能为：

1.Element标签页：用于查看和编辑当前页面中的HTML和CSS元素。

左侧可以看到页面的源码，HTML和CSS元素，双击可以进行修改。右侧是css设置的值，可以进行修改。Properties里面有元素具有的方法和属性可以查看。

 

2.Netword标签页：用于产看HTTP请求的详细信息，如请求头、响应头及返回内容等。当打开Chrome开发者工具后发起的请求才会在这里显示。点击具体的请求，可以查看该请求的详细内容。

该请求详细内容：

3.Source标签页：用于查看和调试当前页面所加载的脚本的源文件。

设置断点进行调试，可以对控制台中的局部变量、闭包变量进行修改。还可以自己设置时间断点。

4.TimeLine标签页：用于查看脚本的执行时间、页面元素渲染时间等信息。

5.Profiles标签页：用于查看CPU执行时间与内存占用等信息。

6.Resource标签页：用于查看当前页面所请求的资源文件，如HTML,CSS样式文件等。还可以查看到相关如Cookies、HTML5的Database和LocalStore等，可以对存储的内容编辑和删除。

7.Audits标签页：用于优化前端页面，加速网页加载速度等。

执行run后的效果：

 

8.Console标签页：用于显示脚本中所输出的调试信息，或运行测试脚本等。

 控制台除了查看错误信息，打印调试信息（console.log()）,写一些测试脚本外，还可以当做javascript API查看用。

输入 Console可以查看有哪些方法和属性。