I'm trying to get a Cordova (= webview) app showing in the Chrome inspector remote devices, but it's not working.
It seems everything is OK with the developer options, since:
The phone is detected by the Chrome tool, but the tool says "No browsers detected" when my app is running on the phone ;
If I launch a browser on my phone, then the tool allows me to inspect it.
My coworker has the exact same phone (OnePlus One) and it works for him (he can inspect when the app is running). The difference is his phone is rooted.
We tried my phone on his PC and his phone on my PC: it didn't work with my phone but it worked with his.
We tried another phone, it didn't work on any PC.
I checked this: Chrome inspect devices not showing device but it doesn't change anything.
I checked this: Chrome Inspect Device not showing android app but since it's a webapp with Cordova, I'm not sure I'm suppose to do something like that, plus it works for my cowoker with the same app so it would be strange if I need to do this but not him.
In order for Chrome to detect in app 'WebView' of your Cordova application, your Cordova application must be of 'debug' version obtained from Cordova build. If your Cordova application is of 'release' version, Chrome will not be able to detect the 'WebView'
For Windows 10 User Just Install the new version of Microsoft Edge and Open edge://inspect/#devices.
I have a contribution :)
Download ADB, put on C:\ drive under adb folder (C:\adb),
open Command Prompt (cmd), do:
cd C:\adb && adb devices
It will enable daemon, and device will be showed in Chrome inspector.
An alternative to download adb is to use adb from Android Studio program folder.
Be happy.
I implemented gulp-angular-templatecache-ionic to my Ionic app, which made my application run significantly faster in my desktop chrome browser, but when I build and deploy (ionic run android) this application to my device (LG Nexus 5x) it is still slow, it looks like nothing has changed, as if the built android version does not use the angular template cache.
I followed this article: http://tombuyse.com/improving-the-performance-of-your-ionic-application/
Any ideas or suggestions how to debug?
Thanks!
In order to debug your WebView app please follow this guide from google
https://developer.chrome.com/devtools/docs/remote-debugging
If your android version is less than 4.4, then you cannot debug through the chrome devtools.
you can instead run an emulator via the adb emulator, you'll need the android sdk and the adb tool.
read more here: https://developer.android.com/studio/run/emulator.html
The default android emulator/simulator is slow, and also need the HAXM accelerator, you can download the Genymotion simulator which is a replacement for the default android emulators, and run faster, also doesn't need to change anything in your hardware configuration
https://www.genymotion.com/
I have Download the Eclipse ADT Bundle and i am able to Launch the Eclipse and Can see the Option to develop Android Application.Now as I want to Develop PhoneGap Application so have Downloaded that too.Now through the Command Promt i have created a phonegap application Directory successfully.After this i Opened this PhoneGap application Directory folder into the Eclipse .Till here everything is fine . As this is Hello World Application it is working fine in the emulator and I can see the output but as it is very slow and as i do not have any mobile device to connect to the IDE and test the application i googled out and got to know about the Chrome Ripple Which i have installed as Extension in my Chrome Browser.Chrome Ripple is a debugging tool in which we can see the output very fast on the browser itself, no need of any Emulator or Physical Device .
But the problem is that we need to have a localhost server installed into the Eclipse IDE to run the PhoneGap HTML5 pages into a localhost server and then test it on Ripple but i am not seeing any way to add Any server in this eclipse version ..
Please help me how can i add any localhost server into this Eclipse ADT Bundle to test PhoneGap application..
Thanks..
If you have KitKat 4.4+ it is a lot easier to use chrome for debug.
Type un chrome:
chrome://inspect
You can connect to you mobile and inspect html structure and debug without any server.
Other way is to add browser platform in Cordova that is available from last version (4.0). It is intended for debug into browser similar way as ripple mocking all plugins.
I am new to PhoneGap development and had just picked with the most basic approaches of it.
How can we debug an application developed using PhoneGap. Debugging the application built on phonegap over the browser is easy as we can see the browser console. But things change a lot when the same application is build using phonegap and packaged in the APK file.
I tried some Android Command Line emulator apps, but was not successful to see the logs.
While developing the android application I had used log.v and in phonegap I am using console.log.
How can I see the logs I am making in the application. Is there any way to get the logs for the application built by Phonegap.?
Debugging phonegap is nothing but debugging JS. we had a tough time doing so. but Weinre was very helpful for our (partially) purpose. just install weinre and have the code injected to your device index.html. now you can get what is happening through the device console in the webinspector. hope this helps you...
If you are starting with phonegap you should read this link:
http://cordova.apache.org/docs/en/3.5.0/guide_next_index.md.html#Next%20Steps
It include a lot of useful information about phonegap programming, debugging, etc.
Debugging
Debugging Cordova requires some setup. Unlike a desktop application,
you can't simply open dev tools on your mobile device and start
debugging, luckily there are some great alternatives. Safari Remote
Debugging
The first option is Safari Remote Debugging. This works only on OSX
and only with iOS 6 (and higher). It uses Safari to connect to your
device (or the simulator) and will connect the browser's dev tools to
the Cordova application. You get what you expect from dev tools - DOM
inspection/manipulation, a JavaScript debugger, network inspection,
the console, and more. For more details, see this excellent blog post:
http://moduscreate.com/enable-remote-web-inspector-in-ios-6/
Chrome Remote Debugging
Virtually the same as the Safari version, this works with Android only
but can be used from any desktop operating system. It requires a
minimum of Android 4.4 (KitKat), minimum API level of 19, and Chrome
30+ (on the desktop). Once connected, you get the same Chrome Dev
Tools experience for your mobile applications as you do with your
desktop applications. Even better, the Chrome Dev Tools have a mirror
option that shows your app running on the mobile device. This is more
than just a view - you can scroll and click from dev tools and it
updates on the mobile device. More details on Chrome Remote Debugging
may be found here:
https://developers.google.com/chrome/mobile/docs/debugging
It is possible to use Chrome Dev Tools to inspect iOS apps, through a
WebKit proxy: https://github.com/google/ios-webkit-debug-proxy/
Ripple
Ripple is a desktop based emulator for Cordova projects. Essentially
it lets you run a Cordova application in your desktop application and
fake various Cordova features. For example, it lets you simulate the
accelerometer to test shake events. It fakes the camera API by letting
you select a picture from your hard drive. Ripple lets you focus more
on your custom code rather than worrying about Cordova plugins. You
can find out more about Ripple here:
http://ripple.incubator.apache.org/
Weinre
Weinre creates a local server that can host a remote debug client for
your Cordova applications. After you've installed and started it up,
you copy a line of code into your Cordova application and then restart
it. You can then open a dev tool panel on your desktop to work with
the application. Weinre is not quite as fancy as Chrome and Safari
Remote debugging but has the benefit of working with a much greater
range of operating systems and platforms. More information may be
found here: http://people.apache.org/~pmuellr/weinre/docs/latest/
Other Options
BlackBerry 10 supports debugging as well: Documentation
You can debug using Firefox App Manager as well, see this blog post and this MDN article.
For more examples and explanation of the above debugging tips, see:
http://developer.telerik.com/featured/a-concise-guide-to-remote-debugging-on-ios-android-and-windows-phone/
In Android you can debug your app in eclipse logcat where all javascript and other errors will be shown in console.
But for ios you need to install phonegap console plugin to see errors. install below plugin from url.
https://github.com/apache/cordova-plugin-console
Hope this helps..
Thanks
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