在 Android 浏览器上显示控制台消息答案

【问题标题】：Show console messages on Android browser在 Android 浏览器上显示控制台消息
【发布时间】：2019-01-12 18:20:11
【问题描述】：

我使用 Android（非 root）手机进行 Web 开发，并寻找一种方法来显示浏览器（Chrome 或 Firefox）控制台消息。 Android Chrome 和 Firefox 都没有网络检查器/控制台，我没有找到 Firefox（工作）插件。

更新：我无法将手机连接到计算机（ADB、Chrome 远程工具...不可用）。

任何人都可以提示我一个可行的解决方案？

【问题讨论】：

我做了一些移动开发，我使用了 chrome 开发工具，我只需将手机插入笔记本电脑并在笔记本电脑上使用 chrome 开发工具。它应该显示所有错误和控制台日志等。您还可以在计算机上编辑 HTML 和内容，并在手机上看到它的变化。 developers.google.com/web/tools/chrome-devtools如果有帮助请告诉我
你检查过这个答案吗 - stackoverflow.com/a/10816652/1380032
谢谢，抱歉，我忘了说我无法连接到计算机...仅限移动开发者（问题已更新）！

标签： javascript android google-chrome firefox console

【解决方案1】：

编辑

可以在https://stackoverflow.com/a/60106504/1025638找到一个实用的解决方案

原始（自我）答案

我没有找到一个“正常工作”的解决方案来解决我的问题，所以我制作了一个简短的工具来将日志和错误从浏览器发送到后端服务器。

它使用Proxy 围绕window.console 对象并实现函数window.onerror 将消息发布到服务器。

我构建了代码以将其用作 expressjs 中间件以实现可重用性。它并不完美，可能不兼容所有浏览器，但如果浏览器中没有开发工具，它真的很有帮助。

任何人都可以通过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

【讨论】：

【解决方案2】：

试试https://github.com/liriliri/eruda，非常接近开发工具。

你需要做的就是在页面顶部添加这个sn-p：

      <script src="//cdn.jsdelivr.net/npm/eruda"></script>
      <script>eruda.init();</script>

【讨论】：

终于！真正的移动浏览器解决方案！它需要彻底的测试，但似乎可以满足我的所有需求。