HTTP入门(二):用Chrome开发者工具查看 HTTP 请求与响应

  • 本文简单总结HTTP的请求与响应
  • 本文主要目的是对学习内容进行总结以及方便日后查阅。
  • 详细教程和原理可以参考HTTP文档(MDN)。
  • 本文版权归马涛涛所有。
  • 本文所引用的图片和文字版权归原作者所有,侵权删。
  • 如有错误请在下方评论区指出,欢迎积极讨论。

查看请求

  1. 打开 Network
  2. 地址栏输入网址
  3. 在 Network 点击,查看 request,点击「view source」
  4. 可以看到请求的前三部分了

  5. 如果有请求内容的第四部分(POST),那么在 FormData 或 Payload 里面可以看到

查看响应

  1. 打开 Network
  2. 输入网址
  3. 选中第一个响应
  4. 查看 Response Headers,点击「view source」
  5. 你会看到响应的前两部分
  6. 查看 Response 或者 Preview,你会看到响应的第 4 部分

响应的js文件。会发现这个文件没有请求头,是因为js文件只是服务器响应回来的。

HTTP入门(二):用Chrome开发者工具查看 HTTP 请求与响应的更多相关文章

  1. Chrome开发者工具关于网络请求的一个隐藏技能

    这个隐藏技能的背景是,最近出于学习目的,我写了一个百度贴吧的网络爬虫,专门爬取一些指定主题的贴吧帖子. 抓取帖子用的JavaScript函数如下: function getPostByAJAX(req ...

  2. 章节八、3-如何用Chrome开发者工具查看元素

    一.如何使用开发者工具,操作步骤与火狐浏览器一致(此处不重复叙述,此处主要描述如何查找元素是否存在以及元素在页面中是否重复). 1.打开开发者选项,然后按“ctrl+f”,会出现一个输入框在输入框中输 ...

  3. 二、Chrome开发者工具详解(2)-Network面板

    摘自: http://www.cnblogs.com/charliechu/p/5981346.html

  4. Chrome开发者工具不完全指南:(三、性能篇)

    卤煮在前面已经向大家介绍了Chrome开发者工具的一些功能面板,其中包括Elements.Network.Resources基础功能部分和Sources进阶功能部分,对于一般的网站项目来说,其实就是需 ...

  5. Chrome开发者工具不完全指南(四、性能进阶篇)

    前言 Profiles面板功能的作用主要是监控网页中各种方法执行时间和内存的变化,简单来说它就是Timeline的数字化版本.它的功能选项卡不是很多(只有三个),操作起来比较前面的几块功能版本来说简单 ...

  6. Chrome开发者工具不完全指南(六、插件篇)

    本篇是Chrome开发者工具的结尾篇,最后为大家介绍几款功能强大的插件.在chrome商店里面有很多插件,没事建议大家去逛逛.不过需要FQ,所以诸位请自备神器.一.皮肤插件 首先是大家期盼已久,翘首以 ...

  7. 前端开发必备之Chrome开发者工具(下篇)

    本文介绍的 Chrome 开发者工具基于 Chrome 65版本,如果你的 Chrome 开发者工具没有下文提到的那些内容,请检查下 Chrome 的版本 本文是 前端开发必备之Chrome开发者工具 ...

  8. 使用chrome开发者工具中的network面板测量网站网络性能

    前面的话 Chrome 开发者工具是一套内置于Google Chrome中的Web开发和调试工具,可用来对网站进行迭代.调试和分析.使用 Network 面板测量网站网络性能.本文将详细介绍chrom ...

  9. Jerry和您聊聊Chrome开发者工具

    Chrome开发者工具是Jerry日常工作使用的三大调试器之一.虽然工具名称前面带了个"开发者", 但是它对非开发人员仍然有用.不信? 用Chrome打开我们常用的网站,按F12, ...

随机推荐

  1. [Git] 021 来一颗“恶魔果实”?

    0. 前言 需要新的功能时,一般会新建一条 "feature" 分支(尴尬的是,我第一眼看时,看成了 "future") 在 "feature&quo ...

  2. [Python3] 004 字符串的基本使用

    目录 1. 字符串简介 1.1 作用 1.2 注意点 2. 使用方式 2.1 用引号括起来 少废话,上例子 2.2 单.双引号可以"轮换交替" 少废话,上例子 3. 转义字符 3. ...

  3. 码云与Git的使用

    码云注册和使用 网址:https://gitee.com 注册之后新建一个仓库 接下来安装Git 协同开发Git安装与使用 下载地址:https://gitforwindows.org 安装完成之后选 ...

  4. T-聊天止于呵呵

    (现代版)俗话说:流言止于智者,聊天止于呵呵.输入一段聊天记录,你的任务是数一数有 多少段对话“止于呵呵”,即对话的最后一句话包含单词 hehe 或者它的变形. 具体来说,我们首先提取出对话的最后一句 ...

  5. javascript百度地图使用(根据地名定位、根据经纬度定位)

    需要购买阿里云产品和服务的,点击此链接领取优惠券红包,优惠购买哦,领取后一个月内有效: https://promotion.aliyun.com/ntms/yunparter/invite.html? ...

  6. 剑指offer-用两个栈来实现一个队列-队列与栈-python

    用两个栈来实现一个队列,完成队列的Push和Pop操作. 队列中的元素为int类型. 思路:使用两个栈,stackA 用来接收node stackB 用来接收 stackA 的出栈 # -*- cod ...

  7. django学习笔记(五)

    知识点概要 - Session - CSRF - Model操作 - Form验证(ModelForm) - 中间件 - 缓存 - 信号 内容详细: 1. Session 基于Cookie做用户验证时 ...

  8. C# 中的DevExpress控件的使用

    使用教程:http://training.evget.com/video/5110 C#  System 程序集https://msdn.microsoft.com/zh-cn/library/mt4 ...

  9. 关于代码手写UI,xib和StoryBoard

    代码手写UI 这种方法经常被学院派的极客或者依赖多人合作的大型项目大规模使用.Geek们喜欢用代码构建UI,是因为代码是键盘敲出来的,这样可以做到不开IB,手不离开键盘就完成工作,可以专注于编码环境, ...

  10. vue + nginx部署404

    记录: vue项目打包放到服务器,使用nginx反向代理的时候路由页面刷新报404,因为刷新时,不存在路径对应的文件或文件夹,需要在nginx配置中添加代码: index index.html; tr ...