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
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類