很多時候，h5可以直接在瀏覽器上直接進行開發(fā)、調(diào)試，但是真機上的表現(xiàn)并一定都會按你開發(fā)時的預(yù)想走。所以既能讓頁面在真機上運行，又能在瀏覽器上進行調(diào)試（log、斷點等），那可真是一件極舒服的事。
要做到這樣，并不難，只要跟著我的步驟走。
真機方面
- 確保你的機子處于開發(fā)者模式，并允許USB調(diào)試。關(guān)于如何打開開發(fā)者模式，每個機型都不一樣，所以具體型號查百度就可以了。
- 用USB將你的機子和電腦連在一起，這時會彈出USB進行充電、文件傳輸?shù)葞讉€選項。請務(wù)必選擇文件傳輸。
瀏覽器方面
- 只能選擇chrome
- 輸入網(wǎng)址：
chrome://inspect/#devices - 稍等片刻，就會顯示出你此時在真機上打開的H5頁面網(wǎng)址。點擊inspect，就能打開調(diào)試頁面了。你在手機上做的任何行為都會在chrome上同步，非常nice。
頁面空白
按照了上面的步驟執(zhí)行，但是出現(xiàn)的頁面卻是空白的。有幾個解決方案可嘗試：
- 翻墻
因為chrome inspect需要加載 https://chrome-devtools-frontend.appspot.com 上的資源，所以需要翻墻。 - 更新chrome版本
webview內(nèi)置的內(nèi)核版本若是高于PC端的chrome也會導(dǎo)致空白 - 清緩存
chrome://appcache-internals/#清除這里的緩存
