位置: IT常识 - 正文

F12-开发者工具常用操作与使用说明之网络network(f12开发者工具调试打不开)

编辑:rootadmin
F12-开发者工具常用操作与使用说明之网络network

推荐整理分享F12-开发者工具常用操作与使用说明之网络network(f12开发者工具调试打不开),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:f12开发者工具怎么设置成中文,f12开发者工具怎么保存,f12开发者工具怎么设置成中文,f12开发者工具怎么保存,f12开发者工具调试打不开,F12开发者工具,f12开发者工具调试打不开,F12开发者工具,内容如对您有帮助,希望把文章链接给更多的朋友!

开发十分钟,调试三小时。

在开发过程中,我们希望是用更多的时间来创造,而不是被各种各样的问题所困扰。

尤其是在跟后端对接口的时候,是否能够快速的发现问题,就显得很重要。 network面板中提供了哪些功能,能否让我们解脱一点呢?

这是查看请求启动器的调用链路展示,你是否在开发过程中经常使用它呢?

发送请求已经是我们最基本最常见的需求了,而且我们也在频繁的接触它,但是我们经常会遇到各种各样的问题,有些错误很明显,我们直接就能定位问题所在,但是有一些问题总是让我们抓不到头脑,今天就来给大家讲解,或者说介绍一下关于网络面板的一些使用技巧,能够帮助我们快速排查定位问题,以至解决遇到的问题。

在开发过程中,我们遇到问题不要怕,有了F12我们就有了一把宝剑,能够披荆斩棘,一切疑惑都会最终水落石出。

我们要记住,当发现问题的时候,一定要首先看两个地方,第一个就是console面板,另一个就是network面板。

console控制台我们之前已经给大家介绍过了,接下来看看netword是怎么帮助我们的吧!

首先

我们还是来简要看一下这个面板都给我们提供了哪些功能,由于图片比较细长,我们分两个部分来分别讲解:

这一部分提供了四个图标,分别为:

网络日志的录制:一般我们都是开启的,这样才能获得我们需要的数据,如果停止的话将不会进行请求的录制,永远开启就好了。

清空日志:将记录的请求日志清空。

过滤:针对已发送的请求进行一些条件的过滤,可以筛选掉不想看的请求,以快速定位到我们要查看的请求,这个也是我们接下来要说的重点,我们绝大部分都是在跟这个打交道。

搜索:可以通过关键字进行搜索我们要查找的请求,与过滤不同的是,通过搜索我们可以输入包括返回值等在内的文本进行全部内容的查询。

也就是说包含了标头(Headers)与预览(Perview)或响应(Response)里面的所有内容。并且可以使用大小写匹配与正则的形式进行查找。

这一部分提供了三个功能:

保留日志:如果勾选这一项,那么刷新页面的时候,之前的请求日志不会清空,其实不光是刷新页面,页面的跳转也会保留,比如从登录页跳转到首页的时候,之前的请求不会丢失。这对一些在页面改变之前自动发起的请求进行查看是很有用的。同时在这里多说一句,在开发者工具右上角的设置(小齿轮图标)里面,我们可以勾选打开新窗口时自动打开开发者工具,这样我们就不用为总是来不及打开F12而看不到想要查看的请求而烦恼了。

在设置面板里面把这一项勾选上就可以啦!

停用缓存:浏览器有时候会对一些数据进行缓存,根据设置的机制不同,浏览器会采取不同的缓存策略,这一般来说是很有用的,但是开发调试阶段,我们想总是获取最新的数据,那么这个时候我们可以取消勾选这一项,这样我们就总能获取最新的数据,而不是使用缓存了。

网络模式:这里一共提供了四种默认模式,当然了我们也可以点击那个小wifi样式的图标进行自定义设置,简单看一下这几种模式,当我们模拟一些特殊环境的时候这将非常有用。

1.已停用节流模式,将会使用默认的网络模式,也就是你正常的上网环境

2.高速3G,将会使用3G模式,网速将会变慢,网络请求将会有延迟,这在模拟网络差的环境的时候非常有用,可以看到页面加载的过程,以及非预期的效果。

3.低俗3G,同上,只不过是模拟网络非常差的情况。

4.离线,可以查看网站在离线状态下的运行情况。

