浏览器F12控制台简述Network

2024-06-03 19:03:28

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的对象格式。

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

浏览器F12控制台简述Network相关推荐

浏览器F12控制台中文改成英文
浏览器F12控制台是中文时如何设置为英文. 一.点击控制台右上角图标. 二. "语言"选项从浏览器界面语言设置成英文. 三.重新加载devtools,即可变为英文.
Chrome浏览器 F12控制台中文改成英文
当Chrome浏览器 F12控制台是中文,怎么设置成英文? 第一步:点击控制台右上角的设置图标第二步:"语言"选项从浏览器界面语言设置成英文第三步:重新加载DevTools,控 ...
浏览器F12控制台无法抓包，如何解决
文章目录一.浏览器控制台不能获取接口二.如何解决无法获取到接口的问题一.浏览器控制台不能获取接口二.如何解决无法获取到接口的问题 1.查看是否设置了过滤 2.取消过滤器即可抓包
chrome浏览器F12调试模式network不显示接口请求地址解决办法
重置设置即可
chrome浏览器F12 Network中Timing参数含义
前言 Chrome浏览器开发者工具Network窗口下,Timing中显示资源在整个请求生命周期过程中各部分花费的时间. Timing各参数截图如下: 参数具体含义: Queueing:请求文件顺序的 ...
浏览器F12功能总结
不同浏览器F12控制面板的中英文显示 360浏览器:英文 IE浏览器:中文搜狗:英文谷歌浏览器:英文火狐浏览器:安装firebug英文;没有按照就默认中文 F12控制台功能元素(Element ...
浏览器F12（开发者调试工具）功能介绍
调试时使用最多的功能页面是:元素(ELements).控制台(Console).源代码(Sources).网络(Network)等. 元素(Elements):用于查看或修改HTML元素的属性.CSS ...
测试人员如何使用浏览器的f12_浏览器F12（开发者调试工具）功能介绍
调试时使用最多的功能页面是:元素(ELements).控制台(Console).源代码(Sources).网络(Network)等. 元素(Elements):用于查看或修改HTML元素的属性.CSS ...
WEB浏览器F12调试页面
WEB浏览器F12调试页面 Elements-标签页,可以查看并且编辑页面元素,在左侧可以点选某一个元素,该元素会在页面上高亮,同时在右侧显示该元素的所有样式: Console-Console面板,就 ...

最新文章

热门文章