Intro

本篇介紹在 Mobile 裝置模擬器上針對 WebView 除錯/開發的方式

---

Android

利用電腦OS上的Chrome DevTools去抓取連接裝置上正在運行的app Webview，限制是只會列出有開Webview debug(setWebContentsDebuggingEnabled)的app。

Run apps on the Android Emulator - Android Developers

Using Google Chrome Dev tools on Android (emulator) - Stackoverflow

1. 安裝 Android Studio (以此為例)
2. 在 Project 中建立一個 Android Virtual Device (AVD)
3. 啟動該 AVD (Emulatore) 後，開啟模擬器Host電腦上 Chrome 瀏覽器
4. 於 Chrome 網址列中輸入 chrome://inspect/#devices 進入裝置清單
5. 找到該 AVD (Emulatore) 後，點選 inspect 按鈕即可針對裝置開啟 Web Developer Tool

• Is Google Play Store supported in avd emulators? - Stackoverflow
• Remote debugging WebViews - Chrome Developers
• WebView.setWebContentsDebuggingEnabled - App WebView Debug權限
• Android WebView Hacking — Enable WebView Debugging

---

iOS

Getting Started in Simulator - Apple Documentation

How do I open developer tools on iOS Simulator? - Stackoverflow

1. 安裝 Xcode
2. Xcode menu > Open Developer Tool > Simulator
3. 在 Simulator 中到 App Webview 頁面時，開啟該電腦上的 Safari 瀏覽器
4. Safari Develop menu (若沒有此選單可於設定中開啟顯示) > Simulator - {裝置型號} > {當下request名稱}，即可針對裝置開啟 Web Developer Tool

Install app on iphone simulator