浏览器F12小结

 自从知道F12以后，每次浏览网页的时候看到什么特别炫的效果或者功能，总是忍不住按F12，然后开始研究一番，这真是一种病。下面我们用知乎网来做些演示。

这个东西是前端开发人员的利器啊，要认真写的话，写一天也写不完，先随便写一点吧，有时间再更新。

1. Elements 查看当前文档的DOM信息
   
2. Network 查看网络请求的
   
3. Source 查看当前资源文件的（CSS,JS,IMAGE）
   
4. Resources 查看本地资源信息的（cookie,local storage,session storage等）
   
5. Console 查看调试用的，也可以直接写JS代码
   

其它我不怎么用，没有研究过^-^

Elements
题主看到的是用来模拟移动设备的一个功能，这样就不用手机浏览器打开来看了。下面这个图片是用来模拟nexus 5的，

最左面那个放大镜是用来定位DOM元素的，你可以试下，选择你要查看的网页内容，点击一下，看Elements选项卡，那里应该定位到你点击的那个元素了。这个比较常用 。

右边是当前选中的DOM元素的一些CSS样式信息，可以直接编辑，在网页上看到效果，移到某个具体的CSS样式上，会出现一个复选框，可以点击启用或禁用该样式。下面这个是禁用知乎导航栏的背景色

Network
接下来看下network，这个主要是用来查看当前的网页的一些网络请求（CSS,JS,image，ajax，Document等），
这里有基本的请求信息：
URL，请求方法，响应状态码，响应数据类型，响应数据大小，响应时间和每个阶段所花费的时间。

用的比较多的估计就是XHR了，点击具体的请求，可以看到当前请求的信息和服务器响应的信息，这个很好用

下面这个图我们可以知道知乎的实时消息实现用WebSocket实现的

作者：roben
链接：https://www.zhihu.com/question/27414902/answer/37315077
来源：知乎
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。