浏览器F12控制台简述Network

墨蓝 2024-04-17 22:34 53阅读 0赞

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

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

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

***Network***：重头戏来了~

## Headers面板： ##

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

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

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

## Response ##

![在这里插入图片描述][20190902143226820.png]

## Preview ##

在Preview(预览功能)中，控制台会把发送过来的json数据自动转换成javascript的对象格式。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDc3MDM3Nw_size_16_color_FFFFFF_t_70 1]

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

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDc3MDM3Nw_size_16_color_FFFFFF_t_70]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/17/0e79e3e4f46c40d8a77ec575d726c296.png
[20190902143226820.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/17/fec6ea8c807142c1ab3cd604650120d5.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDc3MDM3Nw_size_16_color_FFFFFF_t_70 1]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/17/99696f213de744e29808f086f4ea9cca.png