Andre Lewis on Tech

There it is. In the upper left corner of the screen, left of the earth logo. The small yellow box with a 0 in it.

Try it out:

• Click here to log an info message. Note that the number in the jslog box increments.
• Double click on the JSLog box. It will expand to show the full panel where the messages are logged.
• Drag the JSLog to someplace else on the page. Grab it by the "Handle" -- the small box with the number in it.
• Refresh the page. JSLog stays where you put it, and remembers its state (open or closed). It uses cookies to save its state.
• Add some more messages A Debug message | An Info-level message | A Warning message | An Error message. Note that new entries are placed at the top of the logging panel.
• Try an asynchronous task: click here to launch a loop which executes five times, logging a debug message each time. This is an example of a real-world application for JSLog. Alert() would be awkward for this, because it would force you to acknowledge each iteration through the loop.
• Use it to debug a drag & drop mechanism. This is a very real-life usage. Drag the red thing below someplace on the page. We use JSLog to note the coordinates of the drop location.
  Drag Me!
• You can clear entries. Click on the "Clear" link in the header of the JSLog panel to clear out current log entries and reset the count to zero.
• Get the innerHTML of any DOM element If you know the ID of a DOM element, you can get its contents with JSLog. Try it by 1) entering "theList" (without the quotes, case sensitive) into the "get HTML" field in the logger, and clicking on "go". 2) clicking into the text area, typing control-a (to select all) and control-c (to copy) and then pasting into notepad. You should see the markup for this list.
• Expose any block of large text. Sometimes during the development process you need to expose a large block of text. The jslog.text() method places any text you specify into the text box in the JSLog panel. From there, you can copy-paste it into your text editor of choice. This is particularly useful for developers on IE.Click Here to place a large block of text into JSLog text area.