使用Charles进行本地映射代码调试验证（适用于前端页面代码调试）

最新推荐文章于 2023-10-07 23:50:14 发布
最新推荐文章于 2023-10-07 23:50:14 发布
阅读量383 收藏
点赞数
分类专栏： Charles调试html前端页面方法 文章标签： fiddler 网络 前端 功能测试 html Powered by 金山文档
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_44772177/article/details/129179611
版权
本文介绍了如何利用Charles工具进行本地映射，以便于前端页面代码的调试。首先，将前端代码保存为.html文件，然后在Charles中设置本地映射，选择要映射的本地文件，最后刷新页面，实现页面调用本地代码的目的。
摘要由CSDN通过智能技术生成

前置条件：

  1. 首先拿到一份前端页面代码，以谷歌浏览器为例；

  1. 本地桌面新建文件.txt，把前端页面代码放到.txt文件内并保存把txt后缀改成.html就会得到一个这样一个浏览器样式的文件。如下图：

  1. 打开Charles工具

    最低0.47元/天 解锁文章
    亮哥哥IT知识
    关注
    • 0
      点赞
    • 踩
    • 0
      收藏
      觉得还不错? 一键收藏
    • 打赏
      打赏
    • 0
      评论
    专栏目录
    Charles抓包工具系列文章（三）-- 接口映射工具（Map Remote和Map Local）
    天草二十六
    06-25 1006
    通过接口映射工具，可以轻松修改客户端的响应报文，注意不能修改请求报文！！如果需要修改请求报文，需借助于另外一款工具： Rewrite。从这里也可以看出来，如果你的服务使用http协议，使用代理工具charles后，就可以随意修改接口的响应报文。期望展示的是图片A，结果看到的是图片B，出现“宜春是一座叫春的城市”，也就不奇怪了。
    使用Charles完成本地文件映射
    qq_42039588的博客
    01-07 2274
    什么是本地映射 一般我们在浏览器中发起一个请求的时候一般是这样的： 1、输入www.baidu.com按下回车 2、浏览器根据根据DNS协议，解析地址找到IP地址：128.96.xx.xxx，浏览器知道了，我的请求其实要发到128.96.xx.xxx这个服务器去。 3、主机浏览器和目标服务器建立TCP连接 4、浏览器通过http协议发送请求 5、服务器发出响应（返回数据） 你可能要问了，那我...
    Charles 映射本地文件
    BLUEHEART
    01-09 2468
    资源映射就是将线上的某个请求，映射到线上的另一个资源或者本地的一个文件。 一：如何设置本地映射 1、打开Charles，抓到你需要的那个请求，右键saveResponse 2、保存文件后，可修改为你想要的内容 3、选中请求，右键选择最下面的map local 4、选择你要请求的本地文件 5、再次发起请求就可以啦✌️，如果映射成功的话这里可以看到哦. 二：如何取消本地映射 1、点击to...
    charles本地映射（类似于断点修改参数）
    spring_cloudy的博客
    12-14 1633
    在做测试时候，你需要修改请求参数或者响应参数。这时候你去百度，网上会告诉你断点。如果你用fiddler，一搜会发现很多关于断点怎么操作的文章。一搜charles也同样会有哦。但是这里告诉你第二种方式修改response的参数。 这种方法也叫做本地映射，因为他把你的参数保存在本地，然后你将有修改过的response做映射。这样下次请求该接口时候，就是使用的本地response参数。 那么该如何实现操作？ 1、对着你需要修改的接口上右键–【save response】，你可以保存在桌面或者你可以找到的任何位置（
    charles常用操作—本地映射
    LXiaYu123456789的博客
    01-02 1161
    Charles通过断言修改本地数据再发送是我们常用的一种方式，但仔细想想，如果设置了timeout时间呢？ 如果还没调试完就已经超时了，也就只能报给你一个错误提示了。 这种情况我们可以使用本地映射，再返回结果数据的接口中右键-Save Response,在弹出框中选择目录及文件名 用本地编辑器打开并修改需要填充的内容，并保存 执行断点调试，在路径Tools-Map Local Settings 菜单上勾选上并Edit Mapping, 设置好后执行即可 此时访问就不是去请求http，而是从你的本地映射
    抓包工具Charles(五)-使用本地映射修改接口响应内容（Map local）
    做测试多少要会点的技能
    04-05 1688
    排查问题、调试功能时，通过修改接口数据，可以大大加快开发和测试的速度。在Charles中利用本地映射（Map local）可以达到修改接口返回数据的目的。
    charles 浏览器代理，前端调试工具
    12-14
    charlse是一款浏览器端代理工具，可以监视、拦截、替换全部的浏览器和服务器端的http协议文本，raw data等，不仅仅具有监视功能，还可以拦截并替换部分js,html页面，从而在本机调试服务器内容或绕过服务器限制等。
    Charles教程，网络调试基础教程
    04-07
    - 在Web开发过程中，利用Charles可以轻松调试前端与后端的数据交互问题。 - 特别是对于HTTPS加密流量的调试尤为重要。 #### Charles在Mac上的配置与使用 - 在Mac上使用Charles非常便捷，大部分配置可自动完成。 - ...
    ios问题代码，训练自己的调试技巧
    08-01
    7. **日志输出**：在代码中适当位置添加`NSLog`或使用Swift的`print`语句输出信息，有助于理解程序运行状态。配合`lldb`命令`bt`（backtrace），可以在调试器中查看完整的调用堆栈。 8. **内存检测**：使用...
    Charles在mac上进行抓包工具，可以代理手机调试
    10-09
    - **映射（Mapping）**：Charles支持重定向和文件替换功能，可以将请求映射到本地文件，模拟服务器返回，用于离线调试。 - **图表视图（Chart View）**：通过图表形式展示网络请求的时间分布，有助于找出性能瓶颈。...
    让APP连接本地服务器调试1
    08-08
    本机安装代理服务器软件修改本机host 文件， 将域名指向本机127.0.0.1 test-jkda.998jk.com设置本地服务器端口为80， 并以debu
    charles断点和本地映射
    qq_25894535的博客
    08-03 345
    charles断点和本地映射
    Charles：移动端抓包 / windows客户端 / iOS手机 / HarmonyOS 4.0 / 手机访问PC本地项目做调试
    最新发布
    snowball的博客
    10-07 6336
    Windows 10 家庭中文版版本号 22H23.2.1、无线局域网3.2.2、手机须与PC连接同一无线网，点击 “叹号”3.2.3、点击代理配置3.2.4、选择手动，服务器 输入 pc的 ip 地址，端口 8888服务器ip地址可以在Charles --> Help --> Local IP Address 找到3.2.5、手机连接成功后，pc出现弹窗，点击 allow （允许）
    前端调试利器 - Charles
    weixin_34409703的博客
    08-31 173
    Docs 开发之 Charles 配置指南 1.下载与安装 charles-proxy-4.1.4 .dmg56.12 MB已存到云盘下载 2.激活 使用公司正版license 激活 安装证书 点击证书并选择「始终信任」 (证书不被信任可能会导致网站开发时部分资源文件无法加载。) 设置代理 将你需要代理HTTPS的网站添加进去: ...
    charles配置h5页面访问本地代码
    well_kk的博客
    03-17 459
    打开手机-wifi-当前网络设置（iphone是个 i 的标志）- 配置代理-手动-写上PC的ip （参考：https://www.jianshu.com/p/dba52360992b?host:访问的服务地址（这里我遇到一个问题，项目访问地址是A，部署地址是B，因为项目做了nginx代理，而这里要填的就是实际地址B）参考：https://blog.csdn.net/syg90178aw/article/details/107313534。希望app可以实时访问到本地项目代码，进行调试。
    前端调试神器Charles实战应用（一）
    tcr931117355的博客
    04-14 295
    一、前言 以前只听过Charles的传说，并没有一睹它的风采。这次开发调试想配合它来提高生产力，解放服务器的压力（服务器打包表示压力很大，我的小身板哟）。
    charles验证工具
    qq_42412061的博客
    07-01 142
    位置：工具——验证（tools——Validate） 验证工具 Charles可以通过发送到W3C HTML验证器，W3C CSS验证器和W3C Feed验证器来验证记录的响应。 验证报告在Charles中显示，并显示出与响应源中相应行的警告或错误（双击错误消息中的行号可以切换到源视图）。 因为Charles测试它记录的响应，它可以测试不容易测试的场景，例如在提交表单后显示错误消息。 重新验证 验证后，您可以从验证结果中选择响应并重复，重复原始请求，然后重新验证结果。 您可以修复任何验证问题，并
    charles设置代理调试
    西洲
    03-29 5277
    Charles其实是一款代理服务器，通过过将自己设置成系统（电脑或者浏览器）的网络访问代理服务器，然后截取请求和请求结果达到分析抓包的目的。该软件是用Java写的，能够在Windows，Mac，Linux上使用。安装Charles的时候要先装好Java环境。 Charles的主要功能： （1）截取Http 和 Https 网络封包。 （2）支持重发网络请求，方便后端调试。 （3...
    评论
    添加红包

    请填写红包祝福语或标题

    个

    红包个数最小为10个

    元

    红包金额最低5元

    当前余额3.43元 前往充值 >
    需支付：10.00元
    成就一亿技术人!
    领取后你会自动成为博主和红包主的粉丝 规则
    hope_wisdom
    发出的红包

    打赏作者

    亮哥哥IT知识

    你的鼓励将是我创作的最大动力

    ¥1 ¥2 ¥4 ¥6 ¥10 ¥20
    扫码支付：¥1
    获取中
    扫码支付

    您的余额不足，请更换扫码支付或充值

    打赏作者

    实付元
    使用余额支付
    点击重新获取
    扫码支付
    钱包余额 0

    抵扣说明：

    1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
    2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

    余额充值