Ajax学习:如何在Chrome网络控制台查看通信报文(请求报文/响应报文)

这篇具有很好参考价值的文章主要介绍了Ajax学习:如何在Chrome网络控制台查看通信报文(请求报文/响应报文)。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

第一步:F12开启控制台,

第二步骤:打开网络标签

然后刷新页面

在网络标签位置处,这时候会出现所有发送的请求

chrome查看请求报文,Ajax,网络,学习,服务器

 点击第一个:会出现内容

chrome查看请求报文,Ajax,网络,学习,服务器

 预览部分:是解析 观察解析结果处

标头=headers:主要观察请求头和请求体部分

chrome查看请求报文,Ajax,网络,学习,服务器


GET请求部分 

请求标头:

chrome查看请求报文,Ajax,网络,学习,服务器

 点击上方查看源代码:就会出现请求行(请求类型 GET/POST等+url请求路径(网址后面)+ HTTP协议的版本、(HTTP/1.1等))--是get请求,请求体内容是空的
chrome查看请求报文,Ajax,网络,学习,服务器

 查询字符串参数,是对请求报文中的请求行中的url参数进行解析(可以准确看到参数是否有成功发送)---是请求体部分

没有参数--这是get请求(有请求参数)

chrome查看请求报文,Ajax,网络,学习,服务器

对url参数解析 (有参数)

chrome查看请求报文,Ajax,网络,学习,服务器

 

查看响应标头(包含响应头+行)部分

chrome查看请求报文,Ajax,网络,学习,服务器

点击查看源代码部分 (包含了响应行+响应头)

chrome查看请求报文,Ajax,网络,学习,服务器

 响应体:在响应部分是html内容 (服务端返回的内容)

chrome查看请求报文,Ajax,网络,学习,服务器

 


POST请求部分--使用插件powtwoman

查看请求标头源代码部分

chrome查看请求报文,Ajax,网络,学习,服务器

chrome查看请求报文,Ajax,网络,学习,服务器

 请求体在在负载里面--表单数据中--这是post

原始请求体内容在查看原代码处,点击发送按钮,浏览器帮我们将http报文封装好,发送到目标服务器的指定端口chrome查看请求报文,Ajax,网络,学习,服务器

 

chrome查看请求报文,Ajax,网络,学习,服务器

 如果响应的内容是跳转,在响应中看不到文章来源地址https://www.toymoban.com/news/detail-556203.html

到了这里,关于Ajax学习:如何在Chrome网络控制台查看通信报文(请求报文/响应报文)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • chrome 浏览器在 112 正式版本以及 114 canary 版本从 devtools 控制台复制文本不会复制高亮显示的文本?

    我的 chrome 浏览器版本如下: 版本 112.0.5615.138(正式版本) (64 位) 今天我在写代码的时候报错了,看了一下控制台浏览器,是某个属性没有定义,然后我双击这个属性名称 ctrl + c 复制,最后粘贴的时候发现 文本不正确 , 离了个大谱! 我特意找了一下这个 bug:https://bu

    2023年04月22日
    浏览(57)
  • Chrome浏览器控制台Unchecked runtime.lastError: The message port closed before a response was received.解决

    大家好,今天和大家分享一报错的解决方法 在使用vue开发时使用Chrome运行的时候出现了一个报错,当时什么都没有写就报错了,就找了一下这个问题,后来发现是因为迅雷拓展的问题,下面就一起来看看如何解决这个问题。 今天在做项目时使用Chrome打开项目,当打开控制台

    2024年02月13日
    浏览(59)
  • 【网络编程】| 搭建控制台通信demo

    前边我们提到TCP协议是面向的连接的,在 通信时客户端与服务器端必须建立连接 。在网络通讯中,第一次主动发起通讯的程序被称作客户端(Client)程序,简称客户端,而在第一次通讯中等待连接的程序被称作服务器端(Server)程序,简称服务器。 一旦通讯建立,则客户端和服务

    2024年02月06日
    浏览(38)
  • cockpit管理控制台-尚文网络xUP楠哥

    ~~全文共1499字,阅读需约5分钟。 进Q群11372462,领取专属报名福利,包含云计算学习路线图+代表性实战训练+大厂云计算面试题资料! Cockpit 是红帽开发的web方式的服务管理工具,从Linux7版本开始就有了,其优点可以管理很多种服务;除了最基本的主机系统信息,CPU、内存使用

    2024年02月02日
    浏览(40)
  • 控制台架构体系学习资源

    微软 微软官方教程:欢迎查看 Windows 控制台文档!

    2024年01月19日
    浏览(44)
  • pc端项目的h5页面运行在手机浏览器使用vconsole查看页面元素、控制台、请求等信息

    使用vconsole来查看h5页面运行在手机浏览器上的页面元素、控制台、请求等信息 在vue项目中,也可以不需要使用npm安装即可使用 话不多说,直接把下面代码放到 body 标签中即可 直接把下面代码放到 body 标签中即可 放到根目录的index.html页面的body中,如下图

    2024年02月04日
    浏览(58)
  • 如何使用Python的交互控制台

    简介 Python的交互控制台(也叫做Python解释器,或是Python Shell)为程序员提供了\\\"运行指令\\\"和\\\"不创建文件测试测试代码\\\"的快速途径。 交互控制台可以调用所有的Python内置函数和任何已安装的模块、命令行历史、和自动补全。它为\\\"探索Python语言\\\"和\\\"写好代码后粘贴入文件\\\"提供了

    2024年02月02日
    浏览(68)
  • 记录--如何防止网站信息泄露(复制/水印/控制台)

    中午休息的时候,闲逛公司内网,看到一个url,就想复制一下url,看看url对应的内容是啥,习惯性使用ctrl+c,然后ctrl+v,最后得到是 禁止复制 ,哦,原来是禁用了复制。这能难倒一个前端开发吗?当然不能。于是打开了控制台,这时,发现页面自动执行了一段立即执行函数

    2024年02月03日
    浏览(64)
  • 【前端学习记录】neffos插件与控制台交互

    最近项目上有个需求需要用到websocket,于是就学了一下关于websocket的使用方法。不过由于后台使用的框架限制,需要前后端一起使用neffos插件,中间踩了很多的坑,这里简单记录一下。 WebSocket 是一种在客户端和服务器之间实现双向通信的协议,它允许服务器主动向客户端推

    2024年02月09日
    浏览(61)
  • C#控制台应用程序如何添加窗口关闭事件?

    公司有一个控制台应用程序,在关闭控制台应用程序窗口前,想处理一下业务逻辑。还有比如误操作关闭了,或者像消息队列启动了发送消息提醒,那关闭了窗口代表控制台应用销毁了,也需要发送消息通知。那这个时候添加关闭窗口事件就派上用场了。 很多小伙伴问,有没

    2024年02月13日
    浏览(47)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包