Android通過Chrome Inspect調試WebView的H5 App出現空白頁面的解決方法（不需要FQ）

来源:http://www.cnblogs.com/slmk/archive/2017/09/28/7591126.html
-Advertisement-
Play Games

調試基於WebView的Hybrid App最舒服的工具當然是Chrome自帶的開發者工具，其中有我們熟悉的Dom樹調試，JS調試，Network監視等等功能。 Google提供的調試Android上WebView的步驟： 問題就出現在這裡，對於國內的程式猿來說，由於無法訪問 https://chr ...


調試基於WebView的Hybrid App最舒服的工具當然是Chrome自帶的開發者工具，其中有我們熟悉的Dom樹調試，JS調試，Network監視等等功能。

Google提供的調試Android上WebView的步驟：

  1. 開啟手機上的USB調試功能
  2. 打開Chrome瀏覽器，地址欄輸入：Chrome://inspect，回車
  3. Chrome會自動檢測手機上打開的App，併列出可調試的WebView頁面，如圖：
  4. 點擊Inspect，彈出開發者工具進行調試

問題就出現在這裡，對於國內的程式猿來說，由於無法訪問 https://chrome-devtools-frontend.appspot.com，只能出現空白頁面：

Chrome為什麼要去訪問那個網址呢？而不是提供本地的解決方案？我猜想是版本問題，對於海量版本，都打包到Chrome安裝程式里，勢必會大大增加安裝包的體積。

例如上面的 @169177 就是其中的一個版本號，當你換一種設備或模擬器，版本號可能就不一樣了。

 解決方法：

  1. 最直接的方法：FQ。我這裡是1個月左右，還需要再次FQ。
  2. 下載離線開發者工具包（需要告訴我你的版本號，如上圖紅色方框里的）

目前支持的版本號(不斷更新中)：

@169177   　 chrome/33.0.0.0
@178678 　　chrome/36.0.1985.135
@180870 　　chrome/37.0.2062.117
@183147 　　chrome/38.0.2125.114

