很多時(shí)候,h5可以直接在瀏覽器上直接進(jìn)行開(kāi)發(fā)、調(diào)試,但是真機(jī)上的表現(xiàn)并一定都會(huì)按你開(kāi)發(fā)時(shí)的預(yù)想走。所以既能讓頁(yè)面在真機(jī)上運(yùn)行,又能在瀏覽器上進(jìn)行調(diào)試(log、斷點(diǎn)等),那可真是一件極舒服的事。
要做到這樣,并不難,只要跟著我的步驟走。
真機(jī)方面
- 確保你的機(jī)子處于開(kāi)發(fā)者模式,并允許USB調(diào)試。關(guān)于如何打開(kāi)開(kāi)發(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ī)上打開(kāi)的H5頁(yè)面網(wǎng)址。點(diǎn)擊inspect,就能打開(kāi)調(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/#清除這里的緩存