I am new to phonegap and android development. May I know how can I debug javascript error on the emulator? I have heard about ADB may I know how can I use and install it on windows 7 system? I have an ajax called with jsonp but no response on emulator. However, I can call that ajax with browser on windows. May I know what went wrong?
Update Nov 2016: looks like this doesn't work anymore.
The easiest and one of the most powerful ways is using http://debug.phonegap.com (it uses Weinre in the background, if you care). You just
pick a random string, say r4nd0m,
inject <script src="http://debug.phonegap.com/target/target-script-min.js#r4nd0m"></script> into your index.html
visit http://debug.phonegap.com/client/#r4nd0m and you will instantly be debugging your mobile web app.
Things you can do (similar to Firebug or Web Inspector):
Viewing and changing the DOM
Editing CSS
Console for live debugging and running Javascript remotely.
Other stuff, like: storage, resources, timeline, profile, etc.
You could at least log debug stuff to the adb console by calling console.log() in JavaScript. Maybe that would suffice?
To view log output using adb, navigate to your SDK platform-tools/ directory and execute:
adb logcat
See logcat Command-line Tool
You can now use Chrome dev tools to remotely debug Android Phonegap apps! I wrote up instructions here: Remote debugging Phonegap apps with Chrome Dev Tools
Steps for Android emulator:
Navigate to chrome://inspect/ in Google Chrome on your desktop computer.
Locate Android emulator on Devices tab and click 'inspect' link
See also Get Started with Remote Debugging Android Devices
I'd recommend jsconsole. It lets you inject any JavaScript into the page and provides a basic console. There's a nice tutorial on remote debugging.
Yes, you have log errors with console.log and show the LogCat tab in Eclipse. There, Web Console messages (including JS errors) will show up. It's a little verbose so you have to filter to show just the Web Console tags but it works well. Described here: SHOWING CONSOLE CONSOLE.LOG OUTPUT AND JAVASCRIPT ERRORS WITH PHONEGAP ON ANDROID/ECLIPSE
I've found that this works for debugging javascript errors for Android/Phonegap when testing the app through Eclipse on Windows 7.
Simply go to Window > Show View > Other...
Then select LogCat under the Android folder.
The window/tab that just poped up is where the Android emulator will send its logs and error messages. You can detach this window and place it outside of the Eclipse IDE (I found this useful). You can also control the types of errors you see by selecting any of the 5 colored letters in the top right hand corner of the window.
To hide the useless information so you just see errors, make sure you only have (E) selected. Personally, I also like to have (W) warnings selected as well as (E) errors selected.
Hope that helps!
There is (finally) a tool available to allow proper JavaScript debugging for Android - http://www.jshybugger.org/
Features:
add/remove/enable/disable line breakpoints
watch expressions
step into/over/out
pause on exception
call stack navigation
local variable inspection
remote console
javascript syntax and runtime error reporting
view/edit/delete Local Storage items
view/edit/delete Session Storage items
view/edit/delete WebSQL Database records (watch Video)
view page resources (images, scripts, html)
remote console support enhanced (stacktrace)
Debugger: enhanced object inspection
Debugger: conditional breakpoints
Debugger: continue to here
I solved it easily on two steps.
Change the level of logging
In config.xml add this line
<log level="DEBUG"/>
Run the cordova Log
It's a bat file that you can just run and track all the log messages go to your phonegap project and navigate to \platforms\android\cordova then open log.bat you can now emulate your application using the command line
cordova emulate
and the log will be shown in the cmd which will be pop-uped when you open log.bat
If you are willing to set up NodeJS somewhere you can do some extended debugging with John Boxall's iBug, which although was designed for the iPhone I have tested on Android and it works fine. It's basically firebug lite for mobile devices. I'm pointing to my fork cause Node changed a lot and John's code wouldn't run on a modern nodeJS so I patched it to get it up and running on nodeJS 0.2.3, YMMV on more recent versions of nodeJS.
If you use console.log you can do simple print statements. Aswell as using adb to view them, you can use a log viewer on the device and view the logs there. More info: http://www.technomancy.org/android/javascript-debugging/
The best solution to catch exceptions and show in your console is this code:
window.onerror = function(msg, uri, line) {
console.log(msg + uri + line);
}
In Eclipse you can add an hook to the android emulator back button and inspect a value on the fly. Add the onBackPressed event manager and call the javascript console from there.
From the eclipse debug perspective you will change the value of a String variable to what you want to inspect, and pass it to your app by calling super.loadUrl.
See the code below.
Do not forget to enable the debugging of your application from DDMS view
public class MyActivity extends DroidGap {
private String js = "";
#Override
public void onBackPressed() {
//add a breakpoint to the follow line
//and change the value for "js" variable before continuing execution
super.loadUrl("javascript:console.log(" + js + ")");
return;
}
#Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
super.setBooleanProperty("keepRunning", false);
super.setIntegerProperty("splashscreen", R.drawable.splash);
super.loadUrl("file:///android_asset/www/index.html", 20000);
}
}
If you're using Phonegap Build and would like to debug using the Chrome console, here's a working solution. It's possible to debug WebViews using USB debugging (https://developer.chrome.com/devtools/docs/remote-debugging#debugging-webviews)
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/
Phonegap debug still exists. the one I know of is in phonegap build found in the settings and tick the debug application option. It will then rebuild your app when you save it. A debug button will appear in the application page along with the rebuild options. (this service also uses a built in weinre)
Another option which I also find the fastest is jsconsole.com.
Its very easy to set up and requires almost no configuration compared to other methods of debugging where you need to install lots of things like drivers and SDKs.
NOTE!
In PhoneGap 10 when you build your app and any requests outside the app(as if there is no internet) fails,you will have to add this in your config.xml
<gap:plugin name="com.indigoway.cordova.whitelist.whitelistplugin" version="1.1.1" />
<access origin="*" />
<allow-navigation href="*" />
<allow-intent href="*" />
I was pulling my hair out trying to get any remote debugging tool to work only to find out outside requests were blocked by default. this saved me.
Debugging PhoneGap / Apache Cordova Application is easy with GapDebug
Download & Install GapDebug from https://www.genuitec.com/products/gapdebug/
Run a GapDebug on You PC / Mac
Enable Developer Option & USB Debugging on your android device (Settings -> Developer Option (ON) -> USB Debugging (ON))
If Developer option is not found (Settings -> About Phone -> Click Build Number for 7 times)
You can Debug your application from your GapDebug
Refer
https://www.youtube.com/watch?v=QHTI-utHfEE
https://www.youtube.com/watch?v=AZJUSomFOwk
https://www.youtube.com/watch?v=XEeWFIsgtsU
https://www.youtube.com/watch?v=kiY03MBGkLo
Related
I am working on a small web api project in Visual Studio 2013 Ultimate. Windows 2013. Internet Explorer 9. When I run (debug) from VS using the internal web server (I guess that is IIS Express, now), I am finding that the changes I am making (and saving) to a javascript page are being ignored. Placing a breakpoint in the javascript shows the older code without my changes.
CTRL+F5 does not force the application to use the currently updated page. Checking the page in, then checking it back out often works. Is there some setting or trick that will help me out here?
Clearing the cache history seemed a bit excessive and I don't want to do that all the time.
The following solution worked me in Internet Explorer:
First enable script debugging:
Tools menu -> select Internet Options
On advance tab uncheck "Disable script debugging (Internet Explorer)"
Then make sure you get the newest page:
From the Tools menu choose Internet Options.
On the General tab, under Browsing history, click Settings.
Under "Check for newer versions of stored pages" make sure "Every time I visit the webpage" is selected.
Click the OK button.
If somebody has this problem and ctrl+F5, clearing browser's cache, restarting debugging, changing browser, changing web.config and rebuilding project don't help, then there is one last thing that works (at least for me): restart Visual Studio.
Also changing debugging port on local IIS Express helps but this is far more painful if working in a team or using Azure Active Directory etc.
Only solution that worked for me was changing the javascript file name and updating the bundle configuration to point at the new file. I tried everything else from restarting my pc, deleting bin/obj/cache/etc, CTRL F5, restart IIS, and so on.
If I'm correct you should build (ctrl+shift+b) your project before debugging. This web server runs in the background on a port of choosing whenever you start in debug mode. You can close the task(s) (process bar next to your clock) if you need a new session or press F5 in VS.
You can avoid using the built in web server if you have IIS (Express) or something similar.
Go to RUN and type iis depending on your OS it's already installed. Otherwise try to install it in Control Panel > Programs or Features > Turn windows features on or off
add a website (site name, path, hostname)
add to your host file 127.0.0.1 hostname (c:\windows\system32\drivers\etc\hosts)
To debug your project in Visual Studio:
open your website on your hostname in your favourite browser
click on DEBUG
click on ATTACH TO PROCESS
find w3wp.exe
hit ctrl+f5 in your browser to start debugging server code
Depending on how your solution/project is setup, you can publish your project files directly to IIS if you choose to publish to File System. Right mouse click on your project and choose publish. Set it up from there.
If your Visual Studio is up-to-date you can publish single files with alt+$+p.
Hope it helps.
Locate the code section where the JavaScript file is loaded to the page and add a parameter string to the end for testing. For example:
Change src="../Resources/js/MyScriptFile.js"
To src="../Resources/js/MyScriptFile.js?v=23"
Every time you update your JavaScript file, you change the version number. This will force the browser to load your new version of JavaScript file. After you finished testing, You can remove the string "?v=23". The bonus, if you leave it there, the end user will not be required to refresh his/her browser cache after you deployed your code to production.
I keep getting this problem very often. Normally what I do is first get into the drive where the OS is installed (In my case C:), and delete all the application.dll and application.pdb (it is stored in Windows\Microsoft.net\Framework\vx.x.xxxxx\Temporary ASP.NET Files). Delete application.dll and application.pdb in the users\xxx. Get into the application directory and again delete application.dll and application.pdb. Clear the browser cache. Restart the system (cold restart). Build the application. Most of time found to be working.
Note: I use DOS prompt for deleting since I'm quite used to it. But the user should have admin privileges. It's not a perfect solution but it works.
What worked for me was
Shutdown Visual Studio 2013 update 2 (I have win 8.1 all 64 bit)
Delete clear out "C:\Windows\Microsoft.NET\Framework64\v4.0.30319\Temporary ASP.NET Files"
Cleaned and Rebuilt solution
Restart IIS Express. If using IIS just re start app and pool.
Run in VS 2013 Debug (F5) it still loads the old file under Script Documents > Windows Internet Explorer > Page_Name.aspx
Then F12 Developer tools clear Browser Cache (IE), I have the same issue in Chrome
F5 in browser reload the page finally loads the changed JS script file with my debugger; entry and breakpoints set
So i had the same problem and i could avoid this by canceling the .ASP.NET-Server
.ASP.NET-Server from Visual Studio for debugging
from Visual Studio and restarting the debugging. Hope this helps someone.
I restarted Visual Studio and rebuilt the project, but the problem persisted for me -- the debugger continued to run an old copy of the .js file. The solution for me was to simply reboot the machine. (When all else fails...)
For reference, I'm currently using Visual Studio 2015.
we are shipping a Cordova WebApp for tablets with minified source using uglify2-compressor via grunt-contrib-requirejs. We generate source-maps for debugging which work flawlessly using the chrome desktop browser via remote Debugging on a KitKat Android Tablet.
Now we like to send error reports from our customers to our server. The Android WebView does not seem to care about our source maps. Therefore we get error message like "line 1, char 1231231" - not very helpful...
The Question is: Is it possible to use source-maps with the Android (and iOS) Webview maybe using a Cordova plugin or do we have to wait for an update (Chrome and Firefox Desktop are able to parse the maps...) and ship un-minifies code so that we are able to get the line number of the occurred error?
From Chromium discuss topic
DevTools downloads source maps using the front-end browser, not the one that runs the inspected page. So file://android... is never going to be accessible. You need to point to the files on your development box instead.
I have seen several posts that talk about remote debugging of javascript code on Android, but they all miss the point of what I am trying to do.
I have a Nexus 7 and I want to use it as a remote development environment when I am away from my desktop. I have created a chrooted debian distribution to run apache and php and git (via ssh). This chrooted environment mounts a subdirectory of the /sdcard directory from outside the chroot environement. Apache document root of a virtual host is pointing at a directory within this. Before leaving the desktop I can git push the latest release to the tablet. When I return git pull can get what I have done back again.
I then (when away from home and NOT connected to any network) can edit the code using an Android editor (using the 920 text editor), but then run the browser to look at what I have developed using localhost the apache virtual host picks this up and displays it.
The application I am developing IS NOT FOR ANDROID - it is ultimately for the desktop. But I want to be able to debug it like I was on the desktop. Breakpoints and single stepping are the prime thing, but also I tend to use the html section in firebug to adjust my CSS before editing it.
Is there a way to get either the chrome developer tools or firebug add on for firefox to load into a browser that will run in android?
I use Firebug lite bookmarklet for iPhone and iPad, never tried on Android, check this out http://martinkool.com/post/13629963755/firebug-on-ipad-and-iphone it must be similar on Android.
To activate it use this steps:
Create a new bookmark or bookmark a page
Rename the bookmark to “Firebug”
Copy the textarea link:
javascript:(function(F,i,r,e,b,u,g,L,I,T,E){if(F.getElementById(b))return;E=F[i+'NS']&&F.documentElement.namespaceURI;E=E?Fi+'NS':Fi;Er;Er;Er;(Fe[0]||Fe[0]).appendChild(E);E=new%20Image;Er;})(document,'createElement','setAttribute','getElementsByTagName','FirebugLite','4','firebug-lite.js','releases/lite/latest/skin/xp/sprite.png','https://getfirebug.com/','#startOpened');
Edit the Firebug bookmarklet, remove the URL and paste the
bookmarklet
Choose “Done” (on the virtual keyboard) and you’re all set
Hitting that bookmarklet should give you a fully functioning Firebug at the bottom of your mobile device.
At least not for Firefox Mobile, because all the devtools are still partially based on XUL, where the Firefox Mobile is using Native UI.
I don't think there is any plan in the close future to change this situation; it's not a common scenario.
However, you should be able to do something using the Debugger API, creating an add-on for Firefox Mobile. But I don't know if it's worthy.
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 6 years ago.
Locked. This question and its answers are locked because the question is off-topic but has historical significance. It is not currently accepting new answers or interactions.
I'm developing a website for mobile. It works on Firefox desktop. It works on iPhone, but when I press a buton on Android 2.x (and maybe lower).
my JavaScript code crashes or what else...
Can I get access to the logger or JavaScript console for those devices?
The better should be a kind of Firebug application.
One option is weinre. It provides DOM & Style editing along with the console. If you don't want to set it up yourself, there is an instance hosted at http://debug.phonegap.com
The other option is JSHybugger. It's certainly the most complete debugging environment available for android browser. It's a paid product, but probably worth it.
Chrome has a very nice feature called 'USB Web debugging' which allows to see the mobile device's debug console on your PC when connected via USB.
See here for more details.
EDIT: Seems that the ADB is not supported on Windows 8, but this link seems to provide a solution:
http://mikemurko.com/general/chrome-remote-debugging-nexus-7-on-windows-8/
You can type about:debug in some of the mobile browsers to pull up a JavaScript console.
I sometimes print debugging output to the browser window. Using jQuery, you could send output messages to a display area on your page:
<div id='display'></div>
$('#display').text('array length: ' + myArray.length);
Or if you want to watch JavaScript variables without adding a display area to your page:
function debug(txt) {
$('body').append("<div style='width:300px;background:orange;padding:3px;font-size:13px'>" + txt + "</div>");
}
I had the same problem, just use console.log(...) (like firebug), and the install a log viewer application, this will allow you to view all the logs for your browser.
We are following the below steps in our project for debugging a website on mobile.
Install mobogenie software on mobile and desktop (both have the same version).
Open your site in mobile Google Chrome browser.
Open Google Chrome on desktop. Go to Option --> More Options --> Inspect Device.
Here you find a list of sites which are open on mobile and click on inspect and you get the JavaScript console which you want.
You can try YConsole a js embedded console. It is lightweight and simple to use.
Catch logs and errors.
Object editor.
How to use :
<script type="text/javascript" src="js/YConsole-compiled.js"></script>
<script type="text/javascript" >YConsole.show();</script>
"USB Web debugging" is one option
"printing it on the screen" another.
But I prefer remote debugging through 'adobe edge inspect' formally known as adobe shadow. It uses weinre internally (=WEb INspect REmote)
You just install it + a small plugin in the browser (Chrome) and a free app you can download in the play-store. Then you have all the tools like the Chrome Development tools.
It has also support for iOS and Kindle Fire
Update
Like Chris noticed, you have to pay a subscription to use edge inspect. A cheap alternative is to use weinre directly, it's the base of edge inspect. Here's an article about how to set it up.
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.
If you don't mind forwarding through a 3rd party server, JSConsole is a rather useful remote debugger for JavaScript.
I have recently written a tool for showing console logs in a movable/resizable "window" (actually a div). It provides similar functionality to Firebug's console but you can see it over your page on a tablet. Tablet/Smartphone/Phablet Debug Console
I also looked for a simple console replacement, just to dump text. So what I did was this function:
function remoteLog (arg) {
var file = '/files/remoteLog.php';
$.post(file, {text: arg});
}
The remote PHP file recorded all the output to a database in arg. It took me 5 minutes (OK, on the server side I used a simple logging library that records and displays text messages, but still...).
On 2013-12-03 Google launched Chrome DevTools for Mobile, which lets developers remote debug mobile web applications via emulation and screen-casting with Zero Configuration.
For all features, checkout Paul Irish's talk on YouTube.
Try js-mobile-console
MobileConsole can be embedded within any page for debugging. It will catch errors and behave exactly as the native JavaScript console in the browser. It also outputs all the logs you've written via an API of window.console.
I'm developing a JavaScript application that needs to run on the Google Android Phone OS. Is there a way to enable the JavaScript Error/Debug console within Safari on either the Android Emulator or an actual device? If so any instructions on how to do so would be appreciated.
It looks like, with the Android 2.0.1 SDK you'll need to filter on "browser" instead of "WebCore"
A quick Google turns up this blog post (posted after you asked your question), that should at least let you see any Javascript errors via the Android Debug Bridge using the command:
adb logcat WebCore:V *:S
Not quite the same as a full debug console though.
On Android write about:debug on the address line when the current page is the page you want to debug. you will get access to the console.
I know your question is about Safari, but you might want to look into using Chrome instead. You can now use Chrome's desktop developer tools to debug and profile apps on your Android device.
Here's how:
On Android Chrome, go to settings -> Developer tools and check "Enable USB Web debugging"
On the desktop, run adb forward tcp:9222 localabstract:chrome_devtools_remote
Now on Desktop Chrome, navigate to localhost:9222.
You should see a list of the pages you have open on your phone. Click the one you want to debug/profile.
Detailed instructions are here
I have discovered that you can get this debugging information on the phone itself, without needingn to use adb or plug it into a computer, just download a log viewer.
Check the link for more info.
You can view the log and much more with weinre
From the Weinre docs
weinre is a debugger for web pages, like FireBug (for FireFox) and Web Inspector (for WebKit-based browsers), except it's designed to work remotely, and in particular, to allow you debug web pages on a mobile device such as a phone.