Page Console Test
Basic Usage
Writing the codes as followed:
import { PageConsole, DATA_FLOW } from '/js/esm/pageconsole/PageConsole.js';
let targetDiv = document.querySelector('#div-1');
let pc = new PageConsole(targetDiv);
pc.log("Hello");
pc.log(true);
pc.log(23);
pc.log(0.75);
pc.log([1, 2, 3]);
pc.log([[1, 2, 3], [4, 5, 6]]);
pc.log(new Uint8Array([1, 2, 3]));
pc.log(new Float32Array([0.5, 0.1, 0.3]));
let tarr1 = new Uint8Array([1, 2, 3]);
let tarr2 = new Float32Array([0.4, 0.5, 0.6]);
pc.log([tarr1, tarr2]);
pc.log({name: 'Mike', age: 25});
would result in the outputs:
appearing on the web page.
The most valuable and interesting thing is that we can follow along the various object's prototype chains by convinient, including Object, Array, and TypedArray. And we can browse the properties names and functions names therein.
Note: To be surprised, Chrome moves some prototype propertyies such as buffer, byteLength, byteOffset, length from the fake TypedArray to Uint8Array along the prototype chain. Yet they are not own properties of Uint8Array.
Controlling the Data Flow
By default, the outputs would go to the web page only, if we have provided a valid div as the output target.
let targetDiv = document.querySelector('#div-1');
let pc = new PageConsole(targetDiv);
We can direct the data flow only to console by writing:
let targetDiv = document.querySelector('#div-1');
let pc = new PageConsole(targetDiv, DATA_FLOW.CONSOLE);
pc.log("These texts would go to the console panel only.");
Or,
let pc = new PageConsole();
pc.log("These texts would also go to the console panel only.");
And both of the console and web page:
let targetDiv = document.querySelector('#div-2');
let pc = new PageConsole(targetDiv, DATA_FLOW.BOTH);
pc.log("These texts would go to both of the web page, and the console panel.");
Functionality Preservation
The original functionality of console.log is still available:
console.log('console.log is still available.');
So, no outputs on page.
Loading Custom Styles
PageConsole has loaded a default.css CSS file by default, which is on the same URL of the JavaScript file. In default.css, we set the minimal styles:
/*
Created on : 2024年11月27日, 17:34:32
Author : sarkuya
*/
/*
-- color --
*/
ul.pageconsole-output span.data-value {
color: #D7B4F9;
font-weight: lighter;
}
ul.pageconsole-output span.prototype-keyword,
ul.pageconsole-output span.prototype-datatype,
ul.pageconsole-output span.gray
{
color: gray;
}
ul.pageconsole-output span.constructor-name {
color: var(--orange-02);
}
.getter:after {
content: ' (getter)';
color: #76CE5D;
}
.has-value:after {
content: ' (has-value)';
color: #1a9641;
}
/*
-- layout --
*/
ul.pageconsole-output {
border: 0.1px solid #555;
margin: 0;
padding: 0;
list-style-type: none;
list-style-position: inside;
}
ul.pageconsole-output li {
border: 0.2px solid #555;
padding: 0.2em 0.3em;
font-family: monospace;
}
ul.pageconsole-output li ul {
list-style-type: none;
list-style-position: inside;
margin: 0;
padding: 0 2em;
}
ul.pageconsole-output li ul li {
border-width: 0px;
}
ul.pageconsole-output span.string-value {
white-space: pre-wrap;
}
We can use our custom styles by invoking the loadStyle method:
pc.loadStyle('./my-style.css');
Then, we have the chance to override the default settings.
PageConsole can be used in the context of a web widget.
let shadowRoot = webWidget.shadowRoot;
let targetDiv = shadowRoot.querySelector('#div-1');
let pc = new PageConsole(targetDiv, DATA_FLOW.PAGE, shadowRoot);
Then the CSS file would be loaded and appended to the shadowRoot.
Data Types Currently Supported
Currently, the supporting of the following data types have been implemented and tested:
- String
- Boolean
- Number
- Object
- Array
- TypedArrays
- Uint8Array
- Float32Array
- ...
- ArrayBuffer
And if we invoke pc.log on a data type that is not in the list above, an error would be thrown, reminding us to implement and test it.
In this way, we can expand its functionalities step by step, in a safe manner.