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.