本节开始之前，先解决下关于调试层遗漏的一个设计缺陷。就是当已经打开了一个接口的调试层后，如果直接点击其他接口的调试层便会出现显示错误。这类的问题非常多，我们最好是直接根本上绕过去。
解决办法一般来说有俩种
1: 添加蒙版，就是在打开这个调试层的时候，其他位置都变成暗色的蒙版遮住，不让用户能点击到其他区域。
2: 当用户点击其他接口的调试按钮时，自动隐藏并清空当前调试层，再打开新接口的调试层。
这里我们选择第一种方案：
我们在html的body内的最底部，添加一个div作为我们的蒙层
<div id="mengceng" style="display: none;opacity:0.5;position: absolute;left: 0;top: 100px;
background-color: gray;width: 100%">
</div>
<script>
document.getElementById('mengceng').style.height=window.screen.availHeight.toString() 'px';
</script>当然这蒙层的默认是隐藏的。我们需要在调试层打开的函数中加上显示这个蒙层的代码。
看看效果：
蒙层的颜色和透明度，位置大小大家可自行修改。
当然异常测试层我们也可以加上对应的代码来生成蒙层：
这样便可以防止用户进行异常操作了。
为了防止关闭异常测试层后引发其他bug，我们把关闭函数的代码从隐藏这个div改成刷新整个页面：
好言归正传，让我们继续开始异常值测试。
貌似该开始实际进行测试了，按照我们之前章节的设计。当用户点击开始测试后，前端js会开始根据预置的待替换参数，依次交叉排列组合替换接口本来的请求体。然后把新的请求体传递给后台(这个过程会持续很多次)，每次之后 ，后台进行请求把返回值返回，前端js函数再生成一个多行文本框展示这个返回体并添加到这个异常测试层上。
但是，这里我们出现了设计缺陷，什么缺陷呢？就是我们最开始设计的这个打开异常值层的函数：
代码语言：javascript复制error_test它确实可以接收到接口的请求体。
然后我们打算再新声明一个js函数：error_play() ,当用户点击开始测试时来调用这个函数来进行测试，这里很显然，俩个函数是分开的。我们无法让error_test的请求体参数 传送到 error_play里。
这里是我们一开始设计时候没有考虑完全造成的，在我们测试开发频繁快速的落实工具中，缺少完整专业的产品设计和开发分解，很容易出现这样的设计逻辑出现问题的情况，遇到这种时候一般难免都会产生挫败感，因为这意味着：
要么我们要增加额外的没有预想到的工作量，比如持久化这个请求体参数；
要么我们要推翻之前的设计来返工。
不过在我们经历多了之后，这种问题就没那么让人沮丧了。
在这里我们用户点击异常值测试的时候，就是因为多了一步预置替换参数，才导致整个流程中断，参数数据流被中断。如果我们可以去掉这一步，那么显而易见的就简单了。可以一个error_test函数就全搞完了。但是这个预置替换参数要在哪设置呢？难道不让用户修改了么？显然我们从用户使用的角度来说，不应该去掉可编辑预置替换参数 这一过程。
所以我们可以想办法持久化这个请求体，来让我们的error_play函数可以获取到
一个简单的并且好理解的办法可以忠诚的保存整个字符串的方法是，建立一个隐藏的input，然后在error_test运行时，把请求体写进去。在error_play运行时再提取出来即可。
那么代码如下：
然后我们声明error_play函数再提取出来。
然后别忘了分别在我们的html和初始化函数中，给这个开始测试按钮的onclick属性指向error_play
提取出来后，我们打印一下，看看是否获取成功？
先看一下我们接口本来的请求体
再看看开始测试后的输出：这只是form-data和x-www....的
看来没啥问题，我们再看看其他格式的请求体：
none时为空：
raw-json时：
raw-text等：
如上图我们看到，当为none或者为raw-text/html/xml/js等的时候，我们这个异常值测试时没办法替换的，因为我们不知道要替换什么，其实也就是说，这个设计并不适用于这种请求体。
我们只能很好的使用在form-data/x-www...或json串的情况下。好在我们日常要测试的绝大多数接口，都是这几种请求体。
但是因为他们的格式不同，我们还要分为两种分支来进行判断替换。所以在js中肯定会有判断请求体类型，但是我们忽略了一个问题，就是我们并没有传输或者持久化保存这个接口的请求体类型，所以我们目前只能通过请求体本身来反向推算出请求体类型再根据类型进行选择不同的算法进行替换。虽然听起来比较麻烦，但是其实也没多难。
function error_play() {
api_body = document.getElementById('error_api_body').value;
ready_error_data = document.getElementById('ready_error_data').value;
console.log(api_body);
//判断是不是form-data/x-www...的二维数组格式
try {
var s = eval(api_body);
console.log(s)
}catch (e) {
//若不是就继续判断是不是raw-json的json串格式
try {
var s = JSON.parse(api_body);
console.log(s)
}catch (e) {
//若也不是，那就不需要做异常值测试了
alert('当前接口的请求体类型不支持异常值测试！')
}
}
}代码中运用了 俩次try来判断。如果能命中两次中任何一次try则说明 可以解析并测试，否则就是不支持。
之后我们会在下一节中讲解，如何进行替换，可能在python中这种替换很简单，但是在js中其实也很简单。下节会给大家继续讲
