最近正在開(kāi)發(fā)一個(gè)手機(jī)端微信的Vue SPA項(xiàng)目，遇到一個(gè)奇怪的問(wèn)題倦淀，本地dev server上運(yùn)行正常哥牍，打包部署后某些手機(jī)的微信瀏覽器或者手機(jī)瀏覽器運(yùn)行頁(yè)面白屏，由于是線上問(wèn)題抡谐，而PC端也無(wú)法重現(xiàn)，先是想是不是某個(gè)外部js加載出錯(cuò)造成的桐猬，看了半天代碼嘗試優(yōu)化也沒(méi)解決問(wèn)題麦撵，最后想到是否能通過(guò)調(diào)試手機(jī)端瀏覽器來(lái)定位。在網(wǎng)上查了一下溃肪，PC端Chrome已經(jīng)實(shí)現(xiàn)遠(yuǎn)程調(diào)試移動(dòng)設(shè)備WebView頁(yè)面免胃。
首先打開(kāi)Android手機(jī)瀏覽器，我用的是小米手機(jī)自帶的瀏覽器（不能用QQ手機(jī)瀏覽器官方版惫撰，Chrome檢測(cè)不到羔沙，但是調(diào)試版可以，這個(gè)稍后再說(shuō)）厨钻。在手機(jī)瀏覽器中打開(kāi)需要調(diào)試的頁(yè)面扼雏，然后使用USB連接PC與手機(jī)，在Chrome地址欄中輸入?chrome://inspect?打開(kāi)以下頁(yè)面莉撇。
在上圖中就可以看到我調(diào)試的頁(yè)面行李旅宿呢蛤，點(diǎn)擊下邊的inspect就會(huì)彈出與PC端Chrome一樣的控制臺(tái)界面，如下所示
這樣就能在chrome控制臺(tái)看到真機(jī)的布局樣式和log了棍郎。接下來(lái)看看我的白屏問(wèn)題當(dāng)我打開(kāi)首頁(yè)的時(shí)候其障，在上邊這個(gè)窗口的控制臺(tái)打印出這個(gè)錯(cuò)誤
不進(jìn)行真機(jī)調(diào)試還真的看不到這個(gè)log，然后又是一系列的搜索調(diào)查終于找到問(wèn)題所在涂佃。我這個(gè)Vue項(xiàng)目用的是ES6的語(yǔ)法励翼，而B(niǎo)abel只是轉(zhuǎn)換了新的JavaScript語(yǔ)法蜈敢，而沒(méi)有轉(zhuǎn)換Object.assign, Promise等這種新的API，而我的入口JS中使用的Vue-Map就是使用了Object.assign從而造成主JS報(bào)錯(cuò)頁(yè)面無(wú)法加載汽抚。解決方法就是 npm install babel-polyfill --save-dev抓狭，然后在主JS的最上邊加上 import 'babel-polyfill'，重新打包部署運(yùn)行造烁，一切正常否过。（但有一個(gè)問(wèn)題還沒(méi)搞清楚，為什么本地運(yùn)行正常惭蟋，期待大神給些建議）苗桂，以上就是Chromium內(nèi)核瀏覽器的調(diào)試方法。
-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
跑步前進(jìn)告组，接下來(lái)咱們看看如何真機(jī)調(diào)試Android的微信瀏覽器和QQ瀏覽器煤伟，這兩種瀏覽器都是X5內(nèi)核，使用Chrome的方式的話找不到手機(jī)頁(yè)面木缝。好在騰訊推出了一個(gè)神器便锨，TBS Studio - TBS Studio介紹，X5瀏覽器的開(kāi)發(fā)調(diào)試?yán)鳌?/p>
下載后運(yùn)行后界面如下
使用USB連接PC與手機(jī)我碟，使用微信打開(kāi)調(diào)試頁(yè)面放案，點(diǎn)擊啟動(dòng)檢測(cè)
檢測(cè)到手機(jī)微信后，點(diǎn)擊確定繼續(xù)檢測(cè)怎囚，走到step4會(huì)顯示以下頁(yè)面
此時(shí)卿叽，在手機(jī)上如果微信是新版本內(nèi)核，則會(huì)彈出調(diào)試確認(rèn)開(kāi)關(guān)恳守，如果是舊內(nèi)核，則需要根據(jù)提示更新內(nèi)核（大膽更新贩虾，不用擔(dān)心）催烘，最后點(diǎn)擊啟動(dòng)調(diào)試，則會(huì)彈出和Chrome Inspect相似的檢測(cè)頁(yè)面
看到了我的調(diào)試頁(yè)面行李旅宿缎罢，點(diǎn)擊Inspect則會(huì)進(jìn)入微信瀏覽器真機(jī)調(diào)試控制臺(tái)伊群，也是和Chrome很相似
這樣就可以隨心所欲的調(diào)試真機(jī)了，所有和微信瀏覽器環(huán)境的問(wèn)題幾乎都能在這里找到答案策精。QQ瀏覽器的調(diào)試方式和微信的一樣舰始，只是TBS會(huì)強(qiáng)行讓你安裝QQ瀏覽器調(diào)試版，換成調(diào)試版后咽袜，我發(fā)現(xiàn)Chrome也就能檢測(cè)到QQ瀏覽器的頁(yè)面了丸卷，很神奇。
最后询刹，微信還有一個(gè)調(diào)試?yán)饕埠芎糜妹占担褪俏⑿舧eb開(kāi)發(fā)者工具萎坷，最早是和小程序開(kāi)發(fā)工具分開(kāi)發(fā)布的，開(kāi)發(fā)者怨聲載道最后集成到一起了沐兰，這個(gè)也能模擬微信的運(yùn)行環(huán)境哆档，在這里就不贅述了，詳情請(qǐng)查看微信小程序工具住闯。
以上就是Android端常用瀏覽器的真機(jī)調(diào)試方法瓜浸，有了這些，再也不擔(dān)心那些產(chǎn)品環(huán)境bug過(guò)夜了比原。
順便推薦一下我開(kāi)發(fā)的旅宿產(chǎn)品插佛，公眾號(hào) 行李旅宿 https://wx.travelingwithhotel.com/，來(lái)場(chǎng)說(shuō)走就走的旅行就用行李旅宿春寿。
