接口调试层打开后，目前并没有显示这个接口的所有数据。本节就一句一句的把这些数据显示出来吧。
首先，让我们打开P_apis.html,找到打开显示调试层的函数：
如图所示，我们已经显示了 接口的id和name。
我们是需要请求后台拿到最新的接口数据，然后实时根据其请求方式进行显示。
所以我们这里需要写一个请求(当然接口id不可能变，但是名字name其实也应该获取最新的。这里为什么不用进入这个接口库时带的接口数据呢？因为很可能在你闲逛的时候，其他同学已经修改来这个接口，而你这时候打开，显示的还是你之前进入接口库的旧数据，就会造成混乱，随便点一下保存，就会把其他同学辛苦修正的新数据给覆盖掉)
所以，写一个请求：
请求中我们只需要传给后端接口id即可。
然后去urls.py中架好映射：
然后去后台写好这个函数：
因为这次要用到传给前端字典json串，所以要在文件开头导入json
然后写好这个给前端单个api数据的函数：
第一句是获取到前端过来的接口id
第二句是拿到这个接口的字典格式数据
第三句是返回给前端，但是数据要变成json串。
这段代码很常用，大家最好死记硬背下来。
然后我们回过头来看P_apis.html中这个打开函，开始写它接收到后台返回的数据后的动作：
先加一句打印，看看打印出来的对不对。
这样就是成功拿到了这个接口的所有数据。然后就是一点一点给显示在页面即可。首先是name名称。我们抛弃掉之前的显示名称的代码，在这里加上新的实时显示。
然后刷新一下页面，看看前端是否可以正常显示，正常显示名称，说明我们这个链路和设计成功了。
成功后，我们继续补充其他数据：
首先是请求方式：
请求方式是一个下拉框，一个下拉框中是由多个option构成，当每个option被选中时，实际上是这个下拉框本身的value值变成了这个option的value。所以我们只要强行指定下拉框的value = 接口返回值的接口api_method即可：
然后是url host header三个简单的输入框：
完成后即可测试，无bug。
然后就到了最复杂的请求体编码格式环节了：
首先是要确保下面的几个子页面能自动切换到保存的编码格式上。
我们的保存功能是已经做好的，所以这里我们保存none以外一个其他编码格式方便测试。
在打开form-data的时候 意外发现了一个小bug，之前有粉丝反馈过。
这里多出来一列。这是为什么呢？因我们在打开函数中调用了clear初始化函数。这个初始化函数中对于这个第三方表格有一句，添加这个按钮列的代码：
如上图，俩个表格都有。但是我们忘记删除我们一开始调试样式时候加入的这句代码了，导致重复添加了按钮列。也就是在html部分的一个嵌入的，最开始写的那段，需要删除。
删除后再试试看：
发现已经恢复正常了。
然后我们保存一个form-data的内容，至少俩对参数：
点击保存按钮，然后再次打开调试弹层：
可以看到编码格式和请求体内容均已成功在console里获取到：
然后就是该让它们显示在页面上了。
首先是这个子页面切换：
让我们好好看一下这些个子页面到底是什么：
控制它们的按钮就是这样一堆li标签。所以其实我们只需要点击到这几个标签，就能实现自动切换了。
上图中，第一句是我们拼接起来这个#form-data。因为所有的li标签内的a标签的href 都是#开头。我们就是要利用这个href来进行定位。
然后第二句是jquery选择器的语法，意思是li 标签下的a标签中 href 是这个拼接字符串的 元素执行点击click操作。
效果如下，打开调试弹层后，自动切换到来form-data：
我们可以再试试其他几个子页面均可成功被点击。
然后就是请求体显示了。因为请求体显示的格式不同，所以代码也不同。
考虑到本节内容已经很多，所以放在下节了。
