UMI移动端调试之webpack遮屏问题-Disconnected from the devServer, trying to reconnect

背景

先看一张图：原始页面顶部有操作栏，其实这里是移动端的一个富文本组件。而我的任务是需要排查一下拍摄照片上传的bug并解决它。

嗯！一切看似那么简单~~

排查Bug

先把手机和电脑连到同一wifi，然后采用ip的访问方式在手机上访问页面，大概这样：

http://10.211.138.179:8000/portal/gjqt/#/workspace/mobile/createEvent?state=1

看下手机展示：

？？？ 为啥webpack的连接信息会出来？？？关键还挡住了顶部，没法完成上传操作

好吧，那就看下为啥socket到手机就断了。。。打开vConsole

不好意思。。。vConsole没有检查socket的功能~

解决

通常有同学会说：“把顶部设样式往下挤一点就可以了！”
这是个方案是可以的，但是需要改样式并且不知道会不会引发其他副作用，最主要还是我不想这么干~

因为这个项目是基于umi的，对着vscode的node_modules夸夸一顿搜

哦豁~ 没搜到（其实是我忘记了打开ignore按钮，是可以搜到的！）

但是我当时并没有通过vs搜到

尝试PC模拟出webpack断开消息并分析

这很简单，直接把项目启动命令中断即可

审查观察到页面上有这个东东。。。

看了一下项目的webpack.config.js和jsconfig.json没有这个@@的alias

想必肯定是umi内部的了，去vscode搜node_modules下面umi包（因为同样忽略了ignore那个当没搜到）

于是乎。。。

用Mac的spotline竟然搜到了！！！

在umi源码devScripts文件，没有搜到Disconnected from the devServer, trying to reconnect...，但是找到以下关键代码

打开这个@umijs/bundler-webpack/bundled/js/webpackHotDevClient文件：

成功找到umi调用webpack devserver的代码，原理和预期一样：直接通过脚本追加DOM元素，实现wds的监听的反馈

干掉这个函数！
成功在手机上去除了WDS断开的提示，解决遮挡问题没花几分钟也成功解决了原始问题上传的问题（某个小伙伴的判空导致报错了）

总结

• VScode搜索node_modules内容，需要关闭ignore文件启用
• Mac的盆友们spotline(聚焦搜索)可以带你飞，搜索任何文件不管它是否在某个依赖包里
• umi实现wds链接的socket，是封装在bundle的webpackHotDevClient.js文件里
• vConsole不支持socket链路的排查

慢慢的去改变世界吧，别让世界改变了你~