javascript - 将 Firefox 的 Web 控制台输出重定向到页面元素

我一直在尝试在不使用远程调试器的情况下在移动 Firefox 上调试网页。为此，我想我可以使用一些 javascript 拦截对 console.log、console.error console.warn 等的所有调用并打印到 div。

但除了第一个测试日志之外，我似乎无法打印出任何内容。 AFAICT，页面元素中似乎没有出现来自浏览器或其他脚本的日志。这是代码:

 <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Clang in JS</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">

    <link href="css/bootstrap.css" rel="stylesheet">
    <style>
      body {
        padding-top: 60px; /* 60px to make the container go all the way to the bottom of the topbar */
      }
    </style>
    <link href="css/bootstrap-responsive.css" rel="stylesheet">

</head>

  <body>

    <div class="navbar navbar-inverse navbar-fixed-top">
      <div class="navbar-inner">
        <div class="container">
          <button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <!--a class="brand" href="lua.vm.js.html">lua.vm.js</a>
          <div class="nav-collapse collapse">
            <ul class="nav">
              <li><a href="lua.vm.js.html">Benchmarks+FAQ</a></li>
              <li class="active"><a href="repl.html">REPL</a></li>
              <li><a href="script_example.html">Script Example</a></li>
            </ul>
          </div--><!--/.nav-collapse -->
        </div>
      </div>
    </div>

    <div class="container">

      <div class="hero-unit">
        <h2>Clang in JS</h2>
        <p>This is <a href="http://clang.llvm.org/">Clang</a> running in JS, ported by <a href="http://emscripten.org">emscripten</a>.</p>
      </div>

      <div class="row">
        <div class="span4" border=1>
          <h4>input</h4>
          <textarea id="mytext">
extern void puts(const char *str);

int main() {
  puts("hello, world!");
  return 0;
}

</textarea>
          <h4>console</h4>
          <pre id="stderr"></pre>
        </div>
        <div class="span8">
          <h4>output</h4>
          <pre id="output"></pre>
        </div>
        <div class="span8">
          <h4>log</h4>
          <pre id="log"></pre>
        </div>

      </div> 

      <p><a href="#" class="btn btn-primary btn-large " onclick="executeCode(myCodeMirror.getValue(), true); return false" id="the_button">Execute &raquo;</a></p>

      <div class="row-fluid">
        <div class="span">
          <h3>Limitations</h3>
          <p>C preprocessor is not hooked up.</p>
          <p>If you want to also execute the code, use <a href="https://github.com/kripken/llvm.js">this LLVM IR runner</a> or one of the many CPU emulators out there in JS.</p>
        </div>
      </div>

    </div> <!-- /container -->

    <a href="https://github.com/kripken/clangor"><img style="position: absolute; top: 35px; right: 0; border: 0;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png" alt="Fork me on GitHub"></a>

  </body>
</html>

<script>



    var logger = document.getElementById('log');
    console.log = function (message) {
        if (typeof message == 'object') {
            logger.innerHTML += (JSON && JSON.stringify ? JSON.stringify(message) : String(message)) + '<br />';
        } else {
            logger.innerHTML += message + '<br />';
        }
    }
     console.warn = function (message) {
        if (typeof message == 'object') {
            logger.innerHTML += (JSON && JSON.stringify ? JSON.stringify(message) : String(message)) + '<br />';
        } else {
            logger.innerHTML += message + '<br />';
        }
    }
       console.error = function (message) {
        if (typeof message == 'object') {
            logger.innerHTML += (JSON && JSON.stringify ? JSON.stringify(message) : String(message)) + '<br />';
        } else {
            logger.innerHTML += message + '<br />';
        }
    }

console.info = function (message) {
        if (typeof message == 'object') {
            logger.innerHTML += (JSON && JSON.stringify ? JSON.stringify(message) : String(message)) + '<br />';
        } else {
            logger.innerHTML += message + '<br />';
        }
    }
</script>
<script>

