Is there a real solution to debug cordova apps

Question

I spent the last two days trying to figure out how to debug an HTML5 app I created using Cordova 3 2 and deployed to an Android 2 3 device  All the articles posts I ve seen provide hacks rather than real solutions    and most of the time  none of them works for my case  debug the css styles and the Angularjs code inside my app    So far I tested   debug phonegap com  I injected the script to the index html file then visited the generated URL in debug phonegap com but nothing happens  only a blank page   Weinre  Most of the articles I found point to obsolete Github repository that countain a Jar file   but it s not found     Edge inspect  It works and shows the webpage I m browsing on the PC inside the mobile   But the problem is that it uses some other integrated browser  or emulator  than the one that runs phonegap apps  so the results are not accurate   Chrome emulator  Same as Edge inspect  it doesn t allow to view real web-kit v530 that is shipped with Android 2 3   The dream solution  The perfect solution would be an extension to Google Chrome  desktop  that enables you to switch the desktop browser to the same one found in Android 2 3 platforms  no emulation no hacks  just the browser itself with web-kit v 530   Unfortunately such solution doesn t exist    or I m wrong   Any suggestions

User · Answer

Have you tried  GapDebug   Its free   It appears to integrate versions of the Safari Webkit Inspector and Chrome Dev Tools to offer an integrated debugging experience on OS X and Windows

User · Answer

If you can use an Android 4 4  device  then you can use Chrome Remote Debugging even on the app s internal WebView  It s a much better debugger than Weinre  but the key is using the recent Android version   Recent Cordova builds automatically enable this kind of debugging as long as it s a debug build  it s turned off in --release builds

User · Answer

If your app is running Cordova 3 3  and your device is running Android 4 4  then you can use Chrome Remote Webview Debugging to debug your Cordova app   To be able to do that  you must first enable USB debugging on you phone    Then open the  inspect devices  tab  In Chrome  go to Settings   More tools   Inspect devices   If you launch your app on your device while it s connected to your computer  The Webview should appear in the devices list  Click on the  Inspect  link of your Webview and a Debug Tool for your Webview should appear   Here is an article fully explaining how to do it  http   geeklearning io apache-cordova-and-remote-debugging-on-android

User · Answer

On Android 4 4  w SDK installed   adb logcat chromium D SystemWebViewClient D    S

User · Answer

You can use Intel XDK IDE to develop and debug on emulator or on real device  I also found Visual Studio 2015 RC tools for cordova very good  with it s ripple emulator

User · Answer

The best for me is to attach the Chrome debugger   To do it  run your app in a emulator or device  using  cordova emulate   then  open Google Chrome and go to chrome   inspect   You ll see a list with running apps  Your app should be there  Click on  inspect    A new window will open with developer tools  There you can click on  console  to check for errors

User · Answer

Another option is Visual Studio  which has prerelease support for debugging Cordova apps      Unified debugging experience  Cross-platform development often   requires a different tool for debugging each device  emulator  or   simulator  Different tools mean different workflows and lost   productivity every time you switch devices  With Visual Studio  you   can use the same world-class debugging tools for all deployment   targets  including Windows  the Android emulator  attached Android   devices  iOS devices and emulators  and the Apache Ripple emulator    Now that Microsoft has released Visual Studio Community edition for free  you can give this a try at no cost  You will need to download both Visual Studio  and Visual Studio Tools for Apache Cordova

User · Answer

I ve loved weinre  How to use it   First  put on your index html  ensure app settings debugUrl is set before this       lt  -- Weinre debugging -- gt     lt script type  text javascript  gt      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                         lt  script gt    Then    install  sudo npm install -g weinre run  weinre --boundHost -all- open on browser  http   localhost 8080 client  anonymous watch targets appear as you open the app   Based on http   www broken-links com 2013 06 28 remote-debugging-with-weinre

User · Answer

If you re using Cordova 3 3 or higher and your device is running Android 4 4 or higher you can use  Remote Debugging on Android with Chrome   Full instructions are here   https   developer chrome com devtools docs remote-debugging  In summary    Plug the device into your desktop computer using a USB cable Enable USB debugging on your device  on my device this is under Settings   More   Developer options   USB debugging    Or  if you re using Cordova 3 3  and don t have a physical device with 4 4  you can use an emulator that uses Android 4 4  to run the application through the emulator  on your desktop computer    Run your Cordova application on the device or emulator In Chrome on your desktop computer  enter chrome   inspect  devices in the address bar Your device emulator will be displayed along with any other recognised devices that are connected to your computer  and under your device there will be details of the Cordova  WebView   basically your Cordova app   which is running on the device emulator  the way Cordova works is that it basically creates a  browser  window on your device emulator  within which there is a  WebView  which is your running HTML JavaScript app  Click the  inspect  link under the  WebView  section where you see your device emulator listed  This brings up the Chrome developer tools that now allow you to debug your application  Select the  sources  tab of the Chrome developer tools to view JavaScript that your Cordova app on the device emulator is currently running  You can add breakpoints in the JavaScript that allow you to debug your code  Also  you can use the  console  tab to view any errors  which will be shown in red   or at the bottom of the console you ll see a     prompt  Here you can type in any variables or objects  e g  DOM objects  that you want to inspect the current value of  and the value will be displayed

