浏览器F12控制台简述Network

Elements：主要用来查看前面界面的html的Dom结构，和修改css的样式。css可以即时修改，即使显示。大大方便了开发者调试页面，这真是十分友好的~

console：这个除了查看错误信息、打印调试信息(console.log())、写一些测试脚本以外，还可以当作Javascript API查看用。例如我想查看console都有哪些方法和属性，我可以直接在Console中输入"console"并执行~

Sources：主要用来调试js和查看源代码

Network：重头戏来了~

Headers面板：

列出资源的请求url、HTTP方法、响应状态码、请求头和响应头及它们各自的值、请求参数等等

一般情况下我们看Network里面的Preview和Response的结果似乎一模一样。

不管是请求页面，请求页面还是请求js还是请求css，二者的结果都一样。直到今天从服务器端向web前端发送一段json格式的数据，才发现Preview的特殊功效。

Response

Preview

在Preview(预览功能)中，控制台会把发送过来的json数据自动转换成javascript的对象格式。

而且可以层层展开，方便前端工程师遍历调用（特别是在多维的情况下）。