首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往
您找到你想要的搜索结果了吗?
是的
没有找到

如何定位前端UI显示错误

如何定位前端UI显示错误 目录 1、前言 2、模拟验证 1、前言 在做Web端功能测试时,尤其是前端UI页面检查的时候,有些字面显示或统计数字显示等,是无法在正常情况下显示出来的,只能等到满足一定的条件下...,才会显示出来,这个时候光检查当前显示的样式感觉有些被动,测试不全面,其实可以借助工具来进行模拟数据进行验证。...根据此页面,要验证一下,当只有一个渠道百分比为100%时,页面样式显示的情况。 那么要用什么工具进行模拟验证呢? 其实就是测试用的浏览器,打开开发者工具,进行元素定位修改即可。...这里作者使用Chrome浏览器进行模拟。 首先打开开发者工具,并切换到Elements下。 点击定位元素的箭头。 定位到渠道A的百分比56%数字上。 之后将数字修改为100%即可。...此时的页面,渠道A的百分比100%换行显示了。可以看出显示边界有问题,就可以给前端提BUG了。 类似这种的显示模拟,都可以直接对元素参数进行修改,来验证页面显示的效果是否正确。

1K30

chrome xpath的使用

最近研究爬虫的时候,发现chrome也支持xpath,用法如下,在console中输入 $x("//h1") 即可定位到第一个h1元素。 ?...image.png xpath常用语法 1.定位元素 使用/ 或者//定位元素,如果路径以/开始,代表相对于一个元素的绝对路径,如果路径以//开始,则表示选择文档中所有符合该条件的元素。...2.选择未知元素 使用通配符*选择未知元素。 /div/* # 选择div元素下所有的子节点。 /*/*/a # 选择具有两个父元素的所有a节点。 //** 选中所有元素。...3.选择分支 通过在XPath表达式中使用方括号可以进一步地指定一个元素。 /div/p[1] # 选择div下第一个p节点。.../div/p[last()] # 选择最后一个元素 4.选择多个路径 使用| 选择多个路径。 /div/p | div/a 5.选择属性 使用@选择属性。

1K20

使用chrome调试CSS

chrome devtools 是前端开发再也熟悉不过的调试工具了。那么我们究竟有多了解它,这里总结了一些常用的CSS调试操作。...以 :hover 为例,选中 :hover 复选框,如果 被检查的元素添加了 :hover 样式,在样式列表中就会显示此条样式。并且页面效果不用鼠标悬浮也会触发显示效果。...使用Coverage选项卡查看已使用和未使用的CSS 1、按下Command+ Shift+ P(Mac)或 Control+ Shift+ P(Windows,Linux,Chrome OS),而DevTools...页面重新加载,Coverage选项卡提供浏览器加载的每个文件使用多少CSS(和JavaScript)的概述。绿色代表使用CSS。红色表示未使用的CSS。...4、单击一个CSS文件,查看它使用的CSS的逐行细分。 拾色器的使用 面板说明 以下是拾色器的每个UI元素的说明: 1、阴影。 2、吸管。 3、复制到剪贴板。将显示值复制到剪贴板。 4、显示价值。

5.4K20

使用Vue开发Chrome插件

前言​ 我当时学习开发 Chrome 插件的时候,还不会 Vue,更别说 Webpack 了,所以使用的都是原生的 html 开发,效率就不提了,而这次就准备使用 vue-cli 来进行编写一个某...也顺带是复习一下 HTML 中鼠标事件和 vue 自定义命令了 功能实现​ 主要功能 检测视频页面,输出对应 up 主,关注数以及视频标题播放(参数过多就不一一显示了) 监控关键词根据内容判断是否点赞,...document_end,然后在操作 dom 元素吗,实现效果如下 如果像显示到 popup 页面只需要通过页面通信就行了,不过前提得先 popup 打开才行,所以一般都是通过 background...用过 Vue 的都知道写网页很方便,写 Chrome 插件未尝不是编写一个网页,当时的我在接触了 Vue 后就萌发了使用 vue 来编写 Chrome 的想法,当然肯定不止我一个这么想过,所以我在 github...如果有涉及到爬取数据相关的,我肯定是首选使用 HTTP 协议,如果在搞不定我会选择使用 puppeteerjs,不过 Chrome 插件主要还是增强页面功能的,可以实现原本页面不具备的功能。

3.3K20

使用 Chrome DevTools 调试 JavaScript

不要再使用 console.log! 学会在 Chrome Developer Tools 中使用断点来调试代码。 作为一名新的开发人员,发现和修复 bug 挺难的。...您可能会试图随意使用 console.log() 来调试代码使代码正常工作。 不要再这样了。 这篇文章将讲述正确调试的方法! 您将了解如何使用 Chrome 开发人员工具来设置断点并逐步完成代码。...“再现错误”意味着找到一系列持续导致错误出现的动作。 您可能需要重复该错误多次,所以尝试消除任何不必要的步骤。 按照以下说明重现您将在本教程中解决的 bug。 这是我们将在本教程中使用的网页。...显示 5 + 1 = 51。 哎呦。结果是错的。 结果应该是 6。 这是您要修复的错误。 步骤 2:用断点暂停代码 DevTools 允许您在执行过程中暂停代码,并在此时检查所有变量的值。...您可以使用其他类型的断点来暂停代码逐步靠近错误的位置,而不是逐步遍历每行代码。 步骤 4: 设置另外的断点 行断点是最常见的断点类型。 当你想暂停某一行代码,可以使用行代码断点。

2.3K70

使用 Chrome DevTools 调试 JavaScript

您可能会试图随意使用 console.log() 来调试代码使代码正常工作。 不要再这样了。 这篇文章将讲述正确调试的方法!您将了解如何使用 Chrome 开发人员工具来设置断点并逐步完成代码。...“再现错误”意味着找到一系列持续导致错误出现的动作。您可能需要重复该错误多次,所以尝试消除任何不必要的步骤。 按照以下说明重现您将在本教程中解决的 bug。 这是我们将在本教程中使用的网页。...显示 5 + 1 = 51。 哎呦。结果是错的。结果应该是 6。这是您要修复的错误。 步骤 2:用断点暂停代码 DevTools 允许您在执行过程中暂停代码,并在此时检查所有变量的值。...您可以使用其他类型的断点来暂停代码逐步靠近错误的位置,而不是逐步遍历每行代码。 步骤 4:设置另外的断点 行断点是最常见的断点类型。当你想暂停某一行代码,可以使用行代码断点。...其二,您可能不知道哪个变量与错误有关,所以您可能需要打印许多变量。 DevTools 的一个 console.log() 替代是 Watch 表达式。使用监视表达式来监视变量随时间的变化。

1.7K10
领券