@actualwave/dom-console 中文文档教程
@actualwave/dom-console
用于在页面上显示控制台输出的小型 UI 助手。 我这样做只是为了制作漂亮的演示。
// create container for messages in <body/>
const Msg = DOMConsole.create(document.body);
// use its methods to display messages
Msg.info('Something here:', 'anything else');
Msg.log(1, 2, 3, true, Symbol('abc-def'));
Msg.warn(new Date());
Msg.log(window.location);
Msg.error(new Error('Something bad happened'));
console.css 文件中的所有样式。
它不深入原型链，只显示对象自身的属性。
DOM 控制台基于 Log Data Renderer 它在后台使用渲染器从传递的值中提取一组有价值的信息（JSON 友好），然后显示它。 我需要按原样显示来自 Log Data Renderer 的原始数据，并添加了一个新方法 pushRendered(type, ...content) 可用于显示此类数据。 使用它，您可以在其他地方呈现数据并以 JSON 友好格式发送到控制台。
Nesting
默认情况下，DOMConsole 解析 2 层深的对象，然后它只会得到它们的 字符串表示（默认为 [object Object]）。 检查或更改 最大级别，分别使用函数 getMaxNesingDepth() 和 setMaxNesingDepth()。
CDN
要在 jsfiddle.net 等平台上使用，请添加以下文件： 使用 UNPKG：
- https://unpkg.com/@actualwave/dom-console@latest/console.css
- https://unpkg.com/@actualwave/dom-console@latest/console.js
使用 GitHub 作为 CDN：
- https://rawgit.com/burdiuz/js-dom-console/master/console.css
- https://rawgit.com/burdiuz/js-dom-console/master/console.js
Install
可以
npm install @actualwave/dom-console
使用 yarn从 NPM 安装
yarn add @actualwave/dom-console
TODOs
- Add display for HTML nodes/elements(via outerHTML).
@actualwave/dom-console
Small UI helper to display console output on the page. I've made it just to make nice demos.
// create container for messages in <body/>
const Msg = DOMConsole.create(document.body);
// use its methods to display messages
Msg.info('Something here:', 'anything else');
Msg.log(1, 2, 3, true, Symbol('abc-def'));
Msg.warn(new Date());
Msg.log(window.location);
Msg.error(new Error('Something bad happened'));
All the styles in console.css file.
It does not dig into prototype chain and displays only own properties of the object.
DOM Console is based on Log Data Renderer and it uses renderer under the hood to extract from passed values a set of valuable information(JSON-friendly) and then display it. I needed to display raw data coming from Log Data Renderer as is and added a new method pushRendered(type, ...content) which can be used to display such data. Using it you can render data somewhere else and send to the console in JSON-friendly format.
Nesting
By default DOMConsole parses objects 2 levels deep, then it will just get their String representations(which is [object Object] by default). To check or change maximum level, use functions getMaxNesingDepth() and setMaxNesingDepth() respectively.
CDN
To use on platform like jsfiddle.net, add these files: Using UNPKG:
- https://unpkg.com/@actualwave/dom-console@latest/console.css
- https://unpkg.com/@actualwave/dom-console@latest/console.js
Using GitHub as CDN:
- https://rawgit.com/burdiuz/js-dom-console/master/console.css
- https://rawgit.com/burdiuz/js-dom-console/master/console.js
Install
It can be installed from NPM
npm install @actualwave/dom-console
using yarn
yarn add @actualwave/dom-console
TODOs
- Add display for HTML nodes/elements(via outerHTML).
