Reputation: 141

Redirecting Firefox's web console output to a page element

I've been trying to debug a webpage on mobile firefox without the remote debugger. To do that I thought I could use some javascript intercept all calls to console.log, console.error console.warn etc. and print to div.

But I can't seem to get it print out anything other than the first test logs. AFAICT, No logs from the browser or the other scripts seem to appear in the page element. This is the code:

 <!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>

Upvotes: 2

Answers (1)

Seamus

Reputation: 4819

Instead of altering console methods, you can capture error messages by defining a custom onerror global event handler: https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onerror

Example:

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>

Upvotes: 2

Redirecting Firefox&#39;s web console output to a page element

Answers (1)

Related Questions

Redirecting Firefox's web console output to a page element