android debug 有沒有真正的解決方案來調試cordova應用程序




ionic cordova build android (16)

在Android 4.4+ w / SDK上安裝:

adb logcat chromium:D SystemWebViewClient:D \*:S

我花了兩天時間試圖弄清楚如何調試使用Cordova 3.2創建的HTML5應用程序,並將其部署到Android 2.3設備。 我見過的所有文章/帖子都提供了黑客而非真正的解決方案:(大多數情況下,它們都不適用於我的案例;在我的應用程序中調試CSS樣式和Angularjs代碼..

到目前為止我測試了;

debug.phonegap.com

我將腳本注入到index.html文件中,然後在debug.phonegap.com中訪問生成的URL,但沒有任何反應; 只有一個空白頁面。

Weinre

我發現的大部分文章都指向過時的Github存儲庫,它存放一個Jar文件..但它沒有找到:(

邊檢查

它的工作原理和顯示我在移動電腦上瀏覽的網頁。但問題是它使用了一些其他集成的瀏覽器(或模擬器),而不是運行phonegap應用程序的瀏覽器(或模擬器)。 所以結果不准確。

Chrome模擬器

與Edge檢查相同; 它不允許查看隨Android 2.3附帶的真實web-kit v530。

夢想的解決方案

完美的解決方案將是Google Chrome(桌面)的擴展,使您可以將桌面瀏覽器切換到Android 2.3平台上的同一個瀏覽器; 沒有仿真沒有黑客,只有瀏覽器本身與web-kit v 530。

不幸的是,這樣的解決方案不存在:(或者我錯了?

有什麼建議麼?


使用Android設備監視器

Android設備監視器帶有android sdk的包,您可能以前安裝過這些包。 在設備監視器中,您可以看到整個設備日誌,異常情況,所有消息。 這對調試應用程序崩潰或任何其他此類問題很有用。 要運行此操作,請轉到您的android sdk“/ var / android-sdk-linux / tools”中的工具/文件夾。 然後運行以下

chmod +x monitor
./monitor

如果您在Windows上,請直接打開monitor.exe文件。 在“LogCat”下面有一個標籤,您將在其中看到所有與設備相關的信息。 你會在這裡看到所有的消息,包括Android設備例外,這是不可見的鉻檢查設備。 請務必使用logcat選項卡中的“+”號創建過濾器,以便您只能看到適用於您的應用程序的消息。

資料來源: http://excellencenodejsblog.com/phonegap-debugging-your-android-application/ : http://excellencenodejsblog.com/phonegap-debugging-your-android-application/


如果您的應用程序正在運行Cordova 3.3+並且您的設備運行的是Android 4.4+,那麼您可以使用Chrome遠程Webview調試來調試您的Cordova應用程序。

要做到這一點,您必須首先在手機上啟用USB調試。

然後打開“檢查設備”選項卡。 在Chrome中,轉至設置 > 更多工具 > 檢查設備

如果在設備連接到計算機時啟動應用程序,則Webview應顯示在設備列表中。 點擊你的Webview的“Inspect”鏈接,你的Webview會出現一個調試工具。

這裡有一篇文章完全解釋瞭如何去做: http : //geeklearning.io/apache-cordova-and-remote-debugging-on-android/


我愛過我們! 如何使用它:

首先,把你的index.html (確保app.settings.debugUrl在此之前設置):

  <!-- Weinre debugging -->
  <script type="text/javascript">
    if (app.settings.debugUrl) {
      document.addEventListener("DOMContentLoaded", function(event) { 
        var s = document.createElement("script")
        s.setAttribute("src", app.settings.debugUrl+"/target/target-script-min.js#anonymous")
        document.getElementsByTagName("body")[0].appendChild(s)
      }); 
    }   
  </script>

然後:

基於http://www.broken-links.com/2013/06/28/remote-debugging-with-weinre/


只是想補充一點,你可以使用Genymotion調試android應用程序。 這是更快的方式,然後股票的Android模擬器。


如果您使用的是Cordova 3.3或更高版本,並且您的設備運行的Android 4.4或更高版本 ,則可以使用'使用Chrome瀏覽器在Android上進行遠程調試'。 完整的說明在這裡:

https://developer.chrome.com/devtools/docs/remote-debugging

綜上所述:

  • 使用USB電纜將設備插入台式電腦
  • 在您的設備上啟用USB調試(在我的設備上,這在設置>更多>開發人員選項> USB調試下)

或者 ,如果您使用的是Cordova 3.3+,並且沒有4.4的物理設備,則可以使用使用Android 4.4+的仿真器在台式機上通過仿真器運行應用程序。

  • 在設備或仿真器上運行您的Cordova應用程序
  • 在台式機上的Chrome中,在地址欄中輸入chrome:// inspect /#devices
  • 您的設備/仿真器將與連接到您計算機的任何其他可識別設備一起顯示,並且在您的設備下,將會顯示設備/仿真器上運行的Cordova'WebView'(基本上是您的Cordova應用程序)的詳細信息(科爾多瓦的工作方式是基本上在設備/模擬器上創建一個“瀏覽器”窗口,其中有一個“WebView”,它是運行的HTML / JavaScript應用程序)
  • 點擊列出您的設備/模擬器的“WebView”部分下的“檢查”鏈接。 這提出了Chrome開發人員工具,現在允許您調試您的應用程序。
  • 選擇Chrome開發人員工具的“來源”標籤,查看設備/模擬器上當前運行的Cordova應用的JavaScript。 您可以在JavaScript中添加允許您調試代碼的斷點。
  • 此外,您可以使用“控制台”選項卡查看任何錯誤(將以紅色顯示),或者在控制台的底部,您會看到一個“>”提示。 在這裡你可以輸入你想要檢查當前值的任何變量或對象(例如DOM對象),並且該值將被顯示。

您也可以使用chrome HTML5應用程序進行調試

我創建一個.bat以調試模式打開chrome

cd C:\Program Files (x86)\Google\Chrome\Application
chrome.exe "file:///C:\Users\***.html" --allow-file-access-from-files --disable-web-security

您可以使用英特爾XDK IDE在仿真器或真實設備上進行開發和調試

我還發現了針對cordova的Visual Studio 2015 RC工具非常好,帶有紋波模擬器



如果您使用phonegap build,則可以選擇啟用調試。

對於本地構建,您可以使用npm安裝weinre: https://npmjs.org/package/weinre ://npmjs.org/package/weinre

以及weinre文檔的鏈接: http://people.apache.org/~pmuellr/weinre/docs/latest/ ://people.apache.org/~pmuellr/weinre/docs/latest/

有一個叫做遠程調試的東西,但是我不太了解,你可以看一下Raymond Camden的文章: http://www.raymondcamden.com/index.cfm/2014/1/2/Apache-Cordova-33-and-Remote-Debugging-for-Android : http://www.raymondcamden.com/index.cfm/2014/1/2/Apache-Cordova-33-and-Remote-Debugging-for-Android

Chrome遠程調試的文檔: https://developers.google.com/chrome-developer-tools/docs/remote-debugginghttps://developers.google.com/chrome-developer-tools/docs/remote-debugging (如果我理解正確,您需要一個帶有Chrome作為默認瀏覽器的Android設備)也許離您的夢想最近解?


這是使用Phonegap Build的解決方案。 將以下內容添加到您的config.xml中,以便能夠使用Chrome遠程Webview調試進行檢查。

首先,確保你的widget標籤包含xmlns:android =“http://schemas.android.com/apk/res/android”

<widget 
    xmlns="http://www.w3.org/ns/widgets" 
    xmlns:gap="http://phonegap.com/ns/1.0" 
    xmlns:android="http://schemas.android.com/apk/res/android"
    id="me.app.id" 
    version="1.0.0">

然後添加以下內容

<gap:config-file platform="android" parent="/manifest">
     <application android:debuggable="true" />
</gap:config-file>

它適用於Nexus 5,Phonegap 3.7.0。

<preference name="phonegap-version" value="3.7.0" />

在Phonegap Build中構建應用程序,安裝APK,將手機連接到USB,在手機上啟用USB調試,然後訪問chrome:// inspect。

來源: https://www.genuitec.com/products/gapdebug/learning-center/configuration/ : https://www.genuitec.com/products/gapdebug/learning-center/configuration/


你嘗試過'GapDebug'嗎? 免費。

它似乎集成了Safari Webkit Inspector和Chrome Dev Tools的各個版本,以在OS X和Windows上提供集成的調試體驗。


據我所知,在2.2到4.3的Android平台的Cordova應用程序中進行真正調試的唯一有效工具是jshybuggerWeinre是一名督察,而不是調試者。 JsHybugger使您的代碼可以在Android WebView中進行調試。


使用“Chrome遠程調試”,您可以通過USB電纜從計算機遠程調試安裝在手機上的Cordova Android應用程序 (您也可以遠程點擊Web應用程序,就好像您正在從您的計算機上查看Web應用程序一樣)。 您還可以通過這種方式調試在Stock Android瀏覽器或Android版Chrome瀏覽器中查看的Web應用程序

  1. 在Android設備上啟用開發者模式(進入設置 - >關於手機 - >點擊內部版本號的7倍)。

  2. 通過USB電纜將電腦與手機連接起來。

  3. 在您的計算機上午餐Chrome並導航至chrome:// inspect,然後單擊要調試的遠程設備旁邊的“Inspect”按鈕(在“設備”選項卡下)。 或者右鍵單擊您的計算機上的Chrome瀏覽器 - > Inspect - > Costumize並控制DevTools(3個垂直點 - 開發人員工具的右上角) - >更多工具 - >遠程設備 - >左側設備下,單擊您的通過USB連接到的設備 - >單擊您想要的應用程序的Inspect按鈕。

  4. 然後點擊“控制台”,您就可以用相同的方式調試JavaScript,就像使用Chrome開發人員工具的普通Web應用程序一樣。


注意

這個答案是舊的(2014年1月),自那時起,許多新的調試解決方案都可用。

我終於搞定了! 使用weinre和cordova(沒有Phonegap版本),並為未來的開發者保存麻煩,他們可能面臨同樣的問題,我做了一個YouTube教程 ;)


For Android:

您只需要在Android設備中啟用“USB遠程調試器”並使用USB電纜進行連接即可。 然後在設備中打開您的應用程序。 Chrome會檢測遠程瀏覽器,並且您可以以與在本地使用Chrome時看到的方式相同的方式查看控制台。

在Chrome瀏覽器中使用此鏈接: chrome://inspect/#devices (您必須將其粘貼到導航欄中)。

如果您的應用在設備中崩潰,您只需在瀏覽器中查看控制台的日誌,看看會發生什麼。 您也可以使用與本地瀏覽器相同的方式添加功能,更改變量和覆蓋功能。

閱讀這篇文章 ,了解更多關於採取步驟的信息。

這僅適用於運行Android 4.4+的設備。

對於iOS:

使用Safari for iOS,請按照以下步驟操作:

1.在您的iOS設備上,轉至設置> Safari>高級> Web檢查器以啟用Web Inspector

2.在iOS設備上打開Safari。

3.通過USB連接到您的電腦。

4.在電腦上打開Safari。

5.在Safari的菜單中,轉到開發並查找設備名稱。

6.選擇您要調試的選項卡。





mobile-webkit