起因
vue起始靜態頁使用cordova打包出來的安卓apk安裝包打開空白（模擬器+真機）且vue.config.js的publicPath已設置''，使用遠程調試看cordova的APP頁面裡面報什麼錯誤。因為在電腦的瀏覽器打開時沒這問題
解法
https://developers.google.com/web/tools/chrome-devtools/remote-debugging Get Started with Remote Debugging Android Devices
第一步、發現你的安卓設備
- 安卓手機啟用【開發人員選項】
- 開啟安卓手機上的【開發人員選項】=》【USB偵錯】
- 打開電腦的chrome
- 打開網址 chrome://inspect#devices
- 確保你的【Discover USB devices】是勾選的
- 安卓手機USB傳輸線連電腦
- 如果你的設備離線，在安卓手機上同意【允許USB偵錯】
第二步、在你的電腦上調試安卓設備上的內容
- 打開安卓手機上的chrome瀏覽器（cordova APP、三星網際網路、chrome beta都抓得到）
- 在你電腦chrome的 chrome://inspect/#devices 分頁，可以看到可用的設備、瀏覽器、分頁
- 在【Open tab with url】輸入框輸入網址、點擊Open，可以直接在安卓手機的該瀏覽器上新分頁打開該網址
- 點擊【Inspect】，將會打開新的DevTools實例
打開DevTools顯示HTTP/1.1 404 Not Found
原因
https://stackoverflow.com/a/56375871 Google Chrome Developer Tools : Android Debugging returns HTTP/1.1 404 Not Found. Why?
我家的PLDT網路在電腦的chrome無法打開 https://chrome-devtools-frontend.appspot.com/ （DNS_PROBE_FINISHED_NXDOMAIN），換一個讓電腦能打開這網址的網路即可（chrome查件Change IP address換到美國IP、使用手機globe 4G網路）
正常打開如下圖
ps. 我的手機沒換網路不受影響
ps2. 只要遠程調試能成功打開devtools一次後，切回原本網路即使 https://chrome-devtools-frontend.appspot.com/ 打不開，也不會404
其他可能原因（非我遇到的）
電腦和手機瀏覽器版本不同
https://blog.csdn.net/qq_27127385/article/details/103271568 已解决：DevTools 调试移动端 弹出 HTTP/1.1 404 Not Found
檢查chrome版本
打開 chrome://version/
ThinkPad：
Google Chrome 87.0.4280.66 (正式版本) (64 位元) (cohort: 87_66_Win)
Samsung J6：
如果要降級電腦版chrome，可能會用到：
https://www.slimjet.com/chrome/google-chrome-old-version.php Google Chrome Older Versions Download (Windows, Linux & Mac)
ps. 因為我即使使用【Chrome Beta】和電腦chrome版本一樣，也無法解決404問題，就沒嘗試降級chrome版本了
Google在你的國家限制了該功能
https://github.com/facebook/stetho/issues/597#issuecomment-395945937 HTTP/1.1 404 Not Found
目前已知伊朗、中國大陸會有此問題，可使用VPN解決
WebView實作設置錯誤
https://stackoverflow.com/a/46220364 Chrome DevTools [chrome://inspect] : 404 Not Found The resource could not be found
安卓手機：設定 =》 開發人員選項 =》 WebView實作
沒有選擇 Chrome Stable ，但是android 10 後，chrome不再提供WebView
https://www.xda-developers.com/google-chrome-no-longer-webview-provider-android-10/ Google Chrome app is no longer the WebView provider in Android 10
空白頁可能的原因
https://github.com/m0dch3n/vue-cli-plugin-cordova/issues/85 Vue Cordova Blank screen on W10
m0dch3n：使用 https://developers.google.com/web/tools/chrome-devtools/remote-debugging 查看遠程設備chrome裡報什麼錯誤
RaulGF92：使用了@babel/pollyfill一樣有這個問題
m0dch3n： vue.config.js加入
devServer: {
https: false
}
https://github.com/m0dch3n/vue-cli-plugin-cordova/issues/78 white blank screen on device emulators and browser: "page not working"
m0dch3n：通常空白頁代表你的javascript沒有啟動vue，通常是因為javascript引擎沒有支持es6或其他新功能，請使用新一點的android系統（7或以上版本），如果還是不能解決，使用chrome devtools遠程調試android手機的cordova webview
https://github.com/m0dch3n/vue-cli-plugin-cordova/issues/68 Android shows white screen and nothing more
m0dch3n：你用什麼版本的android？4.4以下變化很大，webview沒有支持所有的javascript功能（如：es6）。你或許需要polyfill或babelify。或使用android 7或8
我的空白頁的原因
模擬器遠程調試
以Visual Studio 的 Android 模擬器（hyper-v兼容）為例
開啟 5.7" Marshmallow (6.0.0) XHDPI Phone API Level 23 - Similar to Samsung Galaxy Note4...
在chrome的 chrome://inspect/#devices 可以直接抓到該模擬器，模擬器打開內建瀏覽器後，在電腦chrome直接【Inspect】可以打開devtools，但是devtools無法打開瀏覽器畫面，一打開模擬器的瀏覽器就會崩潰不能繼續使用。無需打開模擬器的開發者選項（其實也打不開）
沒有留言:
張貼留言