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