了解F12后，每次看主页看到什么特别的效果和功能，总是忍不住按下F12，然后开始研究。 这真的病了。 在这里，让我们使用知乎网进行演示。
这是前端开发者的利器啊。 要认真写，一天写不完。 先随便写吧。 有时间就更新。
Elements显示当前文档的DOM信息
Network是网络请求的
Source显示当前资源文件的(CSS、JS、IMAGE )
资源显示本地资源信息(cookie、本地存储、会话存储等) ) )。
控制台也可以看到调试用的东西，直接写JS代码。 其他不怎么用。 我没有研究过^-^
Elements
标题是用于模拟移动设备的功能，不需要手机浏览器就可以打开。 下面的照片是用来模拟nexus 5的，最左边的放大镜是用来查找DOM元素的。 请尝试一下，选择要显示的网页内容，然后单击以查看Elements选项卡。 那里应该位于点击的要素上。 这个比较常用。
右侧是当前选定DOM元素的一些CSS样式信息，可以直接编辑。 在网页上查看效果并导航到某个特定的CSS样式时，会出现一个复选框，您可以在其中启用或禁用该样式。 以下是导航栏的背景颜色Network
接下来看看网络吧。 这主要是浏览当前网页的几个网络请求。 (CSS、JS、image、ajax、Document等)、
这里有基本的理赔信息：
URL、请求方法、响应状态代码、响应数据类型、响应数据大小、响应时间和每个阶段所需的时间。
我想最常用的应该是XHR，点击具体请求后，会显示当前请求的信息和服务器响应的信息。 这很方便
下图显示了知道的实时消息的实现是通过WebSocket实现的
作者： roben
链接： https://www.zhi Hu.com/question/27414902/answer/37315077
来源：知乎
版权归作者所有。 商业转载请联系作者取得许可。 非商业转载请注明出处。