文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布

测试能力培养之前端调试能力

在现在这个H5流行的时代，作为测试人员不能仅仅依赖UI的反馈来确定问题，掌握前端调试的方法是分层测试技术中的最前端。理解、分析、定位前端工作原理，可以有效的提高测试效率并且准确提交缺陷报告。...CSS选择器有两大类，一个是标签，一个是Class属性，在理解其选择器的原理之后，就是定位体系了，从传统的表格基础定位到布局的理解是需要一点时间的。...主要原因还是以前并没有认真思考过这里的工作情况，或者没有机会深度去对JS脚本进行断点、跟踪、调试分析过程。...在这两天的课程中，主要围绕着写代码（Sublime）、抓包（Chrome F12）、元素定位分析（Chrome F12）、JavaScript调试跟踪（Chrome F12）进行的。...对于大多数测试很少深度玩Chrome开发工具的，突然会发现有那么多有趣的事情，如何动态在页面上通过console调用JS函数，如何打断点跟踪JS变量，如何抓取网络请求，理解布局，分析元素加载的机制及可能涉及的功能

64710
    • 您找到你想要的搜索结果了吗？
    是的
    没有找到

    2024年必备：每个前端开发者都应掌握的Chrome开发工具调试技巧

    在本文中，我将介绍如何利用Chrome控制台中的快捷工具来加速网络应用的调试工作。例如，当你需要快速获取DOM检视器中选中的元素时，你可以使用这些快捷工具，而不是进行繁琐的鼠标点击或长代码输入。...JQuery库以其简洁的语法和强大的功能而广受欢迎，它使用CSS选择器来选择DOM元素，相较于传统的Web API，JQuery提供了更加高效的方式。...但如果你的网页应用并未使用JQuery，又该如何快速选择DOM节点呢？ 幸运的是，即使你的应用中没有引入JQuery，Chrome浏览器的控制台也提供了类似的功能。...如果你想停止对 genArr 函数的监控，可以使用以下代码片段： unmonitor(genArr) 通过这种方式，开发者可以在不干扰正常代码执行的情况下，有效地跟踪和分析函数的调用情况。...但如果我们想知道特定事件何时被触发，又不使用DevTools GUI中基于GUI的事件监听器断点功能，该怎么办呢？

    1.6K10

    (转)一探前端开发中的JS调试技巧

    另一方面，alert的调试信息，必须在程序逻辑中添加类似”alert(xxxxx)”这样的语句，才能正常工作，并且alert会阻碍页面的继续渲染。...以Chrome开发者工具为例，我们来看一下JS断点调试的基本方法。 Sources断点 首先，测试代码中我们通过上图console的输出结果可以看出代码应该是正常运行了，但是为什么是应该呢？...这里需要注意一点，直接在代码区打印变量值的功能是在较新版本的Chrome浏览器中才新增的功能，如果你还在使用较老版本的Chrome浏览器，可能无法直接在断点的情况下查看变量信息，此时你可以将鼠标移动到变量名上短暂停顿则会出现变量值...我想原因应该是这样的：我们在开发中偶尔会遇到异步加载html片段（包含内嵌JS代码）的情况，而这部分JS代码在Sources树种无法找到，因此无法直接在开发工具中直接添加断点，那么如果想给异步加载的脚本添加断点...演示动画中并没有演示到断点位置，这是因为，演示使用的是jQuery封装好的ajax方法，代码已经过压缩，看不到什么效果，而事实上XHR断点的产生位置是”xhr.send()”语句。

    3.1K60

    【干货】最全的JavaScript调试技巧总结，必看！

    另一方面，alert的调试信息，必须在程序逻辑中添加类似”alert(xxxxx)”这样的语句，才能正常工作，并且alert会阻碍页面的继续渲染。...以Chrome开发者工具为例，我们来看一下JS断点调试的基本方法。 Sources断点 首先，测试代码中我们通过上图console的输出结果可以看出代码应该是正常运行了，但是为什么是应该呢？...这里需要注意一点，直接在代码区打印变量值的功能是在较新版本的Chrome浏览器中才新增的功能，如果小伙伴还在使用较老版本的Chrome浏览器，可能无法直接在断点的情况下查看变量信息，此时小伙伴可以将鼠标移动到变量名上短暂停顿则会出现变量值...老九君想原因应该是这样的：我们在开发中偶尔会遇到异步加载html片段（包含内嵌JS代码）的情况，而这部分JS代码在Sources树种无法找到，因此无法直接在开发工具中直接添加断点，那么如果想给异步加载的脚本添加断点...演示动画中并没有演示到断点位置，这是因为，演示使用的是jQuery封装好的ajax方法，代码已经过压缩，看不到什么效果，而事实上XHR断点的产生位置是”xhr.send()”语句。

    2.1K70

    基础篇-fiddler《界面的介绍、抓包、什么是打断点》

    作者：清菡 博客：qinghan586.github.io(博客持续更新中) ❝由于微信公众号推送改为了信息流的形式，防止走丢，请给加个星标 ⭐，你就可以第一时间接收到本公众号的推送！....修改请求参数 3.返回断点 一、fiddler 配置 1.fiddler 工作原理 终端设备（web、app）发出请求，fiddler 作为代理，传给服务器；服务器返回数据，fiddler 拦截后，再传给终端设备...（确保 fiddler 是开着的） 4.出现如下画面，点箭头所指的位置，点击安装就可以了。 ? 注意：安装证书后，要是 fiddler 关闭了，是不能正常上网的。...注意：如果手机设置代理后，测完之后记得恢复原样，要不然手机无法正常上网。 二、fiddler 简介 1.界面介绍 ? 每一个请求就是一个会话。会话有请求有响应，主要看 Raw。 2.会话框 ?...注：文章中的图片，除标明 图片来自网络 的图片，其它图片皆为清菡本人所画。计算机知识都一样，文章是清菡的笔记。如有雷同，纯属巧合。

    1.2K10

    vscode-前端插件

    vscode 通用插件 中文 主题 标签主题 格式化 给括号加上不同的颜色, 方便区分代码块 本地文件修改历史 单词拼写检查 git 历史提交记录 GitLens 前端插件 自动闭合HTML/XML标签...require 时的包提示(node必备) Vetur (推荐)(vue必备) VueHelper Vue TypeScript Snippets Vue 2 Snippets bootstrap v3...html，而该插件支持快捷键与鼠标右键快速在浏览器中打开html文件，支持自定义打开指定的浏览器，包括：Firefox，Chrome，Opera，IE以及Safari 配置默认值： “open-in-browser.default...”: “google chrome” 括号加上不同的颜色 Bracket Pair Colorizer 给括号加上不同的颜色，便于区分不同的区块，使用者可以定义不同括号类型和不同颜色 Debugger...for Chrome 映射vscode上的断点到chrome上，方便调试 调试方式 ESLint js语法纠错，可以自定义配置，不过配置较为复杂，建议使用网上一些广泛使用的eslint配置 智能提示

    2.3K20

    利用 Chrome 条件断点精准调试 SAP UI5 应用异常行为

    官方文档展示了“当 x 大于 10 且处于 i 循环第 6 次时才中断”的实例，直观体现了过滤噪声的价值(Chrome for Developers)。...Google Groups 讨论指出，即便 Watch Expression 无法直接触发暂停，也可借由条件断点实现“表达式等于目标值时再停”这一诉求(Google Groups)。...当测试同事回报只在特定号码时崩溃，输入框其他值又一切正常，条件断点能让调试器直接跳进问题分支，避免在循环里疯狂 F8 (Medium)。...此模式在排查频繁触发的 onLiveChange 事件时尤为有用。深入排错工作流：从前端到后端开启 sap-ui-debug 并设置黑箱。...结合 Logpoint、黑箱脚本与前后端联合调试，这项看似微不足道的功能成为 SAP UI5 开发者日常定位异常的利器。掌握并习惯性使用它，能让你在茫茫事件洪流中稳稳捕获那条令人头疼的“幽灵鱼”。

    58300

    解决ASP.NET中的各种乱码问题

    在这篇博客中，我将把我想到的一些与乱码有关的经验总结出来，供大家参考。 页面显示乱码问题 在一个网站中，有些页面会正常显示，然而，有些页面会显示成乱码。...AJAX提交的数据乱码问题 AJAX技术流行了这么多年了，我想现在没有几个网站不使用这种技术的。 然而，有些人在使用AJAX时，遇到了乱码问题。...通过分析这类乱码案例中，我发现几乎都是采用这种方式向服务端提交数据： “key1=” + escape(value1) +“&key2=” + escape(value2) 这种方法在多数情况下，的确能够正常工作..., Opera, Safari, Chrome都能正常运行，其中FireFox显示的下载对话框也是我期待的样子： ?...多语言数据的乱码问题 现在还有一种乱码问题是：同一个程序供多种不同字符集（语言）的用户在使用。 例如：程序是简体中文的，此时，繁体中文的用户无法保存繁体汉字（就算简体汉字能正常显示）。

    3.4K62

    EasyNVR前端构建之输入框样式的调整

    起初我们的界面设计是为了满足功能的需求就是 ，用户可以输入激活码提交，完成永久授权。...在实际的应用过程中我们发现由于输入框自身大小的原因，我们的机器码有事无法完全展示给用户，不方便用户的自我检查激活码是否准确。因此我们考虑使用可以方便拉伸改变大小的输入框。...浏览器下 就无法完成自定大小的拉伸了 为了解决这个问题，互联网再次给我帮助， 通过插件 Resizable | jQuery UI 完美是的实现了自定义拉伸，使用鼠标改变元素的尺寸 具体使用步骤 引入.../adminlte-2.3.6/plugins/jquery-ui-1.12.1.custom/jquery-ui.js"> 给指点的元素添加id方便使用插件 在js中实现该方法 // 调用jquery-ui来完成自定义控制输入框大小，默认300X50 $("#activationCode").resizable({ }

    1.2K00

    关于JSON.stringify和Unicode编码，需要注意的几点

    1JSON.stringify会自动把所要转换内容中的汉字转换为Unicode编码 2浏览器间有差别，个别浏览器会把将要提交表单内容中的Unicode编码自动转为汉字（Chrome自动转换，IE不转）...浏览器—1—提交表单——Web服务器—2—asp解析器 Chrome在1处，在表单提交到服务器前转码。 IIS7在2处在把表单数据交给asp解析器前转码。...用JSON.stringify转换再提交的内容中如果有汉字则需要特别处理。 1不用管他，交给web服务器处理。 2改JSON.stringify,看那JS代码我就放弃了。...Chrome本地居然也是结果0,不过虽然结果是错了，却隐约感觉到错误所在。 不走IE调试，用Chrome调试，查断点，Chrome回发的数据就是"单选"，不是IE的"\u5355\u9009"。...Chrome提交数据时自动把Unicode编码转为了汉字了。 if (qt == @"\u5355\u9009")的结果显而易见。 所以改为这样，结果就正常了。

    2.5K80

    关于JSON.stringify和Unicode编码，需要注意的几点

    1JSON.stringify会自动把所要转换内容中的汉字转换为Unicode编码 2浏览器间有差别，个别浏览器会把将要提交表单内容中的Unicode编码自动转为汉字（Chrome自动转换，IE不转）...浏览器—1—提交表单——Web服务器—2—asp解析器 Chrome在1处，在表单提交到服务器前转码。 IIS7在2处在把表单数据交给asp解析器前转码。...用JSON.stringify转换再提交的内容中如果有汉字则需要特别处理。 1不用管他，交给web服务器处理。 2改JSON.stringify,看那JS代码我就放弃了。...Chrome本地居然也是结果0,不过虽然结果是错了，却隐约感觉到错误所在。 不走IE调试，用Chrome调试，查断点，Chrome回发的数据就是"单选"，不是IE的"\u5355\u9009"。...Chrome提交数据时自动把Unicode编码转为了汉字了。 if (qt == @"\u5355\u9009")的结果显而易见。 所以改为这样，结果就正常了。

    1.7K40

    聊一聊跨浏览器测试验证点梳理

    用户的非公开信息存储在Firefox浏览器缓存中，chrome浏览器就没有这样的问题。浏览器差异主要来自五个方面：渲染引擎、JS引擎、CSS支持、API实现和用户代理特性。...浏览器前进/后退按钮功能是否正常？刷新页面后状态是否保持或恢复预期？表单功能所有表单元素（文本框、单选/复选、下拉框、文件上传、按钮）是否可用、可聚焦、可交互？表单提交是否正常工作？...断点切换是否流畅？视口设置是否合理？移动设备上是否禁止了缩放或设置了正确的缩放比例？HTML/CSS 渲染一致性页面整体结构、文本、图像、容器、边距、内边距等是否在所有目标浏览器中渲染一致？...内置的密码管理器是否工作正常？浏览器缩放功能（Ctrl+滚轮/Cmd+滚轮）是否导致布局错乱？...第三方库/插件使用的JavaScript库（jQuery, React, Vue, Angular等）和版本是否与目标浏览器兼容？使用的插件或Polyfill是否在所有目标环境中有效工作？

    66820

    解决ASP.NET中的各种乱码问题

    在这篇博客中，我将把我想到的一些与乱码有关的经验总结出来，供大家参考。 页面显示乱码问题 在一个网站中，有些页面会正常显示，然而，有些页面会显示成乱码。...AJAX提交的数据乱码问题 AJAX技术流行了这么多年了，我想现在没有几个网站不使用这种技术的。 然而，有些人在使用AJAX时，遇到了乱码问题。...通过分析这类乱码案例中，我发现几乎都是采用这种方式向服务端提交数据： “key1=” + escape(value1) +“&key2=” + escape(value2) 这种方法在多数情况下，的确能够正常工作..., Opera, Safari, Chrome都能正常运行，其中FireFox显示的下载对话框也是我期待的样子： ?...多语言数据的乱码问题 现在还有一种乱码问题是：同一个程序供多种不同字符集（语言）的用户在使用。 例如：程序是简体中文的，此时，繁体中文的用户无法保存繁体汉字（就算简体汉字能正常显示）。

    2.3K60

    使用json2.js解决IE6、7、8不能使用jQuery JSON.stringify函数的问题

    ‍‍‍‍‍‍‍‍‍‍ 周末捣腾JSON提交数据，使用jQuery的JSON.stringify函数，使用Google Chrome浏览器、百度浏览器调试都正常，今天用户说IE和360浏览器提交不了...，调试了一下，发现使用IE内核的时候，语句JSON.stringify调用处报错：JSON未定义。...解决方案： 到https://github.com/douglascrockford/JSON-js （个别地区需要访问外国网站），使用其中的 json2.js 作为兼容。...这个JS中的函数将JSON对象转换成JSON字符串，专门解决 IE6、7、8不能使用 JSON.stringify 函数的问题。 在head之间，添加如下调用语句 ‍‍ ‍‍ 这样IE低版本下的jQuery JSON.stringify 便可以正常使用！

    1.8K20

    由浅入深学习JavaScript Debug技巧

    因为我们可能有时候不得不使用这样旧式的技巧。我最近一次使用alert是我在debug一个移动设备的时候现有的技巧无法正常工作，我只好用alert。 开发者工具 欢迎来到未来！哈哈，并不是这样。...同时，也显示了错误在源代码中的位置。点击(index):150就可以跳转到源代码去。 ?...我发现对于复杂的JavaScript代码，特别是自己编写的代码和其它库有交互的时候，特别有用。 你可以再代码中通过调用debugger来开启debug。...如果你点击继续按钮(右侧蓝色的类似于播放的按钮)，代码会继续执行直到下一个断点。 如果你点击跳过按钮(继续按钮的右侧，第二个)，它会直接执行当前函数，而不是进入函数内部。 ?...在第31行的左侧鼠标单击，会出现一个断点符号。 ? 库和压缩代码 有时候，为了debug，你可能需要查看库函数的源代码。但是，一般线上的代码都是经过压缩的，很难看懂。比如jQuery： ?

    1.6K90

    《吐血整理》保姆级系列教程-玩转Fiddler抓包教程(2)-初识Fiddler让你理性认识一下

    （一个下午，又一不小心过去了） 3.你曾经是否遇到过这种情况，当你发现一个bug提交给前端开发时，他说是后端返回数据的问题。于是你找到后端开发，他说是前端数据提交的问题，让你找前端开发。...不管是在开发、还是在测试阶段中，“抓包”都是定位bug的主要方法之一。特别是当你提交bug给对应的开发同学，如果没有“铁证”，他们通常都拒绝修改。...如下图所示： 9.4Fiddler卸载 可以使用控制面板中的“添加/删除”来卸载Fiddler。卸载后，系统并不会被清理干净，因此卸载无法解决配置问题。...正是他这样架构优势，才有其其他工具无法做到的强大功能，其不光是支持这些IE, Chrome, Safari, and Opera浏览器的抓包，还支持一些客户端的http(s)抓包，前提是这些client...解决的办法是重新启动下Fiddler，然后正常退出就可以了, 这也是有很多新手安装了Fiddler之后导致一些网络无法访问的原因之一。

    2.2K42

    【调试】ChromeDevTool高级调式

    概要： （1）断点 （2）寻找事件监听 （3）DOM元素断点 说道打断点，js编辑器中似乎听说的只有MS 的 Visual Studio，这傻X，MS从来没抛弃它~ 1、断点 （1）基本断点 新建一个...这就是基于DOM的断点调式。 二、Audits和Chrome性能插件 说道性能分析工具，可谓层出不穷。...但是Chrome自带的插件也很强大了，特别是Chrome看不惯Firefox，在小小的DevTool中内插了巨多功能。这是要上天了~ Audits就是性能分析插件，类似雅虎军规。...在实际的优化的过程中，通常我们会将以上几个工具进行配合使用。例如：可以先用Audits进行一个初步的判断，然后用Page Speed对问题进行具体的查看。...合成完毕就能够将纹理映射到一个网格几何结构之上——在视频游戏或者CAD程序中，这种技术用来给框架式的3D模型添加“皮肤”。Chrome采用纹理把页面中的内容分块发送给GPU。

    59820

    Apriso开发葵花宝典之二Process Builder调试篇

    计算——提交视图时执行的部分操作 操作-如果操作链接到操作，则可能包含操作 屏幕名称旁边显示的时间信息如下: 客户端时间-屏幕显示所需的完整时间 服务器时间——在屏幕显示期间执行的操作次数的总和(例如，...在使用的时候这两个方法需要传递同一个参数，若不传，则为“default” ，Chrome 控制台中原生支持类jQuery的选择器，也就是说你可以用加上熟悉的css选择器来选择DOM节点。...当该函数执行时自动断下来以供调试，类似于在该函数的入口处打了个断点，可以通过debugger来做到，同时也可以通过在Chrome开发者工具里找到相应源码然后手动打断点。...这个关键字与在调试工具中设置断点的效果是一样的。可以在需要断点的语句前加入debugger关键字设置断点，如果没有调试没有打开，debugger 语句就不会起效。...远程调试 远程调试只有在Client 模式下可以使用，此功能允许在Process Builder之外运行屏幕时进行调试，即在浏览器中(通过在DELMIA Apriso Portal中启动的FlexPart

    2.5K50

    【Linux】从版本控制到代码调试：Git 入门与 GDB 调试器学习指南

    【集中式的典型特点】： 单一中心：系统依赖唯一的中心节点驱动，逻辑集中、管理便捷； 强依赖性：用户或从属节点必须连接中心节点才能完成核心操作，若中心节点故障，整个系统将无法正常运行； 扩展受限：系统能力受中心节点的硬件...，无完整版本库，无法在断网或中心服务器不可用时独立进行版本管理； 多用户需串行或依赖中心节点的调度开展协作，体现了集中式 “单一中心驱动 + 节点强依赖” 的特性。...： 工作区：项目目录中可见的文件（如仓库下的代码文件、文档），修改后仅存于此，未被 Git 跟踪为新版本； 执行 git add 命令，将工作区的修改加入暂存区（可理解为 “待提交清单”）； 执行...显示当前没有东西可以提交的内容，工作区已清理 【.gitignore文件】 作用是指定 Git 版本控制中需要忽略的文件或目录，让这些文件 / 目录不被纳入版本管理，简单来说就是去掉杂项文件...在 GDB 中如果不指定文件名，break 指令会默认在当前调试的主文件（通常是包含 main 函数的文件）中设置断点 分别在20行和main函数处打断点： 如果在第 20 行或main函数入口设置断点时

    15810
    点击加载更多

    相关资讯

    热门标签

    更多标签

    活动推荐

      运营活动

      活动名称
      广告关闭

      腾讯云开发者

      扫码关注腾讯云开发者

      扫码关注腾讯云开发者

      领取腾讯云代金券

      热门产品

      热门推荐

      更多推荐

      Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有

      深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

      腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号

      领券