6

I do web development with an Android (not rooted) phone and look for a method to show the browser (Chrome or Firefox) console messages. Neither Android Chrome nor Firefox has web inspector/console and I don't found Firefox (working) add-on.

Update: I can't connect my phone to a computer (ADB, Chrome remote tool... are unavailable).

Anybody can hint me a viable solution?

Ek1noX
  • 443
  • 6
  • 11
  • Did you checked this answer - https://stackoverflow.com/a/10816652/1380032 – Rahul Aug 05 '18 at 17:41
  • I have done some mobile development, and I used chrome Dev tools, I just had to plug in my phone to my laptop and use chrome dev tools on my laptop. It should display all errors and console logs and such. You can also edit the HTML and stuff on your computer and see it change on your phone. https://developers.google.com/web/tools/chrome-devtools/ Let me know if that helps – Kieran McWilliams Aug 05 '18 at 17:27
  • Thanks and sorry, I forgot to say I can't connect to a computer... Mobile dev only (question updated)! – Ek1noX Aug 06 '18 at 07:29

2 Answers2

6

Try https://github.com/liriliri/eruda, very good approximation of Dev Tools.

All you need to do is add this snippet on top of the page:

      <script src="//cdn.jsdelivr.net/npm/eruda"></script>
      <script>eruda.init();</script>
Altair7852
  • 1,226
  • 1
  • 14
  • 23
  • At last! A real solution for mobile browser! It needs thorough test but seems to do all what I want. – Ek1noX Feb 10 '20 at 08:10
1

Edit

A practical solution can be found at https://stackoverflow.com/a/60106504/1025638

Original (self) answer

I don't found a "just work" solution to solve my problem so I made a short tool to send the logs and errors from the browser to a backend server.

It uses a Proxy around window.console object and implements the function window.onerror to post the messages to the server.

I structured the code to use it as an expressjs middleware for reusability. It isn't perfect and it may not be compatible with all browsers, but it really helps if there isn't dev tools in a browser.

Anyone can test it through repl.it.

// Use this module as middleware with expressjs compatible server:
//
// In the server:
//   consoleWrapperMiddleware(basePath, app)
//     basePath: URL path to send browser messages
//     app: expressjs application reference
//     return: nothing
//
// In the html page:
//   <script src="basePath" />
//     basePath: URL path to send browser messages

function consoleWrapper(oldConsole, oldOnerror, serverUrl) {
    function _post(log) {
        const req = new XMLHttpRequest()
        req.open('POST', serverUrl, true)
        req.setRequestHeader('Content-Type', 'application/json')
        req.send(JSON.stringify(log))
    }

    const console = new Proxy(oldConsole, {
        get: (target, propKey, receiver) => {
            const origMethod = target[propKey]
            return function (...args) {
        if (origMethod === undefined) { 
          const message = 'unknown console method: '+propKey
                _post({ level: 'wrap', message: [message]})
          return message
        }
        else {
                  let result = origMethod.apply(this, args)
                  _post({ level: origMethod.name, message: args })
                  return result
        }
            }
        }
    })

  const onerror = function(msg, url, line, col) {
    if (typeof oldOnerror === 'function')
      oldOnerror(arguments)
    const content = [ msg, url+':'+line+':'+col ]
    _post({ level: 'js-err', message: content })
  }

  return [ console, onerror ]
}

function consoleWrapperMiddleware(basePath, app) {
    app.get(basePath, (req, res) => {   
        res.status(200).send('[ window.console, window.onerror ] = '+consoleWrapper.toString()+'(window.console, window.onerror, location.protocol.concat("//").concat(location.host).concat("'+basePath+'"))')

        console.log('Console wrapper sent')
    })

    app.post(basePath, (req, res) => {  
        let body = []
        req.on('data', (chunk) => {
            body.push(chunk)
        }).on('end', () => {
            body = Buffer.concat(body).toString()

            const logMsg = JSON.parse(body)
            console.log('['+logMsg.level+']', ...logMsg.message)

            res.writeHead(200)
            res.end()
        })  
    })

    console.log('Log server listening from',basePath)
}

module.exports = consoleWrapperMiddleware
Ek1noX
  • 443
  • 6
  • 11