0

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

6
  • for console.log we have to go to inspectelement->console in which the user might not be comfortable. MY application should display the output when the script is run without the user going for console to view the output. sorry i forgot to mention this Commented Apr 12, 2012 at 9:24
  • Do you want to log information for you (developer/helpdesk) only, or does a normal user has to be able to see it?
    – Konerak
    Commented Apr 12, 2012 at 9:25
  • Normal user should be able to see it. Commented Apr 12, 2012 at 9:26
  • @user1275375 - Then just add the output to the page's HTML. At this point, I'm not sure about what you have in mind :-? Commented Apr 12, 2012 at 9:28
  • is it possible to add code into website using userscript Commented Apr 12, 2012 at 9:35

4 Answers 4

2

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 !

1
1

Install firefox add-on to your Mozilla(if you are using) and you the follwing code:

console.log("test"+your_variable);

So above code will display all logs in console.If IE press F12 and check console.

2
  • Note that with console.log you can pass multiple parameters. So instead of console.log("My object is: " + myObj) you can say console.log("My object is: ", myObj) which will let you expand the object and see its properties
    – bcoughlan
    Commented Apr 12, 2012 at 9:25
  • Yes we can. I just explained to get an idea.Anyway thank you :-)
    – Kiran
    Commented Apr 12, 2012 at 9:27
1

If a normal user should be able to see it, using the console is not a very user-friendly way.

Define a space on your webpage (a <div> might be handy) where you want the information to be, and just add the messages to that space using javascript (or jQuery) to modify the DOM:

HTML:

<div id='logmessages'>Log messages:</div>

JavaScript

function log(yourMsg) {
document.getElementByID('logmessages').innerHTML() += yourMsg;
}

It might be friendly to allow the user to show/hide the div with a button or another way.

0

Create a fixed div either at the top, bottom or corner of your page with set width/height and overflow auto, then insert the log entries in it.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.