This module enables console logging to an in-page element. It is somewhat simplified, as not all browser console features can easily be replicated, but should still suit most common use-cases.
This module is widely used on the [[dev>index.html|test pages]] to show what is happening, without the need to open the browser console.
===== Initialisation =====
To use, you first have to put a target element on the page where the logging can be directed to:
In this example, a ''
'' with the ID “console” is created. The type of the element or the ID are arbitrary (can be any block-level element), but for all examples (including the sample CSS file), a ''
'' element with this ID is assumed.
In the JavaScript code, the ''setTarget()'' method must be used to set this element as the target for the logging.
A good place for this initialization is the module’s ''init()'' method, which can be implemented as follows:
$p.console.init = function() {
this.setTarget(document.getElementById('console'))
}
After this, ''$p.console'' can be used in much the same way as the built-in [[mdn>Web/API/console|browser console]] can be used, e.g.:
$p.console.log("Hello world!");
$p.console.info("Information item.");
$p.console.warn("Warning message!");
$p.console.error("Error message!");
$p.console.group('New group');
$p.console.log(["arrays","are","possible","too"]);
$p.console.groupEnd();
===== Methods =====
==== setTarget() ====
The ''setTarget()'' method should be used during initialization to define a target element that should be used for the console.
Usage
$p.console.setTarget(Element) \\ or:this.setTarget(Element) when used in ''init()''
Parameters
Element – An object reference to an (existing!) element that should be used as the root element for the console (required)
==== log(), info(), warn(), error() ====
Write messages to the console. These work similar to their counterparts in the JavaScript [[mdn>Web/API/console|console]], except that they write the messages to the in-page element instead of the browser console.
msg – The message to be written to the log – see below for allowed types (required)
The main difference is that at the moment each of these can only be called with a single message (the JS console can be called with multiple parameters), and that the output for objects is much simplified.
The message can be of the following types:
^ Type ^ Behavior ^
^ String | Text is copied to the console “as is”. |
^ Number | Number is copied to the console “as is”. |
^ Array | If the [[toolbox:arrays:tohtml:index|Array.toHtml()]] method is available, a value table is displayed. Otherwise it is displayed as a serialized string. |
^ Object | If the Object is of a type that can be serialized by [[mdn>Web/JavaScript/Reference/Global_Objects/JSON/stringify|JSON.stringify()]], it will be displayed as a string. Otherwise it will be shown as ''[Object]''. |
**Hint:** To log an //error// object (e.g. in a ''catch()'' block) to ''$p.console'', please use '.toString()'' to turn it into a string first.
==== group() ====
Begins a log group, which is rendered as an expandable section of the log.
Usage
$p.console.group(title, open)
Parameters
title – A title string for the group (optional) \\ open – A boolean value to indicate if the group should be opened by default (optional, default = true)
==== groupEnd() ====
Ends a log group.
Usage
$p.console.groupEnd()
===== Screenshot =====
{{:framework:page:p-console:p-console-example.png?nolink|jMini Console widget}}
Example of an in-page console log, using the sample CSS.
===== More information =====
* [[mdn>Web/API/console|console]] on MDN.