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. C++类中的函数重载

    1,本课程最初阶段就学习了函数重载,但是那时研究目标仅限于全局函数,到目前 为止我们学习了三种函数: 1,全局函数: 2,普通成员函数: 3,静态成员函数: 这三种不同类型的函数之间是否可以构成重载, ...

  2. 搜索 问题 D: 神奇密码锁

    这道题个人认为隐含着状态转换,所以想到的还是BFS,将其中一位数加一或减一或交换临近两位,进入下一状态,使用一个大小为10000的bool数组判重,由于BFS的特性,得到的一定是最小步数: 普通BFS ...

  3. 剑指offer-栈的压入、弹出序列-栈和队列-python

    题目描述 输入两个整数序列,第一个序列表示栈的压入顺序,请判断第二个序列是否可能为该栈的弹出顺序.假设压入栈的所有数字均不相等.例如序列1,2,3,4,5是某栈的压入顺序,序列4,5,3,2,1是该压 ...

  4. JS调用PageMethods

    http://www.cnblogs.com/Ren_Lei/archive/2010/07/14/1777413.html JS调用PageMethods 操作步骤: 1.新建一个WebApplic ...

  5. kafka复习(2)

    一.简介 --------------------------------------- 1.kafka是一个分布式的.可分区的.可复制的消息系统.它提供了消息系统的功能,但是有自己独特的设计. 2. ...

  6. 【 React - 1/100 】React绑定事件this指向问题--改变state中的值

    /** * 报错: * Cannot read property 'setState' of undefined * 原因: this指向不一致.btnAddCount中的this 和render中的 ...

  7. Python 进程之间共享数据(全局变量)

    进程之间共享数据(数值型): import multiprocessing def func(num): num.value=10.78 #子进程改变数值的值,主进程跟着改变 if __name__= ...

  8. AVCaptureSession拍照,摄像,载图总结

    AVCaptureSession [IOS开发]拍照,摄像,载图总结 1 建立Session  2 添加 input  3 添加output  4 开始捕捉 5 为用户显示当前录制状态 6 捕捉 7 ...

  9. python面向对象--元类

    一个类没有声明自己的元类,默认他的元类就是type,除了使用内置元类type,我们也可以通过继承type来自定义元类,然后使用metaclass关键字参数为一个类指定元类 class Foo: def ...

  10. 02java基础——类和方法

    1.类的定义 /* 定义类: 使用类的形式,对现实中的事物进行描述 事物: 属性,方法 属性: 变量 方法: 这个事物具备的功能 格式: public class 类名{ 属性定义 修饰符 数据类型 ...