如何使用浏览器的f12调试页面

一、背景介绍

二、知识剖析

        F12 开发人员工具是一套按需采用的工具，网站开发人员可以随时在任何网页上使用 F12 工具，从而快速调试 JavaScript、HTML 和级联样式表 (CSS)，还可以跟踪并查明网页或网络的性能问题。

       F12的存在要求程序开发人员重要的数据不能写在HTML页面中，要写在一般处理程序或者后台中，不然很容易被用户知道比如密码之类的。对WEP开发人员有利的地方就是可以参照别人网站的布局样式等来构思自己的网站。因为F12可以看到网站的布局、样式、js等代码哦！

三、常见问题

如何使用浏览器的F12调试页面？    

四、解决方案

     把自己编写好的网页在浏览器中打开，按F12快捷键打开开发人员工具

它一共提供了8大组工具：

1. Elements: 允许我们从浏览器的角度看页面，也就是说我们可以看到chrome渲染页面所需要的的HTML、CSS和DOM(Document Object Model)对象。此外，还可以编辑这些内容更改页面显示效果；

2. Network: 可以看到页面向服务器请求了哪些资源、资源的大小以及加载资源花费的时间，当然也能看到哪些资源不能成功加载。此外，还可以查看HTTP的请求头，返回内容等；

3. Sources: 主要用来调试js；

4. Timeline: 提供了加载页面时花费时间的完整分析，所有事件，从下载资源到处理Javascript，计算CSS样式等花费的时间都展示在Timeline中；

5. Profiles: 分析web应用或者页面的执行时间以及内存使用情况；

6. Resources: 对本地缓存（IndexedDB、Web SQL、Cookie、应用程序缓存、Web Storage）中的数据进行确认及编辑；

7. Audits: 分析页面加载的过程，进而提供减少页面加载时间、提升响应速度的方案；

8. Console: 显示各种警告与错误信息，并且提供了shell用来和文档、开发者工具交互。

五、编码实战

六、拓展思考

             如何通过F12开发者工具来学习优秀网站的设计 

打开你认为优秀的网站，在打开浏览器的开发者工具，利用工具可以很好的了解这个完整是如何布局的，可以查看相应的css和js文件。。            

七、参考文献

           1，神器——Chrome开发者工具

           2，百度百科        

八、更多讨论

         不同浏览器的开发者工具有什么差别，哪个浏览器的开发者工具最好用