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的博文，順手記錄下開發的心路歷程...