Is there a kind of Firebug or JavaScript console debug for Android?

Question

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.

Possible dupe of http://stackoverflow.com/questions/468993/is-there-a-way-to-enable-the-javascript-error-debug-console-for-safari-within-and#487622 — peteorpeter, May 12 '11 at 16:36
possible duplicate of [Debugging javascript on Android tablets/phones?](http://stackoverflow.com/questions/5723272/debugging-javascript-on-android-tablets-phones) — epascarello, May 12 '11 at 16:54
Here's a library called mobile-web-console-logger which allows you to debug javascript on a mobile device over wifi without the need for USB cables or installing drivers. https://github.com/erspark2002/mobile-web-console-logger Outputs all console logs and page errors to a div at the bottom of the page. — user1491819, Aug 29 '16 at 00:44
Nothing is better than [https://github.com/liriliri/eruda](https://github.com/liriliri/eruda) . Eruda has most of the functions of chrome console toolset. — Rango, Jul 03 '17 at 06:55

score 45 · Accepted Answer · edited Apr 15 '14 at 22:26

45

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.

edited Apr 15 '14 at 22:26

Paul Irish

43,185
21
92
125

answered May 13 '11 at 00:53

Paul Beusterien

21,795
5
61
115

1

Slick! Seems a little buggy, but definitely a worthwhile tool. Thanks! – pspahn May 04 '12 at 18:33
1

seems cool, going to take a look – arod Nov 05 '12 at 15:09
I just tried this on a Nexus 4, and the Weinre interface seems to work fine also on the Android version of Chrome. This means that if you go through weinre (either running your own somewhere, or this hosted version), you can both run the web app, and debug it on-device. – bergie Feb 14 '13 at 10:38
1

Weinre is *incredible*. – Régis B. Jul 11 '13 at 11:51
typing about:debug on the address bar as suggested by NSJonas worked fine for me in Android, no need for weinre – dannyxyz22 Jul 15 '13 at 23:04
6

The PhoneGap hosted instance doesn't seem to work anymore. – SBhojani Sep 18 '13 at 09:20
how do i use weinre from a page that has to load over https? – Michael Dec 16 '13 at 23:47

seeg · Answer 2 · 2014-03-07T22:23:05.643

34

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/

edited Mar 07 '14 at 22:23

answered May 30 '12 at 12:48

seeg

1,500
14
9

1

very good tool thank you – Christophe Debove Jun 19 '12 at 14:20
Great, this tool makes debugging mobile devices a breeze – CoalaWeb Jul 08 '12 at 08:06
Nice. Opera also has remote debugging from PC, see http://dev.opera.com/articles/view/remote-debugging-with-opera-dragonfly/ – NoBugs Aug 24 '12 at 06:12
1

And what do you do if you have no admin rights, and the usb driver is not installed ? – Stefan Steiger Sep 13 '12 at 13:50
6

@Quandary consider a different employer where they allow you the tools and permissions to do your job. – xdumaine Jan 16 '13 at 19:12
1

What's the point of having a tablet if I must also carry the PC? – Samuel Danielson Apr 23 '14 at 20:42
@SamuelDanielson +infinity for pointing out the elephant in the room! – Michael Aug 16 '14 at 20:08

score 12 · Answer 3 · edited May 24 '15 at 00:50

12

You can type about:debug in some of the mobile browsers to pull up a JavaScript console.

edited May 24 '15 at 00:50

Peter Mortensen

28,342
21
95
123

answered Apr 23 '12 at 21:12

NSjonas

7,200
5
42
78

You're technically right, but don't expect to be very useful with it. On the stock Android browser (4.0) it does very little other than spit out your console.logs, not even returning the result of your evaluated commands. – Tom McKenzie Nov 27 '13 at 23:03

score 7 · Answer 4 · edited May 24 '15 at 00:55

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>");
}

score 3 · Answer 5 · answered May 30 '11 at 15:34

3

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.

answered May 30 '11 at 15:34

Rory

48,706
67
174
234

score 2 · Answer 6 · edited May 24 '15 at 01:00

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.

VDP · Answer 7 · 2013-08-09T09:34:03.437

1

"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.

edited Aug 09 '13 at 09:34

answered Oct 29 '12 at 08:53

VDP

6,128
4
27
52

Looks like you have to pay a monthly subscription to Adbobe Creative Cloud to be able to use Edge Inspect – Chris Halcrow Aug 09 '13 at 00:47
@ChrisHalcrow Yup it's sad but it looks like they have to squeeze every penny out of all successful projects :) – VDP Aug 09 '13 at 09:31

score 1 · Answer 8 · answered Sep 23 '15 at 07:24

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.

This is a great option. I found that https://xamarin.com/android-player works really well and was designed for debugging and supports the USB protocol. What I did was go into my emulated android's settings and turn on USB as instructed, make sure to set which application you want to debug (in my case, I debugged with the stock browser) Once you have done that, open the stock browser on the emulated android, then hop back over to your Chrome DevTools inspect Devices window. The browser appears in the list with a nice list of tabs to inspect. Pure bliss! — Mike Kormendy, Nov 04 '15 at 06:27

yorg · Answer 9 · 2015-10-05T21:41:28.897

1

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>

edited Oct 05 '15 at 21:41

answered Oct 04 '15 at 08:28

yorg

514
5
7

score 1 · Answer 10 · answered Aug 02 '16 at 02:41

1

I installed console add-on of the firefox (https://addons.mozilla.org/en-US/android/addon/console/) on my firefox browser on android and it worked quite well. Helped me debug my angular2 app.

answered Aug 02 '16 at 02:41

Sacky San

1,062
17
22

score 0 · Answer 11 · edited May 24 '15 at 00:54

0

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...).

edited May 24 '15 at 00:54

Peter Mortensen

28,342
21
95
123

answered Aug 07 '12 at 08:18

Moshe Shaham

13,702
20
65
100

score 0 · Answer 12 · answered Nov 20 '12 at 19:52

0

If you don't mind forwarding through a 3rd party server, JSConsole is a rather useful remote debugger for JavaScript.

answered Nov 20 '12 at 19:52

merv

42,696
7
122
170

score 0 · Answer 13 · edited May 24 '15 at 00:56

0

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.

edited May 24 '15 at 00:56

Peter Mortensen

28,342
21
95
123

answered Dec 03 '13 at 20:28

Farm

3,189
2
27
32

User is specifically asking about the old, 2.x Android browser, not Chrome. Alas there's a lot of old phones out there. – mikemaccana Dec 10 '13 at 14:00
@mikemaccana so you are saying you cannot remote debug 2.x based Android using Latest Chrome dev tools? – Farm Dec 12 '13 at 23:35
That's correct. Chrome dev tools only work with Chrome for Android, not Android Browser. Android Browser does not appear under chrome://inspect/#devices. – mikemaccana Dec 13 '13 at 13:50

score 0 · Answer 14 · answered Aug 19 '14 at 12:58

0

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

answered Aug 19 '14 at 12:58

Gus T Butt

91
1
4

score 0 · Answer 15 · edited May 24 '15 at 00:58

0

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.

edited May 24 '15 at 00:58

Peter Mortensen

28,342
21
95
123

answered Nov 07 '14 at 00:35

stevemao

1,285
12
27

Is there a kind of Firebug or JavaScript console debug for Android?

15 Answers15

Linked