使用Firefox浏览器开发者工具查看异步请求

来源：互联网 2023-02-21 23:07:14 版权归原作者所有，如有侵权，请联系我们

Mozilla Firefox是放源代码的网页浏览器，被众多Web开发者所喜爱，使用火狐浏览器自带的开发者工具极大效率的提高开发速度，使用火狐开发者工具中“网络”功能的能清晰的查询每次请求与数据服务器响应数据，帮助开发者调错，在实际开发中自己一般都是使用火狐的“ 网络”功能查看异步请求的情况，有效减少页面JavaScript与服务端代码调错

工具/原料

火狐浏览器
火狐自带开发者工具

方法/步骤

本文所使用的火狐为 32位56.0版本，火狐浏览器的开发者工具为中文界面，新版的火狐能更加直观的查看网络请求上下文的详情具体信息，突出显示重点的内容并做了层级结构划分，非常利于阅读

使用Firefox浏览器开发者工具查看异步请求

如何进入火狐浏览器调试界面？如何只选择有效的XHR异步请求？

（1）在开发页面，按F12进入开发中工具；

（2）选中“网络”模块，通常浏览器需要请求大量html、js、css与后台异步方法，实际上开发者只关心 XHR请求的方法，因此只默认选中 ‘XHR’标签即可

使用Firefox浏览器开发者工具查看异步请求

如何查看火狐异步请求的URL信息？如何编辑重发URL？

（1）火狐提供详细请求信息查看，包含请求的URL信息，响应头，请求头；

通过请求头可以查询到浏览器的请求的主机、请求格式、链接状态，

通过响应头可以查看到请求服务器类型，比如本文演示请求服务器为微软 IIS，如果为php网页通常请求为Apache 服务器

（2）火狐提交URL编辑重发功能，在调试时可以再次向服务器发起请求；

使用Firefox浏览器开发者工具查看异步请求

如何查看异步XHR请求上服务端传递的参数数据？

（1）火狐提供突出显示的层级结构参数，在界面一般通过JQuery获取值来组建JavaScript对象传递数据到后台，可能因为书写错误部分参数未获取到值，通常是开浏览器JavaScript调试查看对象是否赋值，其实通过浏览器传递的报文参数是最快排错方式，查看传递的参数即可知道页面取值情况，Web开发者也最关心传递的参数详情

使用Firefox浏览器开发者工具查看异步请求