首页
学习
活动
专区
工具
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 headle

这是chrome浏览器,因为headless没办法截图,所以我就把navigator对象的属性全部保存成了文本,这是使用headless时的信息: vendorSub: productSub: 20030107...经常和爬虫打交道的可能已经看出了,这是启用了webdriver协议之后会包含的字段,可是我们使用chrome headless使用的是devtools protocol啊,怎么也会有这个标志呢?...没错,当你指定了“--headless”参数的时候,不管是什么协议,都会带有该字段,如果你不指定“--headless”参数使用devtools protocol控制chrome,那么就和使用正常的浏览器没有区别...解决方案 解决办法其实也不麻烦,大致有如下几点: 更换浏览器,如上图所示,这一特性是chrome 63以后添加的,那么只要用chrome 62即可,devtools protocol也支持chrome...62; 不使用headless模式,不使用headless模式也自然不会被检测到,当然,启动一个浏览器窗口来渲染页面,性能肯定是不及headless的,这点需要权衡; 只对必要的页面使用headless

1.1K20

使用 Chrome DevTools 调试 JavaScript

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

1.7K10
领券