终于开始了接口调试模块，废话不多说了，直接开始：
首先我们要做一个简单的弹层，和上节课的备注弹层一样的做法，这里就给大家快速贴源码了用到的技术都是之前学过的。注意一点，打开弹层后，一定要在弹层的某个地方放入接口id，以便我们之后调试保存时，发出的请求中可以知道当前用户打开的是哪个接口。
首先打开P_apis.html，加入这个弹层：id=ts
注意长款等具体属性.隐藏属性仍然之后才添加。
然后我们给它设计俩个按钮：保存/取消
在我们的设计中，首先完成的应该是这个接口的各种属性的展示/保存 功能，之后才是调试。
在这个div中添加一个按钮组，具体代码如下：
按钮组的好处是可以让俩个按钮紧贴着风格很简约。
效果如下，放在了右上角，float:right可以让俩个按钮并不会占用一整行位置。但是之后所有的控件必须都要放在这对按钮之下才可以。
我们先要做的是所有属性的展示，无论是什么输入框，按钮，静态文案，我们暂时都不加入id，等到最后需要定位的时候，再加。
接下来我们放一个标题，一来是让用户知道是哪个接口的调试界面，二来是偷偷存上我们的接口id 以便后续请求使用。
注意，我们因为div的背景色太黑了，所以文案都看不见，所以我们要给div补充上属性color=white白色，而且为了美观，我们不要顶格，就加入了格内左边距padding-left = 10px
h3这个大标题中，我写了俩对 small标签，small标签内可以放字号较小的文案，俩个标签，第一个里面放接口id，第二个放接口名字。中间用个横线链接会美观。目前这里是空的，具体填入什么，要靠我们之后写的打开调试面板的函数 来自动填充，所以最后我们也要给这俩个small标签添加不同的id。
紧接着我们写好接口的：请求方式和url，域名我们一会再单独一行写，因为大多数情况下，我们调试接口的url不会变动，而域名则会常变，不同的测试环境都不同。
请求方式和url 包括后面的发送请求按钮send ，这一套都在一行写比较好
继续添加：
代码中是一个大的ul，里面是3个小li 。style属性也是简单进行优化了一下。
源码如下可复制：
<ul class="nav navbar-nav" style="width: 98%"> <li> <select style="height: 40px;" class="form-control"> <option value="none"> 请求方式</option> <option value="post" > POST</option> <option value="get" > GET</option> <option value="put" > PUT</option> <option value="delete"> DELETE</option> </select> </li> <li style="width: -webkit-calc(100% - 225px)"> <input style=";padding-left: 10px;width: 100%;height: 40px;" type="text" placeholder='url: 如 /abcd/efgh/' value=""> </li> <li > <button type="button" style="height: 40px;width: 120px;" class="btn btn-default"><span style="font-size: large">Send</span></button> </li> </ul>
效果如下：
接下来我们开发host输入框：
上图中，我们要加3个换行符来完美效果，基本格式和上面那行一样，还是一个大ul 下面包着小li标签，只不过这次只有一个li。设置好宽度和默认提示文案，看看效果：
接下来我们放入请求头。大家知道，请求头虽然我们在网页f12里，postman里看到都是 一行一对的表格样，但是实际发送请求时候，可是一个大json。所以我们这里简化一下，就放一个大输入框，里面写请求头的json即可。当然下节课我们会立即对其交互优化，全局公共请求头和全局公共域名是我们之后要学习的内容，这里暂时不加了，等到时候再改。
按照之前的格式，继续再来一行header请求头输入框：
注意默认文案。
我们这里可以简单加上俩个小按钮，重置输入，也就是用户输入错了，想清空输入框的按钮。大小对应上面的Send按钮，这样看起来比较协调：
给host和header俩个输入框，都加入一个新的li标签，里面放入类似Send的按钮但是字体和宽度都变小，注意各个li的宽度要对应变化，具体如下：
大家尽量按照我的宽度设置，已经调试的很好了：
效果如下：
功能等我们之后再实现即可。