@185626 　　chrome/39.0.2171.93
@186555 　　chrome/39.0.2171.95/99
@188492　　 chrome/40.0.2214.89
@189407 　　chrome/40.0.2214.109
@189455 　　chrome/40.0.2214.120
@193433 　　chrome/42.0.2311.111
@196332 　　chrome/43.0.2357.93
@199588 　　chrome/44.0.2403.133
@200258 　　chrome/44.0.2403.117/119
@202161 　　chrome/45.0.2454.94
@56034b7e9233e7f8b0890dcd45094695a41082aa 　　 chrome/46.0.2490.76
@9c8ad225d4242d37d93a157e084f9532ada53365 　　 chrome/47.0.2526.83
@10b809a56f75356820ad54f308f183b0a76abecc 　　 chrome/48.0.2564.95
@eb37b99908e3a6290792690b6eb4e4de2da8f374 　　 chrome/49.0.2623.105
@78c36d241d8eebad599e33e13fe50f05393635ab 　　 chrome/50.0.2661.89
@211d45a5b74b06d12bb016f3c4d54095faf2646f 　　 chrome/51.0.2704.81
@f6f109cac2aba90ba6f01d89bd216f6b614357f5 　　 chrome/51.0.2704.91
@799386cbf7c1cbf70c12c0e593b2b2e23e39ba30 　　 chrome/52.0.2743.98
@7f5781e9210f9b7c8914adbc018590eec1ede150 　　 chrome/53.0.2785.124
@e5934e0f324e72f35dac7868c9b554a4295b2ceb 　　 chrome/54.0.2840.68
@29f276b1ed3d8a76a0a1ae59734cca523f0c29c7 　　 chrome/55.0.2883.84
@0e9a9a6f3676ae439b78cd9b3f62b4193c3ac7d5 　　 chrome/56.0.2924.87
@a000f5daeaac3f79102a0c8f6eaab57aa0e00ae9 　　 chrome/57.0.2987.108
@e76cc6b93d194dac46a61d88327a96a0d5cf9894 　　 chrome/58.0.3029.83
@b0dab3af93f242c5e6e3a71a7319d060dc42a7c2 　　 chrome/59.0.3071.92
@2375e691ad5e90a85748ddfc132e670208c9b07d 　　 chrome/60.0.3112.97
@6f76561d02fabc51d3afba83eefdd69e309a8b8c 　　 chrome/61.0.3163.81

 


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 內置對象
    1 Global 對象 1.1 encodeURIComponent（）方法 1.2 eval()方法 只接收一個參數，為要執行的 JavaScipt 語句 2 Math 對象 Math.E // 自然對數的底數 e 的值 Math.LN10 // 10 的自然對數 Math.LN2 // 2 的自 ...
  • es6 語法 （解構賦值）
    1.結構賦值 { let a,b,c; [a,b] = [1,2]; console.log(a,b); //1,2} { let a,b,rest; [a,b,...rest] = [1,2,3,4,5,6]; console.log(a,b,rest); //3,[4,5,6]} 2.對象結構賦 ...
  • 引用類型 ( 對象定義 )——Date 類型
    1 創建日期對象 2 可以給日期對象傳值 2.1 Date.parse() 3 Date.UTC() 表示 2016 年 5 月 5 日 下午 5 點 56 分 48 秒， 至少需兩個參數 4 獲取當前時間 若瀏覽器版本較低，可使用 + 操作符將該對象轉換為字元串 ...
  • 在HBulider中如何快速的生成有序(ol)和無序(ul)列表
    首先你需要創建一個HTML文件，然後在body裡面寫入你要創建的類型（有序或者無序），然後列表的個數個人來定： 格式如下： ul > li * 5 代表我要創建一個列表為5個的無序類型 然後按Tab鍵就可以快速生成你要創建的列表，如果要創建幾個只需要後面乘以幾個就行 同理創建有序類型也是同樣的寫法： ...
  • Html（小試牛刀）
    結構代碼： <html> <head></head> <title></title> <body> 頁面主體內容 HTML超文本語言以標簽為主編寫前端頁面。 </body> </html> ...
  • Chrome 插件——二維碼生成筆記
    原來用了幾個生成二維碼的插件，總是遇見各種問題……最後索性自己弄一個，這裡順便記錄一下。 Chrome 插件很開放！！！你只要拿到了ocx文件，然後把文件的尾碼名改為zip，就可以解壓了，最後一切的一切…… 此次學習參考：http://open.chrome.360.cn/extension_dev ...
  • IntersectionObserver實現圖片懶載入
    API： https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API 直接上源碼： 運行代碼後發現，當滾動滾動軸時，只有當<li>區域完全顯示出來後才會觸發相應的下載圖片的http請求。 相容瀏覽器： desk ...
  • [js高手之路] html5 canvas系列教程 - 線形漸變,徑向漸變與陰影設置
    接著上文[js高手之路] html5 canvas系列教程 - 像素操作(反色,黑白,亮度,復古,蒙版,透明)繼續. 一、線形漸變 線形漸變指的是一條直線上發生的漸變。 用法： var linear = cxt.createLinearGradient( x1, y1, x2, y2 ); line ...
一周排行
    -Advertisement-
    Play Games
  • C# + WPF 音頻播放器 界面優雅，體驗良好
    前言 本文介紹一款使用 C# 與 WPF 開發的音頻播放器，其界面簡潔大方，操作體驗流暢。該播放器支持多種音頻格式（如 MP4、WMA、OGG、FLAC 等），並具備標記、實時歌詞顯示等功能。 另外，還支持換膚及多語言（中英文）切換。核心音頻處理採用 FFmpeg 組件，獲得了廣泛認可，目前 Git ...
  • OAuth2.0授權-gitee授權碼模式
    OAuth2.0授權驗證-gitee授權碼模式 本文主要介紹如何筆者自己是如何使用gitee提供的OAuth2.0協議完成授權驗證並登錄到自己的系統，完整模式如圖 1、創建應用 打開gitee個人中心->第三方應用->創建應用 創建應用後在我的應用界面，查看已創建應用的Client ID和Clien ...
  • FastReport.OpenSource .Net下開源免費報表列印組件
    解決了這個問題：《winForm下，fastReport.net 從.net framework 升級到.net5遇到的錯誤“Operation is not supported on this platform.”》 本文內容轉載自：https://www.fcnsoft.com/Home/Sho ...
  • 如何在 ASP.NET Core Web API 方法執行前後 “偷偷“ 作一些 “壞“ 事？初識 ActionFilterAttribute
    國內文章 WPF 從裸 Win 32 的 WM_Pointer 消息獲取觸摸點繪製筆跡 https://www.cnblogs.com/lindexi/p/18390983 本文將告訴大家如何在 WPF 裡面，接收裸 Win 32 的 WM_Pointer 消息，從消息裡面獲取觸摸點信息，使用觸摸點 ...
  • 在 ASP.NET Core Web API 中使用異常篩選器捕獲和統一處理異常
    前言 給大家推薦一個專為新零售快消行業打造了一套高效的進銷存管理系統。 系統不僅具備強大的庫存管理功能，還集成了高性能的輕量級 POS 解決方案，確保頁面載入速度極快，提供良好的用戶體驗。 項目介紹 Dorisoy.POS 是一款基於 .NET 7 和 Angular 4 開發的新零售快消進銷存管理 ...
  • AbpHelper CLI積累與實戰分享
    ABP CLI常用的代碼分享 一、確保環境配置正確 安裝.NET CLI： ABP CLI是基於.NET Core或.NET 5/6/7等更高版本構建的，因此首先需要在你的開發環境中安裝.NET CLI。這可以通過訪問Microsoft官網下載並安裝相應版本的.NET SDK來實現。 安裝ABP ...
  • 記一次HttpClient使用問題分析
    問題 問題是這樣的：第三方的webapi，需要先調用登陸介面獲取Cookie，訪問其它介面時攜帶Cookie信息。 但使用HttpClient類調用登陸介面，返回的Headers中沒有找到Cookie信息。 分析 首先，使用Postman測試該登陸介面，正常返回Cookie信息，說明是HttpCli ...
  • .NET周刊【9月第3期 2024-09-15】
    國內文章 關於.NET在中國為什麼工資低的分析 https://www.cnblogs.com/thinkingmore/p/18406244 .NET在中國開發者的薪資偏低，主要因市場需求、技術棧選擇和企業文化等因素所致。歷史上，.NET曾因微軟的閉源策略發展受限，儘管後來推出了跨平臺的.NET ...
  • 我的網站集成ElasticSearch初體驗
    在WPF開發應用中，動畫不僅可以引起用戶的註意與興趣，而且還使軟體更加便於使用。前面幾篇文章講解了畫筆（Brush），形狀（Shape），幾何圖形（Geometry），變換（Transform）等相關內容，今天繼續講解動畫相關內容和知識點，僅供學習分享使用，如有不足之處，還請指正。 ...
  • 第23篇 委托的概述
    什麼是委托？ 委托可以說是把一個方法代入另一個方法執行，相當於指向函數的指針；事件就相當於保存委托的數組； 1.實例化委托的方式： 方式1：通過new創建實例： public delegate void ShowDelegate(); 或者 public delegate string ShowDe ...
所有分類