How can I log information without using alert in userscripts

Question

i have an userscript which traces all the dynamically created tags in javascript of a webpage. the problem here is presently i am using alert box to dispaly the output. The problem with alert() is that it can be very obtrusive. For every alert, you need to click the OK button to proceed which wastes your time. so i want an alternative method like log files other than alert box. how can i do this.

i am restricted to use console.log

Answer 1

I would use some kind of console element statically placed on your page which can be hidden if necessary. See this jsFiddle.

HTML:

<div id="console">
  <div class="header">
     Console
     <span class="expand" onclick="toggleConsole();">+</span>
  </div>
  <div class="content" style="display: none;"></div>
</div>

CSS:

#console {
    position: fixed;
    right: 0px;
    bottom: 0px;
    width: 300px;
    border: solid 1px #dddddd;
}
#console .header {
    background-color: #ededed;
    border: solid 1px #dddddd;
}
#console .header .expand {
    padding-right: 5px;
    float: right;
    cursor: pointer;
}
#console .content {
    overflow: auto;
    background-color: #F9F9F0;
    width: 100%;
    height: 180px;
}

Javascript:

function log(text) {
    var consoleContent = document.getElementById('console')
        .getElementsByClassName('content')[0];
    var line = document.createElement('div');
    line.className = 'consoleLine';
    line.innerHTML = text;
    consoleContent.appendChild(line);
}

function toggleConsole() {
    var content = document.getElementById('console')
        .getElementsByClassName('content')[0];
    if (content.style.display === "none") {
        content.style.display = "block";
        document.getElementById('console')
            .getElementsByClassName('expand')[0].innerHTML = "-";
    } else {
        content.style.display = "none";
        document.getElementById('console')
            .getElementsByClassName('expand')[0].innerHTML = "+";
    }
}

document.onload = function() {
    document.getElementById('console')
        .getElementsByClassName('expand')[0].onclick = toggleConsole;
};

Use log("some text"); to output to your console !