console.log('test');
console.error('error test');
console.log({
    test: 2
});
console.log([1, 2, 3]);
console.log([{
    test: 1
}, {
    test: 2
}]);
</script>
    <script src="js/codemirror.js"></script>
    <script>
    var Module = {
      print: function(text) {
        console.log('stdout: ' + text);
      },
      printErr: function(text) {
        var outputElement = document.getElementById('stderr');
        outputElement.innerHTML = outputElement.innerHTML + (outputElement.innerHTML ? '<br>' : '') + text;
      },

      arguments: '-cc1 -emit-llvm -disable-free -disable-llvm-verifier -main-file-name hello_world.c -mrelocation-model static -mdisable-fp-elim -fmath-errno -masm-verbose -mconstructor-aliases -target-linker-version 2.22 -momit-leaf-frame-pointer -coverage-file /home/alon/Dev/clangor/hello_world.s -resource-dir /home/alon/Dev/clang+llvm-3.2-x86-linux-ubuntu-12.04/bin/../lib/clang/3.2 -internal-isystem /usr/local/include -internal-isystem /home/alon/Dev/clang+llvm-3.2-x86-linux-ubuntu-12.04/bin/../lib/clang/3.2/include -internal-externc-isystem /include -internal-externc-isystem /usr/include -fdebug-compilation-dir /home/alon/Dev/clangor -ferror-limit 19 -fmessage-length 205 -mstackrealign -fobjc-runtime=gcc -fdiagnostics-show-option -fcolor-diagnostics -o input.s -x c input.cpp'.split(' '),
//'-cc1 -triple sparc-unknown-gnu -emit-llvm -S -disable-free -disable-llvm-verifier -main-file-name input.cpp -mrelocation-model static -mdisable-fp-elim -fmath-errno -masm-verbose -mconstructor-aliases -target-linker-version 2.22 -momit-leaf-frame-pointer -coverage-file /tmp/input.s -resource-dir /home/alon/Dev/clang+llvm-3.2-x86-linux-ubuntu-12.04/bin/../lib/clang/3.2 -fdebug-compilation-dir /tmp -ferror-limit 19 -fmessage-length 205 -mstackrealign -fobjc-runtime=gcc -fdiagnostics-show-option -fcolor-diagnostics -o input.s -x cpp-output input.cpp'.split(' '),

        //[
        //  '-ccc-echo',
        //  '-ccc-print-phases',
        //  '-c', '-x', 'cpp-output', 'input.cpp'
        //],

      noInitialRun: true,
    };
    </script>
    <script async src="clang.js"></script>
    <script>
// CodeMirror
var myCodeMirror = CodeMirror.fromTextArea(document.getElementById('mytext'));
//myCodeMirror.setSize(screen.width*0.6, screen.height*0.2);

// Execution

function executeCode(code, clear) {
  var theButton = document.getElementById('the_button');
  theButton.style = 'visibility: hidden';
  try {
    FS.unlink('input.cpp');
  } catch(e) {}
  FS.createDataFile('/', 'input.cpp', intArrayFromString(code), true, true); // TODO use 'code'
  Module.callMain(Module.arguments);
  var outputElement = document.getElementById('output');
  outputElement.innerHTML = intArrayToString(FS.root.contents['input.s'].contents);
}
</script>

最佳答案

您可以通过定义自定义 onerror 全局事件处理程序来捕获错误消息，而不是更改 console 方法:https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onerror

示例:

window.onerror = function myErrorHandler(errorMsg, url, lineNumber) {
  document.getElementById('my_console').innerText += errorMsg + '\r\n';
  console.error(errorMsg, url, lineNumber);
}

<input type="button" value="Error!" onclick="missing_function()" />
<div id="my_console"></div>

关于javascript - 将 Firefox 的 Web 控制台输出重定向到页面元素，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29130814/

javascript - 将 Firefox 的 Web 控制台输出重定向到页面元素

上一篇：javascript - 从原型(prototype)更改/包装函数

下一篇：javascript - Meteor:引用不同目录中的其他javascript类