前提
Mobile device 和 computer 在同一個(gè)網(wǎng)絡(luò)下替梨。
問(wèn)題描述
- 發(fā)現(xiàn)有些bug只能在真機(jī)上能夠復(fù)現(xiàn)奋姿，因此嘗試電腦上啟動(dòng)本地服務(wù)器，服務(wù)server在8080端口
- 將手機(jī)的網(wǎng)絡(luò)調(diào)至和電腦一個(gè)網(wǎng)絡(luò)中
- 使用
ifconfig找出電腦的IP地址 - 使用手機(jī)訪問(wèn)
http://IP:8080/path
發(fā)現(xiàn)看到了一個(gè)純HTML頁(yè)面
解決思路
為什么只能看到純HTML頁(yè)面
在我之前的認(rèn)知里,如果只看到了HTML頁(yè)面竿裂，并且還是一個(gè)填充了data的HTML頁(yè)面，就說(shuō)明只有ssr起作用了盾致，browser side rendering（bsr）掛了.. so 我就一直反復(fù)的想為啥bsr沒(méi)有生效呢。荣暮。庭惜。當(dāng)別人告訴我這只是css文件沒(méi)加載出來(lái)。穗酥。我還一直沉迷在bsr的漩渦中（感覺(jué)自己賊蠢）
實(shí)踐告訴我們护赊，只想不做是沒(méi)有辦法解決問(wèn)題的，so：
第一步就是瘋狂的找有用的log信息
mobile出錯(cuò)但是moblie看不到log砾跃，瀏覽器總能看到骏啰。嘗試使用瀏覽器訪問(wèn)和mobile相同的路由,驚現(xiàn)相同的問(wèn)題。
只要出現(xiàn)問(wèn)題蜓席，請(qǐng)打開(kāi)控制臺(tái)看一下先
發(fā)現(xiàn)css和js的請(qǐng)求失敗了,好吧你們說(shuō)的對(duì)是因?yàn)閏ss文件請(qǐng)求失敗器一，log信息中還有請(qǐng)求的url。
為啥只有css和JS會(huì)失敗厨内，HTML咋不失斊盹酢？
貼兩張圖直接表明原因：
-
第一張： 前后端分離的情況
image.png
-
第二張：服務(wù)器端渲染
image.png
從上圖中可以看出了：
- 請(qǐng)求8080端口只是拿回來(lái)了HTML頁(yè)面（帶數(shù)據(jù)因?yàn)閟sr）
- 不論你是ssr還是bsr都需要再次單獨(dú)的訪問(wèn)css和js文件雏胃，webpack通常會(huì)幫助我們將css文件JS文件分別打包请毛，因此在HTML中使用`link/script` tag引用url
因此，只出現(xiàn)HTML的原因是： css和Js的請(qǐng)求掛掉了瞭亮。
第二步：請(qǐng)求掛了方仿，找到請(qǐng)求的URL，以及返回的狀態(tài)碼
一看到請(qǐng)求的url统翩，就瞬間明白了, 路徑是這樣的： http://localhost:8000/assets/client.css
呵呵呵仙蚜，這種請(qǐng)求，不曉得手機(jī)的localhost會(huì)不會(huì)瘋掉厂汗，我的項(xiàng)目啟動(dòng)了8000端口啟動(dòng)靜態(tài)服務(wù)器委粉，儲(chǔ)存css以及js文件。
為了解決這個(gè)問(wèn)題：需要分成兩個(gè)步驟：
- 修改代碼里請(qǐng)求的URL將host改為
your IP - 修改啟動(dòng)在8000端口的服務(wù)器的host改為
your IP
那么還需要將8080的host改成your IP嗎娶桦？
-
首先你請(qǐng)求8080端口成功的拿到了HTML說(shuō)明你是可以訪問(wèn)這個(gè)服務(wù)器的
補(bǔ)充一下贾节，我的8080是express服務(wù)器，express 默認(rèn)的host是0.0.0.0因此這里通過(guò)訪問(wèn)IP也可以訪問(wèn)到我的服務(wù)器衷畦。
第三步 服務(wù)器重啟栗涂，OK可以訪問(wèn)到了
總結(jié)
- 想要debug mobile，mobile只能通過(guò)訪問(wèn)你的IP address
- 如果有請(qǐng)求需要訪問(wèn)IP address祈争，那么必須要保證你的服務(wù)器可以監(jiān)聽(tīng)到IP Host的請(qǐng)求（coz： 大多數(shù)的服務(wù)器默認(rèn)啟動(dòng)在localhost斤程，是不能監(jiān)聽(tīng)到IP address的請(qǐng)求的）
- 只能看到HTML頁(yè)面，說(shuō)明css以及JS文件請(qǐng)求失敗
