Inline Console

Author:Oliver Steele
Copyright:Copyright 2006 Oliver Steele. All rights reserved.
License:MIT License (Open Source)
Homepage:http://osteele.com/sources/javascript
Docs:http://osteele.com/sources/javascript/docs/inline-console
Download:http://osteele.com/sources/javascript/inline-console.js
Example:http://osteele.com/sources/javascript/demos/inline-console.html
Created:2006-03-03
Modified:2006-03-20

Usage

Include this line in the head of an HTML document:

  <script type="text/javascript" src="inline-console.js"></script>

This will give you a console area at the bottom of your web page. (See http://osteele.com/sources/javascript/demos/inline-console.html for an example.)

The text input field at the top of the console can be used to evaluate JavaScript expressions and statements. The results are appended to the console.

This file also defines unary functions info, warning, debug, and error, that log their output to the console.

Input Area

Text that is entered into the input area is evaluated, and the result is displayed in the console.

properties(object) displays all the properties of object. (If readable.js is loaded, only the first 10 properties will be displayed. To display all the properties, evaluate

  properties //limit=null

instead. See the Customization section for more about overriding the readable.js defaults.)

Customization

To customize the location of the console, define

  <div id="inline-console"></div>

in the HTML file.

If readable.js is loaded, it will limit the length and recursion level of the displayed string. You can change these limits globally by assigning to ReadableLogger.defaults, e.g.:

  ReadableLogger.defaults.limit=20
  document

You can also change these limits for a single evaluation by appending a comment string to the end of the value, e.g.:

  document//limit=20
  document//limit=20,level=2

See the Readable documentation for the complete list of options.

Related

fvlogger provides finer-grained control over the display of log messages. This file may be used in conjunction with fvlogger simply by including both files. In this case, the fvlogger logging functions are used instead of the functions defined here, and if <div id="inline-console"> is not defined, it is appended to the end of the the #fvlogger div, rather than to the end of the HTML body.

readable.js provides a representation of JavaScript values (e.g. "{a: 1}" rather than "[object Object]") and variadic logging functions (e.g. log(key, ’->’, value) instead of log(key + ’->’ + value)). This file may be used in conjunction with readable.js by including readable.js after this file.

Simple logging for OpenLaszlo defines logging functions that are compatible with those defined by this file. This allows libraries that use these functions to be used in both OpenLaszlo programs and in DHTML.