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