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

【问题描述】

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

【场景介绍】

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

• 而超出布局范围外，可能会引发一些布局问题，而此时想要通过印象去检索或通过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就对应控件的宽高数据等。

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