【问题描述】

如何通过前端抓包工具判断前端控件布局是否存在问题并进行对应调整？

【场景介绍】

• 当布局中控件过多时，有可能因为误操作导致部分控件超出了可见视图页面

• 而超出布局范围外，可能会引发一些布局问题，而此时想要通过印象去检索或通过BOS设计器逐个控件排查，显然非常耗时耗力
  

【解决方案】

我们在前端界面中内置有抓包工具，可以通过以下方式准确定位到问题所在：

一. 主要步骤

1. 打开抓包工具

2. HTML端打开方式：全功能搜索框输入”ShowWatcher“，同时按下组合键：Ctrl+Alt+F9

3. 

4. GUI端打开方式：点击个人头像->我的设置->Http数据

5. 网上搜索”json在线转换“，打开任意一个可以转换json格式的网址

6. 接下来以单据”币别“的布局为例，展示抓包对应的数据，以及如何通过数据在BOS设计器中找到对应控件

二. 详细操作

1. 打开HttpWatch

2. 打开你要抓包的单据（以币别为例）

     打开币别->抓包工具->找到 GetFormMetaData.CallByUrl 事件

     此时注意观察一共有上下两块数据，上面的为前端发送至服务端的数据，下面的为服务端回传给前端的数据。

     这里我们重点关注服务端回传给前端的部分，即下面的部分，如图：

3.复制数据，拷贝至json转换工具中，进行判断 

    双击下方数据块，复制，粘贴至json转换工具中，此时我们就可以根据数据对控件做出对应判断：

    可以看到id就是控件的唯一标识，而x、y就对应控件的x轴y轴坐标，width、height就对应控件的宽高数据等。

    （当然也可能存在插件或其它行为改变了控件数据的情况，我们这里只考虑默认情况）

    接下来就可以通过数据去BOS设计器中找到对应控件了。

3.BOS设计器寻找对应控件或字段，并进行对应调整

    根据我们找到上图找到得FName控件，我们可以在BOS设计器中进行检索

    编辑->批量编辑字段属性->名称/标识->输入对应标识进行查找：

此时就能找到对应控件并进行需要的调整啦：

可以看到唯一标识对上了，并且坐标、宽高，和我们上面抓到的数据都是一致的。

【小技巧】

    可能有朋友会问，当我们的数据量很大的时候，应该怎么办呢？

    总不能一个个去看过去吧？

    既然有了抓包工具，其实就很方便了。

    举个例子，假设我们有一个宽度为500的分割容器，而我们想要找到超出分割容器部分的控件，要怎么做呢？

    很简单，我们只需要在在线json中检索x轴坐标，超过500的，也就超过了当前分割容器的宽度（可以用开头的数据进行查找：）。

    这样就可以快速匹配到自己心中的规则的控件了，坐标也好宽高也罢，都可以通过这种方式来检索，然后就和上面的步骤一样，利用唯一标识去BOS设计器中做调整即可。