技术分享 | WEB 端常见 Bug 解析

本文涉及的产品
全局流量管理 GTM,标准版 1个月
云解析 DNS,旗舰版 1个月
公共DNS(含HTTPDNS解析),每月1000万次HTTP解析
简介: 技术分享 | WEB 端常见 Bug 解析

对于 WEB 产品来说,有一些常见的 Bug,本章节挑选一些比较典型的 Bug 进行举例介绍。

UI Bug

页面展示的时候,需要根据长度的边界值去设计用例进行验证。

一般来说都会有超长内容的验证。看看文字超长之后,页面展示会不会出现问题。

如果出现问题的话,可能就类似于这样,出现了滚动条,内容被遮盖了一部分。这是不想看到的场景,是需要进行修改的。比如可以折行展示,或者超出部分…,这些解决方案都是可以接受的。


这一类问题一般会出现在兼容测试中。web 可能需要在各种系统的各种版本的不同浏览器上运行。

PC 端,手机端,Win、Mac、Linux、Android、iOS,这些设备上的各种版本的浏览器。这些浏览器的内核和特性会有区别,就会导致在不同浏览器上页面的展示可能会有错乱的问题。比如图里问题,页面最右侧没有显示完全。

这是属于界面的问题,图中是一个注册的界面,但是注册密码的要求没有明确的进行说明。


可能用户所有的都输入完成了之后,点击注册,才能得到密码不符合要求的提示,这样的用户体验会很差。

一般来说,输入框是需要对要输入内容的规则先说明清楚。

功能

这种 BUG 是平常工作中最常见的。核心就是功能没有符合需求当中的要求。


比如图里是百度,输入内容后,没有搜索到对应的内容,这就是没有实现需求中要求的功能。

功能方面还有一些比较常见的 BUG 是提示信息中带了一些错误码之类的内容,这些内容是不应该暴露给用户的,给用户的应该就是明确的中文提示。


还有一种比较常见的情况,就是 JS 脚本会报错。


如果遇到这种情况的时候,得先区分一下造成的原因是什么。

1、网速过慢,网页代码没有完全下载就运行了,导致不完整

2、网页设计错误,导致部分代码不能执行

3、浏览器不兼容导致部分代码不能执行

4、浏览器缓存出错

5、网站服务器访问量太大,导致服务器超负载,部分代码没有完全下载就提示浏览器完毕,导致错误

更改不同步的问题是指登录后打开多个页面,在一个页面中操作修改内容之后,在另一个页面中查看,但是已经修改过的内容在另一个页面上没有体现。

登录状态不同步的问题是指打开一个系统的多个页面,其中一个页面登录成功,在另一个页面上刷新,但是刷新之后没有同步为登录状态。

其他

这种情况就涉及到网络请求了,可以到开发者工具的 NetWork 面板中查看请求发送的状态,通过状态码是 400 就能简单的定位是前端的请求发送出了问题。

这种情况需要排查是网络的问题,还是网页性能的问题。如果是性能问题的话,就需要进行针对性的优化了。

这种是对于输入框进行测试的时候,可能会出现的问题。


因为 WEB 页面本身就是 HTML 写的,所以在输入框中输入 HTML 语言片段的话,如果没有进行处理,页面可能会有报错信息。就像图中展示的这样。

所以对于输入框,应该覆盖输入 HTML 格式内容的测试用例。

