javascript - Show console messages on Android browser - Stack Overflow

admin管理员组

文章数量:1289845

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 puter (ADB, Chrome remote tool... are unavailable).

Anybody can hint me a viable solution?

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 puter (ADB, Chrome remote tool... are unavailable).

Anybody can hint me a viable solution?

• javascript
• android
• google-chrome
• firefox
• console

Share Improve this question Follow edited Aug 6, 2018 at 7:32 Ek1noX asked Aug 5, 2018 at 17:22 Ek1noXEk1noX 49366 silver badges1313 bronze badges 3

• 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 puter and see it change on your phone. developers.google./web/tools/chrome-devtools Let me know if that helps – Kieran McWilliams Commented Aug 5, 2018 at 17:27
• Did you checked this answer - stackoverflow./a/10816652/1380032 – Rahul Commented Aug 5, 2018 at 17:41
• Thanks and sorry, I forgot to say I can't connect to a puter... Mobile dev only (question updated)! – Ek1noX Commented Aug 6, 2018 at 7:29

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 8

Try https://github./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/npm/eruda"></script>
      <script>eruda.init();</script>

Edit

A practical solution can be found at https://stackoverflow./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 patible 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 patible 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

本文标签： javascriptShow console messages on Android browserStack Overflow