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

1. 设置spy-debugger(请猛戳这里)
2. 设置完spy-debugger后，咱们在手机上安装chrome,这个直接在应用商店里搜 chrome，安装
3. 而后，修改咱们的webpack.dev.config.js 文件中devServer.host，把它注掉，这样默认启动时，webpack-dev-server会默认打开http://127.0.0.1:3000这个地址，pc浏览器就会出现咱们正在调试的页面：
4. 手机呢，在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的博文，顺手记录下开发的心路历程...