s移动web开发调试方案 -- 适配mobx的真机无线调试

sunling

2019-06-28

移动web开发，并非是HybirdApp的套壳开发，所以，不想大张旗鼓地用数据线 + usb开发调试工具来调试（无线调试才是未来的趋势~啊喂），只是开发可以在手机浏览器中运行地可以调用localStorage的webApp即可。
本次开发使用的技术组合是：React + mobx + React-router-dom + webpack + ES6 + zeptojs，没有选用MUI等现成的web移动开发框架，（据说使用hbuilder也可以实现移动端的调试，后面可以尝试下），目前就是用VScode。

想要实现的效果

实现的就是在pc端调试的移动web页面，除了使用chrome自带的模拟器，还可以通过手机无线访问调试页面，并且有热更替（HMR）。

之前的方案

最开始使用的是webpack-dev-server中的host选项：
webpack.dev.config.js：

module.exports = merge(common, {
    ...
devServer: {
    contentBase: path.join(__dirname, '../dist'),
    // 这个host用ipconfig在dos中查到 然后手机只要和pc在统一局域网中 就可以访问这个 而且 是pc与手机同步刷新的 可以暂时不考虑BrowserSync了
    // 为了真机调试移动web页面 -- 这里的不支持mobx等稍复杂的页面 -- 所以 暂弃
    // 移动端调试替代方案：
    // host: '192.168.1.114',
    host: '172.16.74.126',
    port: 3000,
    open: true,
    compress: true
    // hot: true
  }
  ...
}
)

这个方案调试普通的页面体验很不错，但是当我心满意足地开始准备移动端开发的时候，突然发现移动端突然不能显示页面了，周五下班后调试到晚上11点，逐步排除问题，热更替一切正常，只是路由中含有mobx的页面会在手机中显示不出来，虽然可以用模拟器，但是真机可以模拟更多的手势等。所以，第二天，我又开始来找寻移动端web开发的解决方案。

探索出的解决方案

参考的网友的博文，干货，感谢

组合拳

chrome手机版/UC手机开发版 + spy-debugger

FlowStep

设置spy-debugger(请猛戳这里)
设置完spy-debugger后，我们在手机上安装chrome,这个直接在应用商店里搜 chrome，安装
然后，修改我们的webpack.dev.config.js 文件中devServer.host，把它注掉，这样默认启动时，webpack-dev-server会默认打开http://127.0.0.1:3000这个地址，pc浏览器就会出现我们正在调试的页面：
手机呢，在chrome/uc中输入http://127.0.0.1:3000，也会看到我们的pc端的正在调试的页面。

以上step3： webpack.dev.config.js 需要的修改：

module.exports = merge(common, {
    ...
devServer: {
    contentBase: path.join(__dirname, '../dist'),
    // 移动端调试替代方案：
    // host: '192.168.1.114',
    // host: '172.16.74.126',  // =================> 就是这里，注起来，我们现在手机使用的是代理服务器，不是之前webpack-dev-server起的服务器了
    port: 3000,
    open: true,
    compress: true
    // hot: true
  }
  ...
}
)

ps：其他浏览器：魅族 + 百度简单搜索：都可以同步pc普通的页面，但是含有mobx的稍微复杂的页面，就白屏了。

以后的移动端调试方案

1- 每次在命令行启动spy-debugger:

spy-debugger -w

2- 启动项目（启动webpack-dev-server）:

npm start

3- 手机保证和pc同一局域网内，一般就是手机连上电脑开的热点即可
4- 手机上chrome打开需要调试的网页地址（内网地址：例如：http://127.0.0.1:3000）
（chrome可生成桌面标签，以后每一次点击进去即可，而且默认全屏（meta进行了设置））

其他思路

花生壳等内网映射 + 代理 + 静态服务器来实现无线移动端的web实时调试
webpack-dev-server中的选项：devServer.proxy 利用代理也许也有处理的思路，暂时未探究实践
利用nodejs的网络能力 + webSoket，也许我们可以自己造一个体验比较好的工具，并且可以比较好地支持mobx
现在对问题的理解也许不是最最准确的（毕竟React的井字游戏也在手机端映射不出来）,但是，这一阶段要尽快进入业务的开发，后面回过头来了再找寻更好的解决方案
BrowserSync也是一种解决方案，但是目前的使用情况，需要webpack打包后才能监视静态文件，不如webpack-dev-server在内存中起服务器+代理服务器映射到手机这样效率高，但这个工具真的很不错，后面有时间也许可以从BrowserSync入手可以找出更好的解决方案
UC的移动web调试方案

遗留

1- ~~手机上的chrome/uc点击web元素，什么元素的点击都会调起系统键盘。~~(已解决)

这个纯粹是阅读spy-debugger文档不仔细，启动代理时的命令：spy-debugger -w true,这里的true会设置页面为可编辑（其实就是在调试的页面内注入：

document.body.contentEditable=true

所以：启动时使用spy-debugger -w就可以了
ps:以后使用某一个选项，一个要阅读该选项的作用，不要想当然。
2- 每一次打开spy-debugger + 起webpack-dev-server的需要分别两个cmd命令行窗口，不是很方便哈哈，emmmm... 目前先不计较了，还能接受...

代码github地址

webpack.dev.config.js

后记（心体）

    这个算是移动开发遇到的一个obstacle,哈哈~
    因为mobx和webpack-dev-server包括手机端的浏览器都是第三方制作的东西，所以，周五当我兴致冲冲准备开发业务的时候，突然发现手机端白屏了，当时感觉计划受挫，开始有些冲击感。情人节晚上调到11点，总算时缩小了问题的范围，确定是mobx和手机端的映射可能有些不适配，但是这两个东西自己感觉无从下手。
    回去后，看着动漫心里还是想着这个问题，突然想着，换一下角度，我的目的是什么：是为了开发移动web，业务才是本体，调试只是辅助，最次我们就用chrome中的模拟器 + 在云上部署调试重大的功能，业务才是重要的。但是有真机调试，肯定是最好的，还是不甘心。准备再给4-6个小时解决这个问题，如果解决不了，也要开始业务的开发，人生毕竟是很广阔的，要做的事还很多，要走的路也很多，这只是其中一部分。所以，调整角度，从mobx与webpack-dev-server组合无法映射到移动端 调整角度到 移动web开发调试方案，这样搜索，会发现很多方案。综合接触到的各种信息加上尝试实践，这个方案是目前所实践过的比较好的。基本满足目前的业务开发，后面肯定还是有坑需要踩的，做好准备，心态平稳坚定，广大的社区和开发者朋友都是渠道和资源，在路上，虽千万人，吾往矣... 刚把得O(∩_∩)O...

第一篇segmentFault的博文，顺手记录下开发的心路历程...

web开发移动开发 web技术移动互联网终端 webpack