User · Answer

As far as I know  the only productive tool for real debugging in Cordova apps for Android platforms from 2 2 to 4 3 is jshybugger  Weinre is an inspector  not a debugger  JsHybugger instruments your code allowing you to debug inside the android WebView

User · Answer

Just want to add that you can debug android apps using Genymotion  It s WAY faster then the stock android emulator

User · Answer

If you use phonegap build  there is an option to enable debug     For local builds  you can install weinre with npm   https   npmjs org package weinre  And the link to the weinre docs   http   people apache org  pmuellr weinre docs latest     And there is something called chrome remote debugging but I don t know much about it  you can have a look at Raymond Camden s article   http   www raymondcamden com index cfm 2014 1 2 Apache-Cordova-33-and-Remote-Debugging-for-Android  Docs for the chrome remote debugging   https   developers google com chrome-developer-tools docs remote-debugging  if I understood correctly you need an android device with chrome as default browser  Maybe the closest to your dream solution

User · Answer

Devices with android  lt  4 0 4 need to add the plugin  https   www npmjs com package cordova-plugin-crosswalk-webview-pgb-adapt

User · Answer

You can debug Cordova Android Applications which are installed on your phone remotely from your computer via the USB cable  you can also remotely click on the web application as if you were viewing the web application from your compueter  with  Chrome Remote Debugging   You can also debug web application viewed in the Stock Android browser or Chrome on Android this way    Enable developer mode on your Android device  go to settings -  about phone -  tap 7x on the build number   Connect your computer with your phone via USB cable  Lunch Chrome on your computer and navigate to chrome   inspect and click the  Inspect  button next to the remote device which you want to debug  under the  Devices  tab   OR right click inside Chrome on your computer -  Inspect -  Costumize and control DevTools  3 vertical dots - top right corner of the developer tools  -  More tools -  Remote Devices -  under Devices on the left side  click on your device to which you are connected via USB -  click on the Inspect button for the application you want  Then click on  Console  and you can debug JavaScript the same way  as you would on a normal web application with Chrome developer tools

User · Answer

Use Android Device Monitor  Android Device Monitor comes packages with android sdk which you would have installed previously  In the device monitor you can see you entire device log  exceptions  messages everything  This is usefully to debug application crashes or any other such problems  To run this  go to tools  folder inside your android sdk     var android-sdk-linux tools     Then run the following  chmod  x monitor   monitor   If you are on windows  directly open the monitor exe file  There is a tab below    LogCat    where you will see all device related message  You will see all messages here including android device exceptions which are not visible chrome inspect device  Be sure to create filters using the         sign in logcat tab  so that you see messages only for your application   Source  http   excellencenodejsblog com phonegap-debugging-your-android-application

User · Answer

FOR ANDROID   You only need to enable    USB remote debugger    within your android device and plug with a USB cable  Then open your application in the device  Chrome will detect the remote browser and you can see the console in the same way than you see it when you use Chrome locally   Use this link  chrome   inspect  devices in Chrome browser  you ll have to paste it into the nav bar    If your app crashes in the device you only need to see the console   s log within your browser and see what happens  You also can add functionality  change variables  and override functions in the same way than we do it with our local browser   Read this article for more information on the steps to take   This will work ONLY with devices running Android 4 4    FOR iOS   Use Safari for iOS  follow these steps   1 In your iOS device go to Settings   Safari   Advanced   Web Inspector to enable Web Inspector  2 Open Safari on your iOS device   3 Connect it to your computer via USB   4 Open Safari on your computer   5 In Safari   s menu  go to Develop and  look for your device   s name   6 Select the tab you want to debug

User · Answer

NOTICE  This answer is old  January 2014  many new debugging solutions are available since then     I finally got it working  using weinre and cordova  no Phonegap build  and to save hassle for future devs  who may face the same problem  I made a YouTube tutorial

User · Answer

You can also debug with chrome your html5 apps  I create a  bat to open chrome in debug mode  cd C  Program Files  x86  Google Chrome Application chrome exe  file    C  Users     html  --allow-file-access-from-files --disable-web-security

User · Answer

Here s the solution using Phonegap Build  Add the following to your config xml to be able to inspect with Chrome Remote Webview Debugging   First  make sure your widget tag contains xmlns android  http   schemas android com apk res android    lt 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  gt    Then add the following   lt gap config-file platform  android  parent   manifest  gt        lt application android debuggable  true    gt   lt  gap config-file gt    It works for me on Nexus 5  Phonegap 3 7 0    lt preference name  phonegap-version  value  3 7 0    gt    Build the app in Phonegap Build  install the APK  connect the phone to the USB  enable USB debugging on you phone then visit chrome   inspect   Source  https   www genuitec com products gapdebug learning-center configuration

[android] Is there a real solution to debug cordova apps

Examples related to android

Examples related to debugging

Examples related to cordova

Examples related to emulation

Examples related to mobile-webkit