相关文章
|
3月前
|
XML JSON API
ServiceStack:不仅仅是一个高性能Web API和微服务框架,更是一站式解决方案——深入解析其多协议支持及简便开发流程,带您体验前所未有的.NET开发效率革命
【10月更文挑战第9天】ServiceStack 是一个高性能的 Web API 和微服务框架,支持 JSON、XML、CSV 等多种数据格式。它简化了 .NET 应用的开发流程,提供了直观的 RESTful 服务构建方式。ServiceStack 支持高并发请求和复杂业务逻辑,安装简单,通过 NuGet 包管理器即可快速集成。示例代码展示了如何创建一个返回当前日期的简单服务,包括定义请求和响应 DTO、实现服务逻辑、配置路由和宿主。ServiceStack 还支持 WebSocket、SignalR 等实时通信协议,具备自动验证、自动过滤器等丰富功能,适合快速搭建高性能、可扩展的服务端应用。
177 3
|
3月前
|
运维 负载均衡 安全
深度解析:Python Web前后端分离架构中WebSocket的选型与实现策略
深度解析:Python Web前后端分离架构中WebSocket的选型与实现策略
133 0
|
14天前
|
物联网 调度 vr&ar
鸿蒙HarmonyOS应用开发 |鸿蒙技术分享HarmonyOS Next 深度解析:分布式能力与跨设备协作实战
鸿蒙技术分享:HarmonyOS Next 深度解析 随着万物互联时代的到来,华为发布的 HarmonyOS Next 在技术架构和生态体验上实现了重大升级。本文从技术架构、生态优势和开发实践三方面深入探讨其特点,并通过跨设备笔记应用实战案例,展示其强大的分布式能力和多设备协作功能。核心亮点包括新一代微内核架构、统一开发语言 ArkTS 和多模态交互支持。开发者可借助 DevEco Studio 4.0 快速上手,体验高效、灵活的开发过程。 239个字符
182 13
鸿蒙HarmonyOS应用开发 |鸿蒙技术分享HarmonyOS Next 深度解析:分布式能力与跨设备协作实战
|
2月前
|
JSON JavaScript 前端开发
蓝桥杯web组赛题解析和杯赛技巧
本文作者是一位自学前端两年半的大一学生,在第十五届蓝桥杯Web组比赛中获得省一和国三。文章详细解析了比赛题纲,涵盖HTML、CSS、JavaScript、Echarts和Vue等技术要点,并分享了备赛技巧和比赛经验。作者强调了多写代码和解题思路的重要性,同时提供了省赛和国赛的具体流程及注意事项。希望对参赛者有所帮助。
90 3
|
2月前
|
安全 前端开发 Java
Web安全进阶:XSS与CSRF攻击防御策略深度解析
【10月更文挑战第26天】Web安全是现代软件开发的重要领域,本文深入探讨了XSS和CSRF两种常见攻击的原理及防御策略。针对XSS,介绍了输入验证与转义、使用CSP、WAF、HTTP-only Cookie和代码审查等方法。对于CSRF,提出了启用CSRF保护、设置CSRF Token、使用HTTPS、二次验证和用户教育等措施。通过这些策略,开发者可以构建更安全的Web应用。
105 4
|
2月前
|
安全 Go PHP
Web安全进阶:XSS与CSRF攻击防御策略深度解析
【10月更文挑战第27天】本文深入解析了Web安全中的XSS和CSRF攻击防御策略。针对XSS,介绍了输入验证与净化、内容安全策略(CSP)和HTTP头部安全配置;针对CSRF,提出了使用CSRF令牌、验证HTTP请求头、限制同源策略和双重提交Cookie等方法,帮助开发者有效保护网站和用户数据安全。
90 2
|
3月前
|
前端开发 开发者 容器
构建响应式Web界面:Flexbox与Grid布局的深度解析
【10月更文挑战第11天】本文深入解析了CSS3中的Flexbox和Grid布局,探讨了它们的特点、应用场景及使用方法。Flexbox适用于一维布局,如导航栏;Grid布局则适用于二维布局,如复杂网格。通过示例代码和核心属性介绍,帮助开发者灵活构建响应式Web界面。
62 5
|
4月前
|
SQL 安全 数据库
Python Web开发者必看!SQL注入、XSS、CSRF全面解析,守护你的网站安全!
在Python Web开发中,构建安全应用至关重要。本文通过问答形式,详细解析了三种常见Web安全威胁——SQL注入、XSS和CSRF,并提供了实用的防御策略及示例代码。针对SQL注入,建议使用参数化查询;对于XSS,需对输出进行HTML编码;而防范CSRF,则应利用CSRF令牌。通过这些措施,帮助开发者有效提升应用安全性,确保网站稳定运行。
66 1
|
3月前
|
Java Spring
【亲测有效完结bug】org.springframework.web.util.NestedServletException: Handler dispatch failed; nested exce
【亲测有效完结bug】org.springframework.web.util.NestedServletException: Handler dispatch failed; nested exce
402 0
|
3月前
|
JSON API 开发者
深入解析Python网络编程与Web开发:urllib、requests和http模块的功能、用法及在构建现代网络应用中的关键作用
深入解析Python网络编程与Web开发:urllib、requests和http模块的功能、用法及在构建现代网络应用中的关键作用
28 0

推荐镜像

更多