1

I'm developing a web based game.

When I run in a desktop browser, I can easily view the logs in the classic web developer console in almost all browsers:

enter image description here

Question

How can I get console.log entries in a mobile browser as developer tools offer in desktop browsers?

Mobile browsers does not offer a easy way to open the Developer Tools

Researches

I found these options, with no success:

  • https://help.duo.com/s/article/4957?language=en_US
    • But I can enable developer tools on my android browsers
  • eruda which I'm reviewing and it seems a browser emulation.
  • Alternative: I was thinking to create a minimalist web portal in which I can send logs using ajax (overriding console.log) from my web. I believe that could be more comfortable to see logs in a web while web is tested in mobile browser

enter image description here

Edited 1

Someone mark this question as duplicate of this question whose answers propose:

  • #1 modify your web to show logs in some visible part
  • #2 open and android studio to view the entire log of android browser

I think #1 could be a solution if is not intrusive and easy to enable in development stage. It could be something like the following image in which log entries does not modify the UI:

enter image description here

JRichardsz
  • 14,356
  • 6
  • 59
  • 94
  • Does this answer your question? [How can I get console.log output from my mobile ON the mobile device?](https://stackoverflow.com/questions/47064232/how-can-i-get-console-log-output-from-my-mobile-on-the-mobile-device) – Nino Filiu Nov 08 '20 at 17:54

2 Answers2

0

This might work?

// 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 );
}
}
R. Salinas
  • 1
  • 2
0

In the end, I created a simple library to see my logs in the same web:

enter image description here

Source code is here: https://github.com/jrichardsz/log4browser

I just need to add this at the top of my web:

<script src="https://cdn.jsdelivr.net/gh/jrichardsz/log4browser@master/log4browser.min.js"></script>

Note: Remove it of your production bundle

JRichardsz
  • 14,356
  • 6
  • 59
  • 94