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