How can I get console.log output from my mobile ON the mobile device?

Question

I do a lot of my dev work from mobile devices. Is there a way to get js access to console.log output from within a mobile browser?

Answer 1

Currently, the best method would be to 'hook into' the native console and display the output as HTML, while still allowing the output to go to the native console.

You could implement your own version very easily....

// Reference to an output container, use 'pre' styling for JSON output
var output = document.createElement('pre');
document.body.appendChild(output);

// Reference to native method(s)
var oldLog = console.log;

console.log = function( ...items ) {

    // Call native method first
    oldLog.apply(this,items);

    // Use JSON to transform objects, all others display normally
    items.forEach( (item,i)=>{
        items[i] = (typeof item === 'object' ? JSON.stringify(item,null,4) : item);
    });
    output.innerHTML += items.join(' ') + '<br />';

};

// You could even allow Javascript input...
function consoleInput( data ) {
    // Print it to console as typed
    console.log( data + '<br />' );
    try {
        console.log( eval( data ) );
    } catch (e) {
        console.log( e.stack );
    }
}

....but rather than reinvent the wheel, there's a couple projects you might be interested in trying.

I'm personally using hnlDesign's mobileConsole and have been very happy with it. It's simple and just what you'd want and expect.

I recently became aware of Eruda but haven't had a chance to test it, other than playing with their demo. It implements a lot more developer tools, but for this reason might also be overkill for a lot of projects. It doesn't feel as lightweight (its file size is definitely much larger, even minified!), and if you want the breadth and intensity of developer tools, it would be better to use remote debugging. Most of us who are wanting a mobile console are just wanting the basics for quick tests and the like.

Answer 2

Use Eruda, by far the best one, at least from the ones I tried.

Answer 3

For Android - I found this works:

1. Open Android Studio IDE
2. Connecting the device in debug mode
3. Open logcat
4. Run the browser UI on android device - to see the console log output

Here's a few console.log() lines from logcat:

[INFO:CONSOLE(18)] "100 - checking FUNC PARAM ... ", source: https://somewhere/util/message_util.js (18)

[INFO:CONSOLE(18)] "101 - > ENTER: AppAuth.onHasAuthFunc", source: https://somewhere/util/message_util.js (18)

Idea to try this approach, thanks to @Marcus's answer , suggesting:

" 'hook into' the native console "

~~~~~~

Also, saw other posts suggesting to type: about:debug

.. into the address bar of device browser. Not sure if that had anything to do with getting the connection to work

Answer 4

Chrome can debug mobile browser. On the Android device, go to Settings > Developer options. (Note: If you do not see Developer options, you may need to enable it by going to About phone and tapping Build number seven times.)

In Developer options, enable USB debugging.

Connect the Android device to your computer via USB.

On your computer, open Chrome and navigate to chrome://inspect.

You will see a list of devices. Find your device and click Inspect next to the WebView you want to debug.

Source: https://developer.chrome.com/docs/devtools/remote-debugging/