最后,其实还有这两个功能图标,表示导入导出HAR文件,我们一般用不到,你可以把它想象成是一个按照某种规范,把请求以固定格式导出到一个地方存起来的文件,可以在需要的时候导入到一个能解析它的地方,来打到请求重放的效果,这里不做过多介绍。

接下来

我们重点来看一下过滤这块。同样,这里我们分三部分来分别讲述:

当我们选中过滤的时候,将会在下方出现各种过滤条件,有输入框,也有快捷选项。

过滤框:我们可以在这里输入关键字来筛选请求。

反转:勾选此项,将会筛选出所有不符合过滤条件的请求,相当于反选。

隐藏数据网址:勾选此项表示要隐藏那些为数据请求的URL,如data:image/png;base64。

这一部分没什么好说的,就是按照不同的请求类型,进行了一个快速的分类选择,我们经常关心Fetch/XHR选项,也就是我们所发送的接口请求。

同样,这里又提供了另外三个维度的筛选方式:

有已拦截的Cookie:有cookie被拦截的请求。

被屏蔽的请求:如果设置了屏蔽某个请求(鼠标在某个请求上右键就可以屏蔽),勾选此项会查看到。

第三方请求:勾选此项会查看非本域的请求。

最后F12-开发者工具常用操作与使用说明之网络network(f12开发者工具调试打不开)

我们来实际看一下,当我们找到要查看的请求的时候,我们都能从这些请求中获取什么有用的信息,并且了解如何解决我们产生的诉求。

通过这几种不同的请求方式,来模拟一下我们实际的工作场景,使用浏览器为我们提供的功能来解决产生的问题,或者帮助我们更快的开发调试。

1.带query的get请求

参数会直接拼在地址后面。

载荷(Payload)中会展示出请求参数项,并且在点击[查看网址编码格式的数据]时,会切换编码状态与解码状态。

可以看到对中文进行了编码。

预览(Preview)表示接口的返回值,展示出浏览器格式化后的样式。

响应(Response)同预览,只不过是原始文本,未格式化。

启动器(Initiator)会展示出该请求的触发链路,即:该请求是由谁触发的,并且它的调用者是谁,以及更上层的调用者是谁,每一层的方法调用链路都会在这里展示出来,方便我们定位到请求发起的地方,比如这个例子中,我们一下子就能够快速的定位到是由我们的业务代码ajax1方法发起的,并且它在HelloWorld.vue文件中。我们单击该文件就可以查看具体的内容。

这极大的方便了我们查找接口调用的位置的操作。尤其我们在改别人代码的时候,如果对业务不熟悉或者一时找不到请求在哪里发起的,那么通过这个我们就能很快速的定位到目标方法,而且我们现在都是使用构建工具打包生成的代码,找一个方法特别难受,这个时候就可以根据请求快速找到方法,供我们打断点等调试操作。

时间(Timing)展示了接口调用在不同阶段的耗时。

Cookies展示了该请求携带的cookie信息。

2.JSON的post请求

我们把get请求携带的字段叫做请求参数,把post请求携带的字段叫做请求体,post请求的请求体不会在地址栏后面显示。

请注意这里文字的变化,get请求时,这里叫做查询字符串参数,而现在这里叫做请求载荷,这时后端是以json的形式进行接收和解析的。这是以axios为例来默认发起的。

3.FORM的post请求

其他与上面相同,我们只来看下载荷的区别:

我们发现这里的文字变成了表单数据,是因为这次我们是使用的form表单的形式发送的请求,后端会以form的形式接收并解析请求体字段。

我们这里是使用qs来进行转换的,这下大家知道了为什么有的时候要用qs,而有的时候却不需要,也清楚了为什么后端有时候能接收到字段,但是有时候接收不到了吧,根据具体的场景和约定,我们就可以随意切换不同的形式来进行传参。下次再碰到的时候我们就可以通过这里快速查看是否自己的传参形式不对呢。

4.带数组的请求

这里有两种情况,后端如果是整体以json的形式接收的,那么是可以正常传参的,但是如果是以明确字段类型为string的,那么数组字段在发送前注意使用JSON.stringify等方式先转换一下。

还有一个就是,如果使用不同的格式的话,那么浏览器会展现的不一样,来感受一下不同方式数组的传参形式:

