[Skip top navbar]

Andrew Gregory's Web Pages

Marriners Falls, Approx. 38°42'08"S 143°38'32"E

-

Javascript Console


ScreenshotIntroduction

This is mostly just a set of instructions on how to get the Javascript Console that's already in the Opera browser to show up on your Panels. I have included some instructions for optional enhancements, though.

Why would you want to do this? For an ordinary user, no reason really. For a web site developer - I've found it extremely handy to have the console as a panel rather than a separate window. You might too.


Instructions

There is a downloadable version below these instructions, if you don't like typing.

  1. Select File|Open, or press Ctrl+O.
  2. Navigate to the directory you installed Opera. This is usually C:\Program Files\Opera7\.
  3. Open the file jsconsole.html.
  4. Select View|Source.
  5. OPTION: Add a "Clear" button.
    1. Go to the bottom of the file and add <input style="position: fixed; top: 0; right: 0;" type="button" onclick="reset()" value="Clear" /> immediately before the <div id="messages">&nbsp;</div>.
  6. OPTION: Have the console scroll to each message as they're output.
    1. Add window.scrollTo( 0, document.getElementsByTagName( 'html' )[ 0 ].offsetHeight - window.innerHeight ); after msg_div.appendChild( document.createElement( "HR" ) ); (near the bottom of the file, about six lines above the reset() function).
  7. OPTION: An "evaluate" input box.
    1. Add <input id="eval" style="position: fixed; top: 0; left: 0;"/> just before the clear button code, then add the following to the init() function (it's near the top of the file): document.getElementById( 'eval' ).addEventListener( 'keypress', function( e ) { if ( e.keyCode == 13 ) { opera.postError( eval( this.value ) ); this.select(); return false; } }, false);.
    2. You can also add a useful object dumping function to the file: function dump( o ) { var m = o + '\n\n'; for ( var p in o ) { m += p + '=' + o[ p ] + '\n'; } return m; }.
  8. OPTION: Number and timestamp each message (timestamping suggested by scipio).
    1. Insert var d = new Date(); emsg.appendChild( htmlify( '[#' + i + '@' + d.getHours() + ':' + d.getMinutes() + ':' + d.getSeconds() + '] ' ) ); just above emsg.appendChild( htmlify( msg ) );.
  9. OPTION: Get the messages to wrap and look a bit better.
    1. Change "PRE" to "SPAN" in the line var emsg = document.createElement( "PRE" );.
  10. Save, then close the file.
  11. Open your panels. Press F4 if you can't see it.
  12. Select the Bookmarks panel.
  13. Press the Add button.
  14. The Name field is already highlighted. Set it to "JS Console".
  15. Tick the "Show in hotlist panel" checkbox.
  16. Press OK.

Download

jsconsole.html (4708) - Version suitable for Opera 7.50, 7.60, 8.00 and later. Right-click on this and select "Save target as...", then navigate to your Opera program folder as described above and save over your existing file. You may want to make a backup of your original file first, just in case.

This file contains all the options listed above.


Tips

Just in case you haven't read the comments inside jsconsole.html, here is an extract:

/* JavaScript console. Facilities available to user scripts: opera.postError(msg,...) Use from your own scripts to print debug statements to the console window. Each 'msg' is printed as a separate message in the console. */


-