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?
3 Answers
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.
-
Thank you, @Marcus! I really appreciate you taking the time to shoot me an answer. It seems my questions tend to be rather esoteric or something. Anyway, really appreciate the post Yes, I just want the basic output you would get from console.log (well, in particular) with the automatic enumeration of objects etc. Did some 'console' hijacking on my own, but couldn't expand objects using the native console. Oddly, yesterday I found a site that did just that, using the browsers console object and redirecting it's output. I'll check this out, and post a link to what I found also. Thanks! Jan 23, 2018 at 10:16
For Android - I found this works:
- Open Android Studio IDE
- Connecting the device in debug mode
- Open logcat
- 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
-
Hmm... Interesting approach. The idea here is to be independent from another device, however; Could this be viewed from the device however, without the additional computer? Preferably from within the browser itself. On a similar note, I have seen a few native Android logcat apps, however have not had much luck with them. I so wish the Chromium guys would just make a native way to do this like you can on a PC. The information is there. We just need to see it. Sometimes you just need to code, even if all you have available is your phone. (or tablet/phablet). Full enumeration. Jul 7, 2018 at 7:51
-
If he could use a computer why would he code on a phone! Probably this is not anyone is gonna look at! Jun 26 at 11:49
javascript:(function()%7Bvar%20a=window.open('about:blank').document;a.write('%3C!DOCTYPE%20html%3E%3Chtml%3E%3Chead%3E%3Ctitle%3ESource%20of%20'+location.href+'%3C/title%3E%3Cmeta%20name=%22viewport%22%20content=%22width=device-width%22%20/%3E%3C/head%3E%3Cbody%3E%3C/body%3E%3C/html%3E');a.close();var%20b=a.body.appendChild(a.createElement('pre'));b.style.overflow='auto';b.style.whiteSpace='pre-wrap';b.appendChild(a.createTextNode(document.documentElement.innerHTML))%7D)();