继续浏览精彩内容
慕课网APP
程序员的梦工厂
打开
继续
感谢您的支持,我会继续努力的
赞赏金额会直接到老师账户
将二维码发送给自己后长按识别
微信支付
支付宝支付

通过修改JS文件实现页面数据修改

马西拉拢
关注TA
已关注
手记 1
粉丝 12
获赞 5

测试目的:有时候拿到web测试的页面,是服务端已经固定发送了特定数据给客户端,此时为了测试部分数据长度是否会影响界面布局,就需要使用工具去修改数据内容来达到测试目的。

方法一:简单粗暴直接通过修改已经渲染加载好的HTML页面

  1. 使用F12开发者工具-Elements,定位好要修改的元素内容;
  2. 直接在标签内修改文字内容。
    图片描述
    弊端:无法再手机端上看到效果,而且页面刷新了数据就会还原

方法二:修改JS文件

  1. 使用F12开发者工具-Network抓取网络请求地址
  2. 在postman中进行get请求,获取JSON数据
  3. 将该数据转换为HTML格式发现是由jQuery的getJSON()方法实现JSON数据的加载
    图片描述

  4. 查看网页源代码,定位需要修改的标签信息。一般这些标签会有id
  5. 通过id从源文件的js文件中,找到getJSON()方法,并将该JS文件另存为本地
  6. 在本地的JS文件中把自己需要数据的内容修改好
    图片描述

接下来要做的就是,把本地的js文件替换网页中的js文件

  • 使用fiddler抓取到该源代码中的js文件

  • 使用fiddler-autoresponser功能把本地的JS文件和fiddler抓取到需要被替换的js文件相匹配,点击保存
    图片描述

  • 清除浏览器缓存,重新进入测试网址,就会发现需要修改的数据已经生效。

  • 手机设置fiddler代理,一样可以访问修改过js文件的页面了
打开App,阅读手记
0人推荐
发表评论
随时随地看视频慕课网APP