我们作为一个测试出身，即便做到了测开，可以写各种代码了，但是依然不要忘了我们的技术比不过专业的开发同事，那就要用我们的优点进行弥补。就是自测。
所以我们每写完一个复杂点的业务逻辑 和功能函数，都要充分考虑下各种异常，然后对其进行捕获和处理，俗称测试和修bug时间。所以我们
问题1:
真诚感谢一位小姐姐的bug反馈，这个的确是我之前疏忽的，不是故意留的。
仍然出在这个第三方的表格插件上，bug复现的情况是先切换到调试层的form-data或x-www...上，然后点击取消按钮，再打开就会出现显示错乱等状况。
这个问题会引起很多bug，考虑到我们去修复第三方的插件代价比较大，所以采用最简单粗暴的方式全部绕过去。
就是点击取消按钮后，进行一次页面的刷新，让所有控件都处于一个初始化的状态。
打开P_apis.html，找到取消关闭调试层的js函数：
我们原来的做法，是隐藏掉这个调试弹层
改成，直接刷新当前页面
问题迎刃而解。
问题2:
新创建的接口，首次打开调试弹层，发现请求方式是空白的。
通过console可以看到，这个接口的数据中的请求方式为null：
而我们的目的是想让其定位到none
所以我们这里既可以在后端修复也可以在前端修复。
这里介绍一个简单的后端修复，就是在新建接口的函数中，给接口初始的请求方式设置称字符串的none，而不是不写。
删掉这个旧接口，再新创建的接口则可以正常显示了。
问题3:
新接口首次打开时的顶部接口名称输入框 需要有提示，不然看着空白，用户不知道这个输入框干嘛的：
那我们就在P_apis.html中找到这个输入框，给它加入默认文案：
效果如下：
问题4:
当参数过多时，屏幕放不下，却又没滚动条：
这个问题是因我们这个调试弹层的显示位置脱离了文档流，所以自己很长，浏览器也不知道。解决的办法也很简单要么改变它的位置固定方式，要么用一个js函数撑开浏览器高度。
我们看到之前的位置固定方式代码如下：
试试改成如下：
再看看效果：
问题5:
有同学反馈接口的5个按钮风格不统一，很丑。
那么我就优化一下：
找到html的最开头，找到这个样式，它控制着这三个中间的小按钮的样式,不过我们准备把五个按钮统一风格，所以这个.wqrf_button{}没用了，删了。
然后找到这五个按钮的html代码，我们采用bootstrap3的按钮组写法：
看看效果：
问题6:
有人反应新增项目的按钮，看着很别扭，希望可以改。
好那我们看下原来的样子：
好像确实不太好看，那么就暂时改成下面这样：
删除了原来的新增项目按钮。改成了类似于很多国外技术网站的方式，采用关键字超链接的写法。
<h3 style="padding-left: 10px;color: #353c48">项目列表：
<span style="font-size: small;color: grey;">
点击 <a href="#" onclick="javascript:document.getElementById('add_project_div').style.display='block'">新增项目</a>
即可创建属于您的新项目！
</span>
</h3>
效果如下：
关于显示效果的优化，后续我们会进行各种大改。
所以小伙伴暂时不要吐槽丑了....
