I'm working on an Ionic/Cordova cross-platform application and I'm struggling a little bit with the debugging.
Debug can of course be done directly from the browser by running ionic serve and then using the browser developer tools, but some behaviors happen only on real devices.
Adding a detailed guide to do this..
Make sure your android device has Developer mode on, and USB debugging is enabled in the developer settings on your device. You can google to activate this.
Device connected via USB, both system and mobile device connected to same wifi network..Use command
ionic cordova run android -l --external
After app has installed and started up on device, open this link in your chrome browser
chrome://inspect/#devices
If all was done correctly, you will see your device name and app name there with an option to inspect. This will open the chrome developer console exactly similar to the web one.
Now you can debug the app right on the device. Add breakpoints, edit html and see the logs as well.
Reference
Yes, you can use Chrome and Safari DevTools to connect to your device and debug the HTML/JS/CSS, as long as you don't build a release version (cordova build android ---release). It does take some initial setup since it's disabled by default.
Or you can use Android Studio or XCode to debug the plugins etc.
Note that you can only debug iOS apps with a Mac (or using Google's iOS WebKit Debug Proxy). Android apps can be debugged from any OS with Chrome (for HTML/JS/CSS) or Android Studio installed.
Official Cordova debugging guide
A simple way could be using logcat, take a look to this answer Debugging a WebView (Ionic) app on Android via logcat.
I'm developing a website that I will soon port to Android, Windows 10, and iOS. I'm using an HTML/CSS/Javascript combo and I started the project in Visual Studio 2015 as a new website.
I am able to test the site using all of my installed browsers and Windows Phone 8.1 (the Windows 10 emulators open but won't debug for some reason). I would like to be able to test my site on an Android emulator while in Visual Studio. I can launch a number of Android emulators outside of Visual Studio just fine by launching "Visual Studio Emulator for Android" through the Start menu, but I cannot figure out how to use these for debugging. There is no Android emulator option in the "Browse with" menu and I don't exactly know how to add one.
I know the emulators are probably more for developing actual Android applications but if this is possible I would like to do it to test for mobile browser quirks. Thanks!!
Your best bet for debugging hybrid apps (And especifically those on mobile devices) is to use a tool like VorlonJS. Here's a video + walkthrough on how to use it.
What is it?
The fine folks on the TED team at Microsoft introduced VorlonJS during //BUILD last week. Vorlon is an open source, extensible, platform-agnostic tool for remotely debugging and testing your JavaScript. Powered by node.js and socket.io.
I put together a brief video tutorial on how to set up Vorlon and have it debug not only web applications running in desktop browsers, but also mobile ones. In this particular case, I cover Firefox and Chrome on the desktop, and IE 11 on a Windows Phone simulator.
To get started, you simply install run Vorlon from the Node Package Manager (NPM) with the following command:
npm i -g vorlon
Then call Vorlon from NPM to spin up an express server and you are ready to debug!
Vorlon
Add the following JavaScipt to any web app you want to debug, and Vorlon will communicate with it through the Vorlon express server you started in the previous step.
<script src="http://localhost:1337/vorlon.js"></script>
In my browser, I navigate to http://localhost:1337/ and I can see Vorlon running, and in a second tab, I nagivate to the address of the application I am running from local host and see that the two are connected!
As documented about Android Emulator networking, 10.0.2.2 is the address which allows the emulator to connect to your local development machine.
You probably need to type 10.0.2.2:64833 in the browser on your emulator.
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
We don’t allow questions seeking recommendations for books, tools, software libraries, and more. You can edit the question so it can be answered with facts and citations.
Closed 5 years ago.
Improve this 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?
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.
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 ;)
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).
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
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/
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.
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.
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.
Just want to add that you can debug android apps using Genymotion. It's WAY faster then the stock android emulator.
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
On Android 4.4+ w/SDK installed:
adb logcat chromium:D SystemWebViewClient:D \*:S
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"
<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">
Then add the following
<gap:config-file platform="android" parent="/manifest">
<application android:debuggable="true" />
</gap:config-file>
It works for me on Nexus 5, Phonegap 3.7.0.
<preference name="phonegap-version" value="3.7.0" />
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/
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?
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.
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.
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/
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
I've loved weinre! How to use it:
First, put on your index.html (ensure app.settings.debugUrl is set before this):
<!-- 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>
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/
Devices with android <=4.0.4 need to add the plugin https://www.npmjs.com/package/cordova-plugin-crosswalk-webview-pgb-adapt
Following the Chrome Remote Debugging on Android documentation, I am eventually redirected to a web app hosted on AppSpot.com. My organization has strict PII requirements and using an external app like this is a risk for us.
Where can I find the source of the Dev Tools to deploy internally?
I have looked for the dev tools in Blink repo (https://chromium.googlesource.com/chromium/blink.git) and a recent Chromium tarball using find . -iname devtools.css and didn't find anything.
I have looked at the network inspector while debugging, and I do not believe the AppSpot app could receive PII currently, but my organization will not take the risk that this may change in the future.
I understand maintaining an internal deploy for all the different Chrome versions will be annoying.
Use Chrome Canary instead, it has better, more integrated Mobile debugging support.
Plug in your Android device, run adb devices from the command line and then in Chrome Canary visit chrome://inspect. Your device should be listed there, and then you can debug the pages on the device with the DevTools that come with Chrome and not on the appspot domain.
You can specify your own location of the DevTools front-end using --remote-debugging-frontend command line flag. The url may be from your local network. You will need to host the front-end files somewhere though. There is some documentation on the flag: https://developers.google.com/chrome-developer-tools/docs/contributing
I need to inspect javascript execution (webview widget) in an android application,
while debugging; through SDK & usb cable and/or http/websockets;
from destop computer (e.g. chrome running on desktop).
Webkit's sources includes DebuggerServer implementation
( platform_external_webkit\Source\WebKit\android\wds\DebugServer.cpp )
accessible at cpp level, and bound if flag WDS is enabled (at build time?)
Source\WebKit\android\jni\WebCoreFrameBridge.cpp:#if ENABLE(WDS)
Source\WebKit\android\jni\WebCoreFrameBridge.cpp: WDS::server()->addFrame(frame);
The default port for server is 9999
The sources show that all is implemented (at Cpp level) to enable the feature,
but I have not found any reference searching the web for experiences
using live debugging at javascript level in adroid devices automating
webkit's inspector interface.
1.- Are the feature present, in binary form, executing in actual android devices?
(has adroid's distribution of webkit been built without WDS flag enabled? :-( )
2.- Can the remote debug feature be enabled/used from javascript or application
(at java level) e.g. at startup of app?
3.- In case it is possible to enable the webkit inspector/debugger feature,
how to make it possible to interact from remote application ? (e.g. from
another javascript app using websockets, or chrome on desktop computers).
Some paragraphs explaining the mechanics like
https://developers.google.com/chrome-developer-tools/docs/remote-debugging#remote
would be nice!
thanks in advance for any information, or references about this topic.
I consider important to enable remote debugging (in the device) at
javascript level to make it possible modern development of HTML5
applications and happy debugging experience.
cheers,
Ale.
For android >= 4.4 (kitkat)
See Remote debugging on Android with Chrome
For android < 4.4 (Lower versions)
Use very good open source tool: weinre. See this video for help to use it.
If you are familiar with grunt then you can use grunt-weinre
For quick view:
install weinre using npm
Do the configuration in your gruntfile.
Run the weinre grunt task.
Use this script to inject the weinre target code into your web page.
Open http://localhost:8082 in your browser and you will find devices running above script. You can debug all this devices.
NOTE: if you want to debug webview/browser in your mobile device then you need to replace localhost with your machine's IP running weinre. And yes, all the devices should be on the same network.
Now it is easy with Android 4.4. See https://developers.google.com/chrome-developer-tools/docs/remote-debugging#debugging-webviews
You can do remote debugging targeting the Android Browser with the weinre project. Or use Chrome remote debugging with the Chrome for Android browser. As far as I know, you can't target a WebView directly, but targeting the Android Browser should get you close.
It cannot be done, because the debugger backend code is not there. The source code you are referencing to is a copy of webkit source in android, but it is not compiled into android release bits.
Pre KitKat jsHyBugger works well ( trial version and annual single user license €29 )
( I have no connection to the developers / have purchased a license )