持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第16天，点击查看活动详情
前言
身为一个前端小菜鸟，总是有一个飞高飞远的梦想，因此，每点小成长，我都想要让它变得更有意义，为了自己，也为了更多值得的人
开开心心学技术大法~~
来了来了，他真的来了~
正文
之前忘记在哪里看到了，要有看得见的思考，好像是一个带看源码的老师提到的，后面我也尝试了下，确实相比于只思考和实践，花一部分时间将思考和实践结果都记录下更容易帮你理清思路
定位问题
比如我今天遇到的问题：
项目上线运行已经两个多月了，一直没有问题，突然有一天，运营在群里反馈，没办法切换地址了。
？？
我第一反应是，不可能，绝对是哪位运营数据配置错误，后来又想了想，如果是数据错误，那这样的问题不可能两个月后再出现吧，毕竟刚开始上线的一个月内差不多上线了近万条数据，后一个月基本是零零星星的数据。
最后放心不下，还是决定理一下问题。
复现问题
- 刚开始找运营拿有问题的链接，去浏览器上访问，企图找到问题
结果有问题的【申请】按钮点击不进去，因为该按钮判断了要在app中才有效
-
于是我企图扫码进入
结果超过250字符不让扫码
-
我干掉不关键参数，只保留关键参数app扫码进入
复现出问题
定位问题
-
找代码大概定位到两个地方
- 将参数通过prod传入url，然后再接收，有url的长度限制，可能是超长了导致存入localStory中的数据不完整
- 从地址管理跳转回来时将localStory里的数据没有encodeURIComponent就直接传入了url导致接收时JSON.prase失败
代码大体是，从详情页面到下单页面时将数据传入了url（不要问我为什么这样做，接盘侠表示不想管😄），在下单页面又将数据存入了localStory。
然后从下单页点击地址进入地址管理页进行切换地址，地址管理页用的是localStory里的数据，然后切换完成之后跳回到下单页，将localStory里的数据又重新塞入到下单页的url中。（不要问我为什么localStory里有数据了依然要用url里的数据，问就是接盘侠不想知道。。）
排查问题
-
然后我先复制了vconsole的localStory中的目标数据，发现数据确实是少了（注意，这里是大坑）
-
于是我基于这个思路开始排错，但是通过有问题的数据来重复验证这个过程的时候，发现根本不会因为超长截断，也就是不是因为url长度限制导致的数据截断，那为什么vconsole里有这个问题呢？
-
于是又引入了新的问题，一个头两个大。
-
最后自己又模拟走了下app扫码=》vconsoe复制localStory的流程，发现如果是直接vconsole右边复制图标复制的数据是完整的，如果点击编辑再手动复制的则是数据缺失的。确实很坑，这是个vconsole的坑，并不是代码的坑
- 当然，这里缺失的数据也是有特殊性的，内部含有#符号，vsconsole丢失了#符号之后的数据
-
于是我有回头考虑是否是地址管理跳回下单页时未encodeURIComponent导致的。
-
我浏览器上拿到数据测试了一下，发现果然是未编码导致的，这个时候问题又来了，我让测试帮忙造了一条数据在测试环境，发现即使没有编码也没有错误？
-
又陷入了循环，难道是这一条数据的问题？于是我又企图想通过charles的local map来模拟完全相同的数据
-
发现根本local map不了，因为这是一个复杂请求，还会请求option，如果local map了域名，会先map option请求，因为map的本地是一个json文件，不符合option的response头要求，所以请求直接在option这一层就断掉了
-
怎样跳过option直接map post呢？我是没找到解决方法，因为筛选条件就那几个，实在没法单独map post，或者是我没找到设置的地方
-
后来我换了个思路，将移动端数据mock到浏览器进行测试了，发现果然是编码的问题。
当然，其中还有一些细节问题，因为是老老项目的问题，老到爷爷都不认识的项目，所以本身是其他团队管的，后来过继到我们团队，而我又是异地开发，有vpn链接，所以地址管理那里的接口压根就是请求不通的，运维也不给开口子，所以还解决了这部分的问题。
解决问题
基于以上，我在跳转回的时候加上了encodeURIComponent就ok了。
看到这里我个人也很无语，搞了半天就一行代码搞定了，但是中间的思考和实践的过程确实不可或缺的。
到了这里，依然还有未解决的问题，如果不记录下来，我有可能真的会忘记。
疑惑
- charles跳过option请求直接local map post请求，他们的域名是完全相同的，通过参数也不靠谱，因为参数是query的
结语
看得见的思考，确实很容易帮你记录下当时遇到的问题，也能帮你理清思路，因为在疑惑点特别多的时候，总是会一条路走个开头遇到了难点，就换路思考，其实说不定，你第一次走的路就是正确的！
往期好文推荐「我不推荐下，大家可能就错过了史上最牛逼vscode插件集合啦！！！(嘎嘎嘎~)😄」
