神奇的抓包工具-Charles

前言

1. 有时候我们需要在线上debugger的时候，可能萌生的几个解决方案

• 如果你的环境部署了生产log日志功能，那么恭喜你，这样我们可以快速定位报错的位置，比如Sentry
• 此外，如果作为一个前端开发人员，除了在页面source面板，rewrite可以解决这个问题
• 或许我们可以借助一些抓包工具快速便捷的解决这些问题

charles魔法

某一天你的同事突然拿着你的电脑，他想通过百度去搜索一些东西，可是他会很好奇，为什么每次打开www.baidu.com 的时候总是会link到一个奇怪的链接，那么可能会是这样

其实这就是我们今天所说的一个关于charles常用的功能，那就是map-remote，通过配置不同domain去映射做到了重定向

map-remote

我这里写一个测试一个小demo，比如我们线上地址是http://47.103.9.52/charles-tutorial/ 当然这是我自己部署的一个小项目，某一次线上项目出现一个小问题，本地关联的代码

那么我想远端直接关联到我本地，那么我可以先通过执行下面shell命令

pnpm install
pnpm run build:dev
pnpm run preview

此时本地应该跑了一个静态访问地址，像这样

此时我们做一个charles map-remote

此时再次访问 http://47.103.9.52/charles-tutorial/ 你会发现本地charles代理到了本地4173这个端口上

为了验证是否生效 那么我加了一行代码，看图示

紧接着执行pnpm run build:dev,我们再次刷新页面，果然页面改动了，那么此时你可以愉快的定位到需要修改的代码进行debugger

map-local为了解决什么呢

如果我们频繁的去build整个页面就会显得效率比较低下，可不可以只是定向的修改部分代码，只重定向我们本地的已知代码呢？

• 答案是当然可以，

我们现在只是想快速替换现有的bundle.js, 此时我们改变了一点内容，请参照shop/index.js

重新执行pnpm run build:shop, 此时我们刷新页面

rewrite 使用技巧

新加一个按钮触发请求

1. 那么rewrite到底能干嘛呢

• 首先啊 可以修改请求相关的；包括请求头、请求体等
• 可以远程映射domain访问

我们这里只讲一个修改请求方面的

那么这么设置我们希望给https://www.fastmock.site/mock/3277f26b72e3b8aa6de012d30c06ce3f/api/api/getTargetDevice 增加一个请求参数 ?author=chrisworkalx

试着重新点击这个按钮

试着看下我们的network面板

的确是增加了这个参数

总结

1. 这些只是charles的冰山一角
2. 其实还有一些请求阻断，转发都可以通过charles代理实现
3. 包括一些更高级的更复杂的功能
4. 这里是源码链接，更多的问题欢迎交流源码链接