JSON形式

FORM形式

5.带query的post请求

可以看到,地址栏已经被追加了请求参数。

这个时候就有了两个地方的传参,一个是查询字符串参数,还有一个是请求载荷。这两种传参的方式都会被后端接收到。

补充

在请求返回值数据任意层级上面右键,即可进行相应的操作,算是一个快捷指令,这对数据量多和层级复杂的情况可能会使用到,这里就不一一介绍了,都是简单的字面意思。

其中向监视表达式添加属性路径的意思是说,当我们在执行断点的时候,我们不是可以监听某个字段或者表达式的值么,选中这个,就会把这个你选择的表达式添加到里面,类似于这样。

总的来说

工欲善其事,必先利其器!希望大家都能熟练的掌握这里面的各种技巧,这样我们解决起问题来才能得心应手,希望这些能给你带来帮助,提高解决问题的效率。

本文链接地址:https://www.jiuchutong.com/zhishi/287131.html 转载请保留说明!

上一篇:vue3中数据更新了,但是视图没有更新的5中方案(vue数据更新会触发什么生命周期)

下一篇:解决has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’报错跨域问题(解决口苦最快的方法)

  • 计提个人所得税会计分录怎么写
  • 房产税什么时候落地
  • 清算资产处置
  • 金税四期如何应对
  • 空调可以直接做费用吗
  • 银行结息计入什么费用
  • 个人打钱对公账户,可以算公司营业收入吗
  • 已认证的进项税发票要退回,怎么操作
  • 民间非营利组织会计制度最新版
  • 公益性捐赠可以结转几个年度
  • 差旅费报销会计科目
  • 预付的固定资产没有收到发票怎么入账
  • 先取得发票后付款说明
  • 冲减留抵税会计分录
  • 走逃发票怎么处理
  • 税控设备全额抵扣政策
  • 企业收到工程款开发票要扣哪些税
  • 资产损失类型有哪些
  • 停车场吗
  • 房产增值税征收期限
  • 没有单价数量只有金额的发票可以用吗
  • 怎么区分汇总原始凭证与累计原始凭证?
  • 企业的筹资费用哪里找
  • 生产要素和资源的区别和联系
  • 建材销售公司需要交哪些税
  • 短期借款利息的处理
  • 个人独资企业生产经营费用与家庭生活费用
  • 员工可以一起辞职吗
  • 网页老是自己跳出来
  • 如何升级mac系统到10.12
  • 个人综合所得适用什么税率?
  • 企业废业实收资产怎么算
  • 发生坏账账务处理
  • 最大交易笔数什么意思
  • 生产加工型企业安全隐患排查内容
  • 购买加油卡能否抵扣
  • 文化传媒公司的部门
  • 职工工资扣税比例
  • 阿尔卑斯山百度百科
  • php8.0 特性
  • 命令grep
  • 国外商贸公司
  • 帝国cms视频教程
  • 事业单位政府拨款的会计分录
  • python子类init
  • 哪些普通发票可以抵扣
  • 企业电子承兑
  • 工商年检截止日期
  • 补缴以前年度的印花税会计分录
  • 销售退回的会计分录全过程
  • 暂估和开票的差异 erp处理
  • 子公司提的盈余公积合并时如何抵消
  • 其他货币资金科目主要指
  • 通讯费计入哪个科目
  • 企业一般户怎么查询
  • 营改增的增值税
  • 发出计价是什么意思
  • 实收资本怎么入账?
  • 企业必须建立哪些制度
  • linux 查看numa
  • 三种实现方法实现的特点
  • windows7休眠唤醒设置
  • linux服务器设置dns
  • Linux安装完mysql后提示错误无法登陆mysql怎么办?
  • 创建自己百度百科
  • jquery邮箱正则表达式
  • curl发送formdata
  • 什么是自然数
  • div显示边框线
  • js表单事件有哪些
  • node.js promise
  • 简单谈谈你对公安工作的认识
  • Python虚拟环境创建
  • javaScript parseInt字符转化为数字函数使用小结
  • Python如何判断数据类型
  • springmvc接收json需要配
  • 国际税务局邮箱是多少
  • 国税总局关于总局的文件
  • 北京税务局地税电话
  • 乾升黄酒好吗值得买吗
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设