調試方式

• • 手機模擬器調試
  • 真實手機調試，安卓和IOS都可以
  • 注意事項

混合開發的時候經常要用到調試功能，調試webview方法有很多種：

直接讓客戶端把地址修改成本機ip地址，客戶端重新出調試包

通過chrome調試(chrome://inspect)，網上介紹這種方法的比較多，但是我個人覺得這個方法有點麻煩，而且只能調試安卓端，可能還需要翻墻，需要這個方式調試的可查看這篇文章 https://www.jianshu.com/p/66896bec620e

使用代理 + 修改host，個人覺得這個方法比較方便，也是這篇文章主要介紹的方法

手機模擬器調試

步驟一，修改本地項目開發服務端口，改為80端口，并啟動本地開發服務，下面vue項目為例

步驟二，修改模擬器的host文件，在文件最后一行插入IP + 域名， IP是本機電腦的IP地址，域名是調試的demo上配置的webview頁面域名

• 模擬器的host文件地址一般是在 /system/etc/ 這個目錄
• 保存host文件需要root權限，使用root權限還是保存不了的話可以把文件拷貝到其他目錄再修改，修改成功之后在把文件覆蓋回去

步驟三，安裝并打開需要調試的demo，打開要調試的頁面，然后修改開發服務的頁面內容保存，頁面就自動刷新啦

保存代碼前

保存代碼后

真實手機調試，安卓和IOS都可以

首要條件是電腦和手機的網在一個局域網內，我這里電腦是有線網絡，手機是連接同一個局域網的wifi，校驗方法就是電腦上ping手機的ip地址有返回就行。

步驟一，電腦上先啟動網絡代理服務，我這里是使用了fiddler抓包工具，通過fiddler工具欄的tools -> options 配置代理服務端口（更多的fiddler使用配置可參考：https://www.cnblogs.com/shoshana-kong/p/14161898.html），有配置過的直接運行fiddler就可以了，如果大家有其他好用的代理服務可以在留言區評論一下

步驟二，配置手機上的網絡代理，點擊存儲

步驟三，修改電腦上的host文件，在文件最后一行插入IP + 域名， IP是電腦的IP地址，域名是需要調試的demo上配置的webview頁面域名

• 電腦的host文件地址一般是在 C:\Windows\System32\drivers\etc\ 這個目錄
• 修改后保存不了的話可以把文件拷貝到其他目錄再修改，修改成功之后在把文件覆蓋回去

步驟四，修改本地項目開發服務端口，改為80端口，并啟動本地開發服務，下面vue項目為例

步驟五，安裝并打開需要調試的demo，打開要調試的頁面，然后修改開發服務的頁面內容保存，手機上的頁面就自動刷新啦

修改前

修改后

注意事項

• 訪問的時候如果提示 Invalid Host header，需要在vue.config.js 的devServer里面加入 disableHostCheck: true，修改vue.config.js之后需要重啟項目
  

總結： 這個方法是我在使用抓包工具的時候偶然發現的，安卓系統和IOS系統都可以，如果不需要抓包的話，應該可以用其他方法設置http代理服務來取代fiddler，大家可以嘗試一下，可以的話在評論區告訴我一聲~

抓包工具大家可以自己搜索下載，我這里就不放鏈接了。

總結

以上是生活随笔為你收集整理的安卓IOS客户端调试webview页面的方法的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。