后端开发之chrome开发者模式

1. 场景描述

java开发先后端分离模式愈来愈流行，后端人员能够直接使用swagger进行接口调试（先后端分离之Swagger2），可是调试的时候，须要设置入参，假如该模块不是软件老王开发的，接别人的代码的话，入参定义就会有点麻烦了。

2. 解决方案

使用浏览器的开发者模式，获取先后端交互信息，如今公司默认推荐的浏览器是Chrome，前端再也不作其余浏览器的适配，咱们也拿chrome简单介绍下吧。

软件老王只从后端开发人员的角度作下介绍，前端大佬请绕行，省的浪费时间。

2.1 chorme下点击F12键，开启开发者模式

说明： 在图中2的地方能够设置显示格式，上下左右显示，我这边使用的是在右边显示。

2.2 工具栏说明

工具栏简要说明：

（1） Elements（元素面板）：能够修改css等文件，实时显示效果，以便调试样式。

（2）Console（控制台面板）：Console能够查看网页运行后提示的消息，错误或者警告以及输出内容等。

（3）Sources（源代码面板）：在源代码面板中设置断点来调试 JavaScript。

（4）Network（网络面板）：先后端交互面板，包含前端请求及后端返回，从发起网页页面请求Request后获得的各个请求资源信息（包括状态、资源类型、大小、所用时间等），后端人员主要看这个，先后端交互的信息都在这个里面。

（5）Performance（性能面板）：记录和查看网站生命周期内发生的各类事件来提升页面运行时的性能 。

（6）Memory（内存面板）：分析web应用或者页面的执行时间以及内存使用状况 。

（7）Application（应用面板）：记录网站加载的全部资源信息，包括存储数据、缓存数据、字体、图片、脚本、样式表等。

（8）Security（安全面板）： 后端人员可忽略。

（9）Audits（审核面板）： 后端人员可忽略。

从上面工具栏介绍中能够看出，其中网络面板Network是先后端交互的重点内容，软件老王重点介绍Network。

2.3 Network

1为从工具栏选中Network

2为控件栏，重点是清除、过滤等，本身点击一下就知道了。

3为过滤栏，由于有时候交互的信息比较多，能够在filter框中录入关键字进行过滤，快速定位；

4为交互信息栏；

5为概要栏；

其中重点是4，先后端交互信息栏，详细介绍下。

2.3.1 右键能够选择更多的展现信息

2.3.2 根据名称找到对应的交互请求后，单击

其中：

1为Headers， 与资源关联的 HTTP 标头。
2为Preview，资源信息预览。
3为Response，HTTP 响应数据
4为Timing，交互响应时间分解。

（1）Headers

根据名字就能够看出来，Rsponse header存放的返回的头部信息；Request Header存放的是请求头信息。

咱们项目中的真实请求：

Post请求，多了个Request Payload，存放请求参数信息（json格式），经过这里就能够拿到请求的入参，很重要。

（2）Preview就是返回信息的预览。

（3）Response 服务器端返回信息。

这里显示的是服务器端的返回信息，前端人员根据服务器端返回数据进行渲染，可是渲染部分就不是咱们后台开发关注的了，咱们须要关注的是：数据返回是否正确。

（4）Timing

这里通常不用太关注，不过假如服务端返回时间过长的话，就须要定位下问题了。

2.3.3 写在最后

介绍到这里，对于后端人员来讲，基本够用了，后端只需保证的是入参正确，返回数据正确就ok，其他的请找前端人员，啦啦啦。。

---

I’m 「软件老王」，若是以为还能够的话，关注下呗，后续更新秒知！欢迎讨论区、同名公众号留言交流！