位置: 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’报错跨域问题(解决口苦最快的方法)

  • 怎么关闭电脑自动更新win10(怎么关闭电脑自动更新系统)

    怎么关闭电脑自动更新win10(怎么关闭电脑自动更新系统)

  • 抖音图片怎么换成自己(抖音图片怎么换音乐)

    抖音图片怎么换成自己(抖音图片怎么换音乐)

  • iphone11三个版本的区别(iphone 11各个版本区别)

    iphone11三个版本的区别(iphone 11各个版本区别)

  • 淘宝店货源在哪里找(淘宝店货源从哪里来)

    淘宝店货源在哪里找(淘宝店货源从哪里来)

  • 电感性负载和电阻性负载的区别(电感性负载和电阻性负载哪个电流大)

    电感性负载和电阻性负载的区别(电感性负载和电阻性负载哪个电流大)

  • 抖音版本过低无法使用此道具(抖音版本过低无法登录怎么解决)

    抖音版本过低无法使用此道具(抖音版本过低无法登录怎么解决)

  • 网易云怎么删别人回复(网易云怎么删除别人@我)

    网易云怎么删别人回复(网易云怎么删除别人@我)

  • 朋友圈设置成仅聊天对方显示什么(朋友圈设置成仅别人可见别人知道吗)

    朋友圈设置成仅聊天对方显示什么(朋友圈设置成仅别人可见别人知道吗)

  • 什么是京东客(什么是京东客户端用户)

    什么是京东客(什么是京东客户端用户)

  • 华为nova7视频防抖吗(华为nova7pro防窥屏)

    华为nova7视频防抖吗(华为nova7pro防窥屏)

  • iphone8下架了吗(苹果8下架了吗怎么买)

    iphone8下架了吗(苹果8下架了吗怎么买)

  • 荣耀20是什么解锁(荣耀20青春版手机解锁)

    荣耀20是什么解锁(荣耀20青春版手机解锁)

  • 三星s20美版和国行的区别(三星s20美版和国版哪个好)

    三星s20美版和国行的区别(三星s20美版和国版哪个好)

  • vivo拉黑名单怎么解除(vivo手机号码拉黑名单了,在哪里设置移除)

    vivo拉黑名单怎么解除(vivo手机号码拉黑名单了,在哪里设置移除)

  • 宽带运营商是什么(宽带运营商和手机运营商不一样)

    宽带运营商是什么(宽带运营商和手机运营商不一样)

  • 小米10和小米10pro都是曲面屏吗(小米10和小米10pro钢化膜通用吗)

    小米10和小米10pro都是曲面屏吗(小米10和小米10pro钢化膜通用吗)

  • ppt从头播放快捷键(ppt如何从头播放)

    ppt从头播放快捷键(ppt如何从头播放)

  • 阿里巴巴确认收货多久到账(阿里巴巴确认收货为什么还要支付密码)

    阿里巴巴确认收货多久到账(阿里巴巴确认收货为什么还要支付密码)

  • 手机照片上时间地点设置(手机照片上时间怎么去掉)

    手机照片上时间地点设置(手机照片上时间怎么去掉)

  • 抖音用户推荐关注什么意思(抖音用户推荐关注怎么关)

    抖音用户推荐关注什么意思(抖音用户推荐关注怎么关)

  • 苹果8支持无线充电吗(苹果8支持无线反向充电吗)

    苹果8支持无线充电吗(苹果8支持无线反向充电吗)

  • 探探视频怎么保存(探探视频怎么保存相册)

    探探视频怎么保存(探探视频怎么保存相册)

  • 趣步不显示步数怎么办(趣步不显示步数是什么原因)

    趣步不显示步数怎么办(趣步不显示步数是什么原因)

  • iphone电池多少该换了(iphone电池容量多少算低)

    iphone电池多少该换了(iphone电池容量多少算低)

  • qq被封号怎么办

    qq被封号怎么办

  • 【微信小程序】条件渲染和列表渲染(微信小程序开发)

    【微信小程序】条件渲染和列表渲染(微信小程序开发)

  • next在python中返回迭代器(python的next())

    next在python中返回迭代器(python的next())

  • 企业的其他业务收入包括哪些
  • 一般纳税人劳务费税率是多少
  • 存在弃置费用的固定资产的财务费用
  • 月末一般无余额的有
  • 印花税的纳税人为书立合同双方
  • 非独立核算分公司个税怎么申报
  • 企业承担的员工在职培训成本包括
  • 增值税预缴税金交错了怎么办
  • 全年累积盈利交所得税吗?
  • 固定资产可以一次抵扣吗
  • 承包方收取分包方费用
  • 制造费用折旧费怎么结转
  • 存货跌价准备转回的条件有哪些
  • 劳保费用可以开专票吗
  • 跨地区经营怎么交税
  • 季报所得税可以预交吗
  • 对外投资增长过快
  • 广西电子税务局申报
  • 外币业务汇兑损益根据业务划分为
  • 技术服务费成本票是什么
  • 外资企业注销需要商务局备案吗
  • 固定资产可以一次折旧完吗
  • win10外接音响没反应
  • 代扣代缴税款的完税凭证抵扣期限
  • linux系统怎么访问共享文件夹
  • windows11蓝牙问题
  • 鸿蒙系统小艺怎么改声音
  • 怎么删除win10开机多余选项
  • 什么是现金解款支付
  • 人力资源服务代缴社保税率是多少
  • 混合筹资的定义
  • 奥林匹克国家公园
  • 刷题有什么作用
  • ssh非交互式登录
  • php jsonp
  • 违法汽车查询
  • 国税网如何下载申报后的财务报表
  • 企业提取盈余公积属于什么会计科目
  • 预收账款多好还是少好
  • python中mktime函数
  • 帝国cms插件编写教程
  • 金税盘一天可以开多少张发票
  • 财务报表是指的什么内容
  • 月底如何结转成本
  • 合伙企业是否需要缴纳印花税
  • 事业单位的财政拨款怎么做账
  • 审计库存现金盘点表
  • 电子增值税发票样本
  • 住房公积金的账户状态是封存是什么意思
  • 发票先到后付款怎样做凭证
  • 超过诉讼时效的法律后果
  • 火车票退票改签手续费
  • 已启动申报比对异常怎样才能作废,还没过税期
  • 主营业务成本包括哪些费用
  • 如何搭建一个企业
  • mysql where clause
  • mysql数据库中关于作为临时
  • mac安装surge
  • mac中mysql应该怎么运行
  • win8系统怎么关机
  • microsoft onedrive怎么关闭
  • 微软每月补丁更新一般于什么时间发布
  • macos手势
  • linux统计代码行数过滤空行
  • w10运行命令在哪
  • centos 6.0
  • yum源有什么用
  • win7 windows检测到ip地址冲突怎么解决
  • jquery 字符串以什么开头
  • 用jquery制作轮播图效果
  • jQuery+HTML5实现弹出创意搜索框层
  • linux pymol
  • 粒子form
  • bootstrap js插件
  • js中的三种弹出消息提醒的命令
  • jquery基本知识
  • 获取intent传递的数据
  • 成都国家税务局每个月交全民付的钱是什么
  • 辽宁取暖补贴发放标准2020
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设