本文参考:charles 映射到本地文件/文件夹
本地映射/Map Local Settings
功能:把需要请求网络的文件映射为请求本地文件
本地映射工具
本地映射工具使您能够使用本地文件,就好比他是你访问的目标网站一部分一样,流程是,客户端获取资源文件的时候,可以向服务器正常发起资源请求,但在charles就已经被截断了,并且把当前的资源请求重定向到你设置的备注;
假设你需要用到 https://zhubangbang.com/ssl/blog/img/logo.png 这个文件;
客户端会正常的向服务器发起请求,但charles把这个资截断,
并返回了 C:\Users\Administrator\Desktop\charles_app\ssl\blog\img\logo.png这个文件给客户端;
这样你实际看到的是C盘下面这些的文件,并不是真正的文件;
根据这个原理,您可以在本地开发您的文件,然后刷新浏览器即可看到效果,本地文件的内容将返回给客户端,就像它是正常的远程响应一样。
(如果不清楚原理可以看下charles使用方法中的实现原理介绍)
本地映射可以大大加快开发和测试的效率,否则您将不得不将文件上传到网站来测试结果。使用Map Local,您可以在开发环境中安全地测试。
如下图,我把自己博客的2张图片映射到本地的;
本地映射后,方便线上调试,我此时可以在本机上随便修改(不借助测试机),但是并不影响真正的用户去使用;
如果您是个人开发者,类似我这样本机写好后,直接发布到线上的,那么推荐你可以试试这种开发,避免了频繁发布和修改的繁琐事;等修改满意后,直接发到线上,和你测试的时候一样的效果,不会影响别的用户,虽然也没有几个人来看 – -、;
动态文件
动态文件(如包含服务器端脚本的文件)不会由Map Local执行,因此如果文件中有任何脚本将脚本返回到浏览器(可能不是预期的结果)。
如果您希望使用动态文件,就像它们是远程网站的一部分一样,请参阅“远程映射”工具。
怎么实现的
当请求与Map Local映射匹配时,它会检查与该路径匹配的本地文件。它不包括查询字符串,如果有一个。如果所请求的文件在本地找到,则作为响应返回,就像从远程站点加载一样,因此对客户端是有欺骗性的。如果请求的文件在本地找不到,你也不用担心,请求会像平常一样由网站提供,返回给你真正的服务器数据
例子
如果您正在更改测试css,swf或图片 JS,您可以将这些文件类型映射到本地网站的开发副本,以便您可以浏览具有所有开发资产的实时网站。创建从live.com/*.css到本地开发副本的根的映射,以及其他文件类型的类似映射。或者,您可以根据需要映射整个目录或单个文件。
上面图片,我是把 x.xxx.com 全部映射到某个文件夹下的;*是通配符,表示这个域名下的所有资源;
位置匹配
每个位置匹配可能包含协议,主机,端口和路径模式,以匹配特定的URL。位置可能包括通配符。
本地映射
本地映射包含一个位置匹配和本地目录,从该目录尝试提供匹配。
使用相对路径在本地目录中搜索文件。
相对路径是匹配路径部分之后剩下的请求位置的一部分;
本地映射可以区分大小写;
本文参考:https://www.axihe.com/