charles本地调试之map和rewrite功能

发表于:2021-5-31 09:36  作者:wonyun   来源:博客园

字体: | 上一篇 | 下一篇 |我要投稿 | 推荐标签: Charles 抓包工具

  charles是一款mac下代理调试工具,对于前端开发同学来说是相当方便的一个调试接口的工具;不过charles需要收费,不过在天朝几乎收费的软件都能找到破解方法。
  使用charles前,需要将charles设置成mac OS的网络系代理服务器,这样charles就可以捕获到mac上所有的网络请求,然后charles在做些手脚(如map和rewrite功能)就可以很轻松的实现接口的调试。
  至于charles的具体使用可以在网上查阅其具体使用,本文就来说说在使用charles调试过程中相当重要的map和rewrite功能,这也前端调试接口用到charles最多的功能。
  map功能
  map功能,顾名思义就是将某个请求进行重定向,用重定向后的内容来响应请求的内容
  map功能分为map Local和map Remote,二者区分是:
  map Local:是将某个网络请求重定向到本地的某个文件。
  map Remote:是将某个网络请求重定向到另一个网络请求。
  二者除了重定向文件的位置不同之外,其他功能都是一样的。他们都可以对js、css、html以及api接口均可重定向,此外也可以使用通配符来进行简单的批量匹配,达到批量重定向的目的。
  在使用map功能时,本人最常见的使用场景简要说明如下:
  js、css重定向:主要是来调试js和css的实现效果。
  本地开发获取不到接口数据,那么就使用测试环境,通过map Local来将制定的js、css重定向本地进行开发。
  线上有个bug,想定位问题,但是线上代码都压缩过没法debug,这时可通过重定向到本地实现调试。
  html重定向:在开发过程中由于本地没有数据,那么可以使用测试环境的数据进行开发而不用mock数据,这时可以访问测试环境的某个页面,然后将其页面的html重定向到本地的某个页面来获取测试数据。
  页面结构可能如下面这样,有3个js引用,前面2个js为每个页面公共的js,最后一个js为当前页的业务逻辑js:
      <scritp type="text/javascript" src="http://host/path/com1.js"></scritp>
      <scritp type="text/javascript" src="http://host/path/com2.js"></scritp>
      <scritp type="text/javascript" src="http://host/path/page.js"></scritp>
  这时,将上面页面的html重定向到本地的开发页面html,由于本地页面的3个js有2个是公共的,所以他会加载测试环境的对应js,这时需要将业务逻辑的js也需重定向到本地js,这样就可以开发了;
  他只用了2个重定向操作实现:可以实现本地开发,避免mock数据;否则需要多个重定向而且还需要自己mock数据。
  api重定向: 为了mock数据;一般使用map Remote功能来将本地的请求重定向到测试或者线上环境的网络请求。
  除了单个map隐射外,还可以使用*通配符进行批量匹配,不用一个个建立重定向了。下面举一个实战的例子。
  在项目开发过程中可能会遇到这种情况,本地开发总是要为各种数据而烦恼,那么能否在本地开发中批量用到某个环境的数据呢?答案当然可以!
  在本人的某个项目开发中,本地开发因为没有数据,需要相应环境的数据,所以就需要将本地请求数据的api接口map Remote到车上环境来获取测试数据而不用进行大量的mock数据,因为涉及系统涉及到的数据api接口比较多,每个都进行单独重定向的话,效率太低;
  而非数据api接口的请求不需要重定向,那么涉及到的问题是:
  修改数据请求接口api的host为测试环境。
  本地系统中的/api/路径下的请求都转到对应的测试环境(cmstest.intra.xiaojukeji.com)的对应目录/api/下,即数据接口请求的host改为测试环境hostcmstest.intra.xiaojukeji.com,请求路径保持不变;
  `http://127.0.0.1:8080/api/transit-nepenthes/line/list` ---> `http://cmstest.intra.xiaojukeji.com/api/transit-nepenthes/line/list`
  非数据请求api接口不进行重定向,具体的charles配置如下图所示:
  注意上面map From中的Path配置项使用了*通配符,表示匹配127.0.0.1:8080/api/下的所有文件及子路径,将其重定向到cmstest.intra.xiaojukeji.com下的/api/路径下。
  上面的配置通过map Remote就是实现了区别对待本地系统的不同请求,将指定路径下的请求重定向到指定的环境,配置完成后看到所捕获的请求信息如下图所示。
  这说明配置已经生效,那么本地开发,测试环境数据就可以看到了,剩下的就可以愉快的开发项目了,是不是超赞啊!
  补充一下map隐射的相关功能
  map隐射可以使用的模式匹配符有三种:
  *: 可以匹配0个或者多个字符。
  ?: 可以匹配一个字符。
  [...]: 范围选择符,可以匹配范围中的任意一个字符。
  假设Map From配置中的各个项为空,表示匹配所有请求,然后Map To项的配置不同,代表不同含义,下表列出一个简单例子。
  Rewrite功能
  rewrite功能重写对应的内容,主要可以对某些匹配请求的header、host、url、path、query param、response status、body进行rewrite。
  rewrite功能支持正则表达式的写法,这是一个非常有用的功能;例如Math项的value正则式中的组捕获项在Replace的value值中可以使用$1~$n之类的捕获组
  Rewrite的具体设置规则步骤,可以用下面一幅图来说明:
  上面map Rewrite中用127.0.0.1:8080/api/*下的所有接口替换成指定host下对应的/api/*路径,而其他接口不做处理,用rewrite同样可以实现。
  下面就rewrite设置规则内容页面,就各项rewrite规则做一个简单说明,指出其对应的作用及其使用场景:
  header:
  作用:可以对请求或者响应的header内容进行操作,包括添加、修改及删除。
  使用场景:在需要对header进行处理时用到,例如为了用上某个环境数据,可能需要对应cookie,这时本地开发是可以在请求的header中加上cookie信息;也可以重写响应header的信息。
  如下图,在本地开发时,需要的某个环境中的数据api接口需要当前登录用户的登录信息的cookie,本地环境没有这些cookie,这时就需要添加需要cookie头,如下图所示,为匹配的接口添加cookie相关的header:
  host: 主要是对请求进行host修改,以达到本地请求获取指定host环境中的数据,常见于mock数据。
  url:
  作用:修改url中某些部分,可以用别的url进行替换或者url裁剪时间戳或者md5等。
  使用场景:场景使用非常多,既可以对host也可以对path进行rewrite,可以满足指定host下的请求重定向到其他host下对应path下。
  path: 主要rewrite path内容使用指定rewrite规则的path来响应指定的请求path,它可以对paht进行裁剪。
  query param:
  作用:可以对param进行操作,包括修改、添加、删除等。
  使用场景:有时请求可能多传递了不必要的参数,这时可以rewirte功能去掉多余的参数;另外也可以添加请求必须而暂时无法提供的参数。
  response status: 顾名思义就是对response的状态码进行rewrite;比方我想对一个指定页面A的访问重定向到另一个页面B,就可以用到这个。如下图:
  body:
  作用:对请求的响应内容做修改,一般是对某一个或几个值进行rewrite,用新的值来替代返回的值。
  使用场景:可以用来mock数据,比方说在开发中为了测试功能需要请求的某个数组字段有值,但是当前环境无法给出,那么就可以使用该功能。

  上文内容不用于商业目的,如涉及知识产权问题,请权利人联系博为峰小编(021-64471599-8017),我们将立即处理。

评 论

论坛新帖



建议使用IE 6.0以上浏览器,800×600以上分辨率,法律顾问:上海信义律师事务所 项棋律师
版权所有 上海博为峰软件技术股份有限公司 Copyright©51testing.com 2003-2021, 沪ICP备05003035号
投诉及意见反馈:webmaster@51testing.com; 业务联系:service@51testing.com 021-64471599-8017

沪公网安备 31010102002173号

51Testing官方微信

51Testing官方微博

扫一扫 测试知识全知道