[发明专利]一种识别前端页面设计错误的方法及装置

说明书

本申请提供一种识别前端页面设计错误的方法、装置及计算机可读存储介质和电子设备。其中，所述方法包括：获取前端页面和所述前端页面对应的设计稿页面；将所述前端页面和设计稿页面显示在同一界面；调整所述前端页面和设计稿页面的位置，并在所述前端页面和设计稿页面重合后进行对比；如果所述前端页面与设计稿页面中同一元素的属性值不一致，则确定所述前端页面中该元素存在设计错误。应用本申请，可以自动识别出前端页面中存在的设计错误。

技术领域

本申请涉及互联网技术领域，尤其涉及一种识别前端页面设计错误的方法、装置及计算机存储介质和电子设备。

背景技术

目前，识别前端页面中是否存在设计错误的方式，主要是依靠人工通过肉眼观察的方法进行识别。人工识别不仅效率低下，而且容易存在错误。

为此，需要提供一种高效识别前端页面设计错误的方案。

发明内容

有鉴于此，本申请提供一种识别前端页面设计错误的方法、装置及计算机存储介质和电子设备，用于解决上述的识别前端页面设计错误效率不高的问题。

具体地，本申请是通过如下技术方案实现的：

一种识别前端页面设计错误的方法，所述方法包括：

获取前端页面和所述前端页面对应的设计稿页面；

将所述前端页面和设计稿页面显示在同一界面；

调整所述前端页面和设计稿页面的位置，并在所述前端页面和设计稿页面重合后进行对比；

如果所述前端页面与设计稿页面中同一元素的属性值不一致，则确定所述前端页面中该元素存在设计错误。

可选的，所述将所述前端页面和设计稿页面显示在同一界面，具体包括：

在浏览器中输入所述前端页面的页面地址，以显示所述页面地址对应的前端页面，并获取所述前端页面的页面代码；

将当前显示的前端页面的页面代码整体替换为所述设计稿页面的页面代码；

在当前显示的设计稿页面的页面代码中插入内联框架标签；

在所述内联框架标签内插入所述前端页面的页面代码。

可选的，所述将所述前端页面和设计稿页面显示在同一界面，具体包括：

在浏览器中输入所述前端页面的页面地址，以显示所述页面地址对应的前端页面；

在当前显示的前端页面的页面代码中插入内联框架标签；

在所述内联框架标签内插入所述设计稿页面的页面代码。

可选的，所述调整所述前端页面和设计稿页面的位置，并在所述前端页面和设计稿页面重合后进行对比，具体包括：

以所述设计稿页面中终端模拟界面的坐标为基准，调整所述前端页面的坐标，直到所述前端页面和设计稿页面重合；

比对所述前端页面与设计稿页面中同一元素的属性值是否一致。

可选的，所述以所述设计稿页面中终端模拟界面的坐标为基准，调整所述前端页面的坐标，直到所述前端页面和设计稿页面重合，具体包括：

以所述设计稿页面中终端模拟界面的坐标为基准，调整所述前端页面的坐标，使得所述前端页面和设计稿页面并排平行；

调整所述前端页面或者所述设计稿页面的位置，将并排平行的所述前端页面和设计稿页面重合。

可选的，所述方法还包括：

调整位于上层的页面透明度到阈值。