使用f12控制台查看加密算法 f12控制台怎么看

转载

香奈儿 2024-06-13 08:29:55

文章标签 使用f12控制台查看加密算法 chrome 分页查询 API Network 文章分类 运维

文章目录

1. 前言
2. 操作记录
2.1 如何打开前端控制台
2.2 如何查看调用后端哪个API
2.3 如何查看前后端的传参。

1. 前言

虽然现在不写代码了，但时不时会面对一些经验不深的开发，别问有经验的开发去哪了…总有直接面对新人的时候，或者自己在使用系统过程中遇到一些问题，而懒得找开发，所以需要自己查，因为不常用，所以经常忘记一些常用的用法。在此记录下来，给健忘的自己当工具书查。

2. 操作记录

2.1 如何打开前端控制台

任何浏览器好像都是按F12

2.2 如何查看调用后端哪个API

以前在浏览器上看URL通常就能看到调用后端的路径，现在前端框架多了之后，很多调用都是在JS中隐式调用，这个时候光看浏览器url就看不出来了。这个时候就需要从控制台中查看。具体查看地点：在Network > Fetch/XHR里

使用f12控制台查看加密算法 f12控制台怎么看_分页查询

看到蓝色字体中，其实访问的关键字与url栏已经是不一样的了。但是，这个还不是最终的路径。

要看最终路径，需要点上图蓝色框框中的记录，就会显示最终的路径

使用f12控制台查看加密算法 f12控制台怎么看_API_02

所以后端调用的相对路径为：/accounting/chartAccountPage

这个时候，如果后端是使用SprintBoot的，可以用这个关键字在工作目录下查找到对应的代码了：
Mapping("/accounting/chartAccountPage
or
Mapping("/accounting
or
Mapping("/chartAccountPage
这个取决于后端使用全路径在方法的映射上，还是使用父路径在类，而分支路径在方法映射上。

如下，设计是分离了2级路径

@BaseRestController
@RequestMapping("/accounting")
@Api(tags = "会计账目接口")
public class AccountController {


    @ApiOperation(value = "Chart of Accounts 分页查询")
    @PostMapping("/chartAccountPage")
    public ResultDTO<WebPage<AccountChartRespDto>> chartAccountPage(@ApiParam(value = "webPage对象，分页查询条件") @RequestBody WebPage<String> webPage) {