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

Asked 12/5, 2011 at 16:32 Answered 4/10, 2015 at 8:28

Solved javascript android html mobile android-browser

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.

Printer answered 12/5, 2011 at 16:32 Comment(4)

Possible dupe of #469493 – Scutari 12/5, 2011 at 16:36

possible duplicate of Debugging javascript on Android tablets/phones? – Inflict 12/5, 2011 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. github.com/erspark2002/mobile-web-console-logger Outputs all console logs and page errors to a div at the bottom of the page. – Unctuous 29/8, 2016 at 0:44

Nothing is better than https://github.com/liriliri/eruda . Eruda has most of the functions of chrome console toolset. – Dermott 3/7, 2017 at 6:55

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.

Converge answered 13/5, 2011 at 0:53 Comment(5)

Slick! Seems a little buggy, but definitely a worthwhile tool. Thanks! – Derosier 4/5, 2012 at 18:33

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. – Promotive 14/2, 2013 at 10:38

Weinre is incredible. – Deeprooted 11/7, 2013 at 11:51

typing about:debug on the address bar as suggested by NSJonas worked fine for me in Android, no need for weinre – Artwork 15/7, 2013 at 23:4

The PhoneGap hosted instance doesn't seem to work anymore. – Nakashima 18/9, 2013 at 9:20

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/

Peary answered 30/5, 2012 at 12:48 Comment(6)

Great, this tool makes debugging mobile devices a breeze – Modulus 8/7, 2012 at 8:6

Nice. Opera also has remote debugging from PC, see dev.opera.com/articles/view/… – Capuchin 24/8, 2012 at 6:12

And what do you do if you have no admin rights, and the usb driver is not installed ? – Heidt 13/9, 2012 at 13:50

@Quandary consider a different employer where they allow you the tools and permissions to do your job. – Medium 16/1, 2013 at 19:12

What's the point of having a tablet if I must also carry the PC? – Gomes 23/4, 2014 at 20:42

@SamuelDanielson +infinity for pointing out the elephant in the room! – Dior 16/8, 2014 at 20:8

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

Horripilate answered 23/4, 2012 at 21:12 Comment(1)

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. – Allegedly 27/11, 2013 at 23:3

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

Bainite answered 29/10, 2012 at 8:24 Comment(0)

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.

Fernandina answered 30/5, 2011 at 15:34 Comment(0)

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.

Muscular answered 5/2, 2015 at 6:55 Comment(0)

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>

Pudding answered 4/10, 2015 at 8:28 Comment(0)

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

Cepeda answered 29/10, 2012 at 8:53 Comment(2)

Looks like you have to pay a monthly subscription to Adbobe Creative Cloud to be able to use Edge Inspect – Culberson 9/8, 2013 at 0:47

@ChrisHalcrow Yup it's sad but it looks like they have to squeeze every penny out of all successful projects :) – Cepeda 9/8, 2013 at 9:31

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.

Culberson answered 23/9, 2015 at 7:24 Comment(1)

This is a great option. I found that 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! – Phocine 4/11, 2015 at 6:27

-1

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

Millstone answered 7/8, 2012 at 8:18 Comment(0)

-1

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

Unific answered 20/11, 2012 at 19:52 Comment(0)

-1

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.

Roderich answered 3/12, 2013 at 20:28 Comment(3)

User is specifically asking about the old, 2.x Android browser, not Chrome. Alas there's a lot of old phones out there. – Neural 10/12, 2013 at 14:0

@Neural so you are saying you cannot remote debug 2.x based Android using Latest Chrome dev tools? – Roderich 12/12, 2013 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. – Neural 13/12, 2013 at 13:50

-1

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

Ailey answered 19/8, 2014 at 12:58 Comment(0)

-1

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.

Disorganization answered 7/11, 2014 at 0:35 Comment(0)

Hot tags

Godot Unity Godot Help Programming Godot 4.X GUI GDScript 3D 2D Physics CSharp Godot 3.X VR XR Projects C++

Recommended topics

Hot tags