debug-andriod

發表於 Disqus：

前端如何 debug Webview 應用程式

混合式應用程式是指結合了網頁技術（HTML、CSS、JavaScript）和原生應用程式元件的應用程式。這種應用程式通常使用一個 WebView 元件來顯示網頁內容，同時也可以利用原生的程式碼和功能，例如訪問硬體感應器、存儲資料、執行後台任務等。這樣的應用程式既能享受到網頁開發的快速和跨平台特性，又能利用原生應用程式提供的性能和功能。

混合式應用程式使用一個稱為 WebView 的元件，這個元件允許開發者在應用程式中嵌入網頁內容，提供使用網頁技術開發的功能。

WebView Test

這是一個手機 App 用於測試 Andriod WebView 應用程式，提供前端開發人員需要的資訊，透過手機安裝 Google Play 即可使用，相對簡單好上手。

Andriod Studio

如果有App開發相關的經驗，也可以開發一個 WebView 專案，提供更完整的測試功能。

可以參考 https://github.com/swcleo/android-webvew-example

記得安裝完下載並安裝完 Andriod Studio 後，記得將 sdk 的工具包指令放到 PATH 上。

1
2
export PATH=${PATH}:~/Library/Android/sdk/platform-tools
export PATH=${PATH}:~/Library/Android/sdk/tools

夜神模擬器

筆者開發的電腦是 Intel 核心的 Mac 電腦，如果手機上沒有實機，使用 Andriod Stiod 提供的 Simulator 不方便測試時，可以安裝夜神模擬器搭配 Andriod Studio 進行測試。

Andriod Studio 如何連接夜神模擬器

1 安裝&執行夜神模擬器

2 使用 adb 連接夜神的 debug 接口，可以從 virtualbox 的網路接口查看，預設是 62001

1
adb connect 127.0.0.1:62001

adb指令

  • 查看 webview 版本
1
adb shell dumpsys package com.google.android.webview | grep versionName
  • 查看手機型號
1
adb shell getprop ro.product.model
  • 查看設備資料
1
adb shell getprop | grep product

或

1
adb shell cat /system/build.prop | grep product
  • 查看 android 系統版本
1
adb shell getprop ro.build.version.release

Chrome Debug

如果 WebView 程式有透過設定啟用 Debugging 功能

1
WebView.setWebContentsDebuggingEnabled(true);

可以在 Chrome 上網址輸入

1
chrome://inspect

就可以透過手機USB偵錯功能使用 chrome 開發者工具排除 WebView 上網頁 debug 測試。