在现在这个H5流行的时代，作为测试人员不能仅仅依赖UI的反馈来确定问题，掌握前端调试的方法是分层测试技术中的最前端。理解、分析、定位前端工作原理，可以有效的提高测试效率并且准确提交缺陷报告。...CSS选择器有两大类，一个是标签，一个是Class属性，在理解其选择器的原理之后，就是定位体系了，从传统的表格基础定位到布局的理解是需要一点时间的。...主要原因还是以前并没有认真思考过这里的工作情况，或者没有机会深度去对JS脚本进行断点、跟踪、调试分析过程。...在这两天的课程中，主要围绕着写代码（Sublime）、抓包（Chrome F12）、元素定位分析（Chrome F12）、JavaScript调试跟踪（Chrome F12）进行的。...对于大多数测试很少深度玩Chrome开发工具的，突然会发现有那么多有趣的事情，如何动态在页面上通过console调用JS函数，如何打断点跟踪JS变量，如何抓取网络请求，理解布局，分析元素加载的机制及可能涉及的功能
本节我们就来介绍一下这个插件的使用方法，并结合一个实际案例，介绍下这个插件在 JavaScript 逆向分析中的用途。...Tampermonkey Tampermonkey，中文也叫作「油猴」，它是一款浏览器插件，支持 Chrome。利用它我们可以在浏览器加载页面时自动执行某些 JavaScript 脚本。...安装 首先我们需要安装 Tampermonkey，这里我们使用的浏览器是 Chrome。...例如： // @nocompat Chrome 这样就指定了脚本只在 Chrome 浏览器中运行。...然后输入用户名、密码，点击提交。发现成功进入了断点模式停下来了，代码就卡在了我们自定义的 debugger 这一行代码的位置，如下图所示。 ?
在本文中，我将介绍如何利用Chrome控制台中的快捷工具来加速网络应用的调试工作。例如，当你需要快速获取DOM检视器中选中的元素时，你可以使用这些快捷工具，而不是进行繁琐的鼠标点击或长代码输入。...JQuery库以其简洁的语法和强大的功能而广受欢迎，它使用CSS选择器来选择DOM元素，相较于传统的Web API，JQuery提供了更加高效的方式。...但如果你的网页应用并未使用JQuery，又该如何快速选择DOM节点呢？ 幸运的是，即使你的应用中没有引入JQuery，Chrome浏览器的控制台也提供了类似的功能。...如果你想停止对 genArr 函数的监控，可以使用以下代码片段： unmonitor(genArr) 通过这种方式，开发者可以在不干扰正常代码执行的情况下，有效地跟踪和分析函数的调用情况。...但如果我们想知道特定事件何时被触发，又不使用DevTools GUI中基于GUI的事件监听器断点功能，该怎么办呢？
另一方面，alert的调试信息，必须在程序逻辑中添加类似”alert(xxxxx)”这样的语句，才能正常工作，并且alert会阻碍页面的继续渲染。...以Chrome开发者工具为例，我们来看一下JS断点调试的基本方法。 Sources断点 首先，测试代码中我们通过上图console的输出结果可以看出代码应该是正常运行了，但是为什么是应该呢？...这里需要注意一点，直接在代码区打印变量值的功能是在较新版本的Chrome浏览器中才新增的功能，如果你还在使用较老版本的Chrome浏览器，可能无法直接在断点的情况下查看变量信息，此时你可以将鼠标移动到变量名上短暂停顿则会出现变量值...我想原因应该是这样的：我们在开发中偶尔会遇到异步加载html片段（包含内嵌JS代码）的情况，而这部分JS代码在Sources树种无法找到，因此无法直接在开发工具中直接添加断点，那么如果想给异步加载的脚本添加断点...演示动画中并没有演示到断点位置，这是因为，演示使用的是jQuery封装好的ajax方法，代码已经过压缩，看不到什么效果，而事实上XHR断点的产生位置是”xhr.send()”语句。
另一方面，alert的调试信息，必须在程序逻辑中添加类似”alert(xxxxx)”这样的语句，才能正常工作，并且alert会阻碍页面的继续渲染。...以Chrome开发者工具为例，我们来看一下JS断点调试的基本方法。 Sources断点 首先，测试代码中我们通过上图console的输出结果可以看出代码应该是正常运行了，但是为什么是应该呢？...这里需要注意一点，直接在代码区打印变量值的功能是在较新版本的Chrome浏览器中才新增的功能，如果小伙伴还在使用较老版本的Chrome浏览器，可能无法直接在断点的情况下查看变量信息，此时小伙伴可以将鼠标移动到变量名上短暂停顿则会出现变量值...老九君想原因应该是这样的：我们在开发中偶尔会遇到异步加载html片段（包含内嵌JS代码）的情况，而这部分JS代码在Sources树种无法找到，因此无法直接在开发工具中直接添加断点，那么如果想给异步加载的脚本添加断点...演示动画中并没有演示到断点位置，这是因为，演示使用的是jQuery封装好的ajax方法，代码已经过压缩，看不到什么效果，而事实上XHR断点的产生位置是”xhr.send()”语句。
作者：清菡 博客：qinghan586.github.io(博客持续更新中) ❝由于微信公众号推送改为了信息流的形式，防止走丢，请给加个星标 ⭐，你就可以第一时间接收到本公众号的推送！....修改请求参数 3.返回断点 一、fiddler 配置 1.fiddler 工作原理 终端设备（web、app）发出请求，fiddler 作为代理，传给服务器；服务器返回数据，fiddler 拦截后，再传给终端设备...（确保 fiddler 是开着的） 4.出现如下画面，点箭头所指的位置，点击安装就可以了。 ? 注意：安装证书后，要是 fiddler 关闭了，是不能正常上网的。...注意：如果手机设置代理后，测完之后记得恢复原样，要不然手机无法正常上网。 二、fiddler 简介 1.界面介绍 ? 每一个请求就是一个会话。会话有请求有响应，主要看 Raw。 2.会话框 ?...注：文章中的图片，除标明 图片来自网络 的图片，其它图片皆为清菡本人所画。计算机知识都一样，文章是清菡的笔记。如有雷同，纯属巧合。
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配置 智能提示
在这篇博客中，我将把我想到的一些与乱码有关的经验总结出来，供大家参考。 页面显示乱码问题 在一个网站中，有些页面会正常显示，然而，有些页面会显示成乱码。...AJAX提交的数据乱码问题 AJAX技术流行了这么多年了，我想现在没有几个网站不使用这种技术的。 然而，有些人在使用AJAX时，遇到了乱码问题。...通过分析这类乱码案例中，我发现几乎都是采用这种方式向服务端提交数据： “key1=” + escape(value1) +“&key2=” + escape(value2) 这种方法在多数情况下，的确能够正常工作..., Opera, Safari, Chrome都能正常运行，其中FireFox显示的下载对话框也是我期待的样子： ?...多语言数据的乱码问题 现在还有一种乱码问题是：同一个程序供多种不同字符集（语言）的用户在使用。 例如：程序是简体中文的，此时，繁体中文的用户无法保存繁体汉字（就算简体汉字能正常显示）。
起初我们的界面设计是为了满足功能的需求就是 ，用户可以输入激活码提交，完成永久授权。...在实际的应用过程中我们发现由于输入框自身大小的原因，我们的机器码有事无法完全展示给用户，不方便用户的自我检查激活码是否准确。因此我们考虑使用可以方便拉伸改变大小的输入框。...浏览器下 就无法完成自定大小的拉伸了 为了解决这个问题，互联网再次给我帮助， 通过插件 Resizable | jQuery UI 完美是的实现了自定义拉伸，使用鼠标改变元素的尺寸 具体使用步骤 引入.../adminlte-2.3.6/plugins/jquery-ui-1.12.1.custom/jquery-ui.js"> 给指点的元素添加id方便使用插件 在js中实现该方法 // 调用jquery-ui来完成自定义控制输入框大小，默认300X50 $("#activationCode").resizable({ }
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")的结果显而易见。 所以改为这样，结果就正常了。
周末捣腾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 便可以正常使用！
因为我们可能有时候不得不使用这样旧式的技巧。我最近一次使用alert是我在debug一个移动设备的时候现有的技巧无法正常工作，我只好用alert。 开发者工具 欢迎来到未来！哈哈，并不是这样。...同时，也显示了错误在源代码中的位置。点击(index):150就可以跳转到源代码去。 ?...我发现对于复杂的JavaScript代码，特别是自己编写的代码和其它库有交互的时候，特别有用。 你可以再代码中通过调用debugger来开启debug。...如果你点击继续按钮(右侧蓝色的类似于播放的按钮)，代码会继续执行直到下一个断点。 如果你点击跳过按钮(继续按钮的右侧，第二个)，它会直接执行当前函数，而不是进入函数内部。 ?...在第31行的左侧鼠标单击，会出现一个断点符号。 ? 库和压缩代码 有时候，为了debug，你可能需要查看库函数的源代码。但是，一般线上的代码都是经过压缩的，很难看懂。比如jQuery： ?
（一个下午，又一不小心过去了） 3.你曾经是否遇到过这种情况，当你发现一个bug提交给前端开发时，他说是后端返回数据的问题。于是你找到后端开发，他说是前端数据提交的问题，让你找前端开发。...不管是在开发、还是在测试阶段中，“抓包”都是定位bug的主要方法之一。特别是当你提交bug给对应的开发同学，如果没有“铁证”，他们通常都拒绝修改。...如下图所示： 9.4Fiddler卸载 可以使用控制面板中的“添加/删除”来卸载Fiddler。卸载后，系统并不会被清理干净，因此卸载无法解决配置问题。...正是他这样架构优势，才有其其他工具无法做到的强大功能，其不光是支持这些IE, Chrome, Safari, and Opera浏览器的抓包，还支持一些客户端的http(s)抓包，前提是这些client...解决的办法是重新启动下Fiddler，然后正常退出就可以了, 这也是有很多新手安装了Fiddler之后导致一些网络无法访问的原因之一。
概要： （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。
计算——提交视图时执行的部分操作 操作-如果操作链接到操作，则可能包含操作 屏幕名称旁边显示的时间信息如下: 客户端时间-屏幕显示所需的完整时间 服务器时间——在屏幕显示期间执行的操作次数的总和(例如，...在使用的时候这两个方法需要传递同一个参数，若不传，则为“default” ，Chrome 控制台中原生支持类jQuery的选择器，也就是说你可以用加上熟悉的css选择器来选择DOM节点。...当该函数执行时自动断下来以供调试，类似于在该函数的入口处打了个断点，可以通过debugger来做到，同时也可以通过在Chrome开发者工具里找到相应源码然后手动打断点。...这个关键字与在调试工具中设置断点的效果是一样的。可以在需要断点的语句前加入debugger关键字设置断点，如果没有调试没有打开，debugger 语句就不会起效。...远程调试 远程调试只有在Client 模式下可以使用，此功能允许在Process Builder之外运行屏幕时进行调试，即在浏览器中(通过在DELMIA Apriso Portal中启动的FlexPart
当然这里说的浏览器是chrome，毕竟"浏览器之多独爱chrome"。...2、是在浏览器sources中打js断点 总结： 在这两种调试的方法上，原来其实都是一样的，第一种使用一般是在有源码的情况下，我们可以本地直接这样打断点，第二种使用一般是在没有源码的情况下使用，因为这个我们无法在代码里写...debugger，我在只能在加载的资源列表里找到对象的代码去手动打断点调试，二者有个共同点就是在代码执行到我们断点处时，我们可以在console的窗口输入我们上面执行的变量以及全局变量，当然下面没有执行的代码或者正在执行的变量是...注意一个小细节：我们平时在生产或者测试环境看到的源码一般都是压缩版的，宛如天书一般，我们可以使用chrome的小功能，自动把代码整理成可阅读的形式。...看下图： 第一个大小是资源传输时的大小，第二个时资源实际的大小，在服务器中一般使用gzip压缩，大大提高了传输的效率，但是gzip压缩只能压缩响应体的内容，只适合返回数据量大的时候使用，如果数据量小的话
就是利用JS来无刷新与后端交互，通过get和post方式把数据发送到后端，或者请求后端的数据，然后根据请求的数据进行改变DOM节点等操作，从而取消掉用form的submit方式一提交就会跳转页面的情况，...像在创建账号的时候检测此用户名是否存在就是一个典型的案例，本文讲从原生JS和jQuery方面介绍AJAX的实现，跨域问题暂且不表。...AJAX无法发送文件 readyState改变时触发onreadystatechange事件，4为完成 status是返回状态，200是成功，404是未找到页面 responseText...是返回的数据，为字符串格式 三、jQuery实现AJAX 1.GET 使用get()方法时，采用GET方式向服务器请求数据，并通过方法中回调函数的参数返回请求的数据，它的调用格式如下： $.get(...为发送ajax请求时的配置对象，在该对象中，url表示服务器请求的路径，data为请求时传递的数据，dataType为服务器返回的数据类型，success为请求成功的执行的回调函数，type为发送数据请求的方式
自然框架里面，添加数据的思路、流程： 1、 根据元数据绘制表单。 2、 用户看到表单后就可以录入数据了。 3、 在前台使用正则来做验证。 4、 通过后提交给后台。 ...5、 本着提交过来的数据都不可信的原则，在后台还要再次进行验证。 6、 验证合格后，设置一个中断点。请注意这一步。 ...以上看似步骤很多，其实除了第六步之外，都是自动的。根据元数据自动运行的。 第一步，可以是自定义控件或者是js脚本，比如jQuery。 第二步是用户输入数据，这个没什么好说的。 ...就在于如何应对各种各样的业务需求的问题。 如果遇到一个特殊需求就去改动这个流程（自定义控件、类库js、脚本）的话，那么就会造成一个后果 —— 越来越臃肿，最后不肯重负，无法维护。 ...系统介绍 自然框架 的网站，目前正在不断完善中。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
腾讯会议
云直播
对象存储
