前言
- 有时候我们需要在线上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命令
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面板
的确是增加了这个参数
总结
- 这些只是charles的冰山一角
- 其实还有一些请求阻断，转发都可以通过charles代理实现
- 包括一些更高级的更复杂的功能
- 这里是源码链接，更多的问题欢迎交流源码链接