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

使用Eruda ，这是迄今为止最好的，至少是我尝试过的。

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