WebComponent to display calls to console methods in a visual terminal
MIT License
Displays calls to
window.console
methods in a visual terminal using Xterm.js.
🚀 Demo: https://visual-logger.now.sh/
This webcomponent follows the open-wc recommendation.
npm i @kuscamara/visual-logger
⚠️ Important: Due to differences in module bundlers (see issue in xtermjs repo) handling exports, the component does not import xterm
by itself and uses window.Terminal
constructor
, so xterm
should be loaded in window
before the component.
xterm
is also required as devDependency
for the tests.
Include the component in your page and start using window.console
methods.
<script src="https://unpkg.com/[email protected]/lib/xterm.js"></script>
<script type="module" src="node_modules/@kuscamara/visual-logger/visual-logger.js"></script>
<visual-logger></visual-logger>
Check out the API docs for the complete list of properties / attributes and methods.
window.console
)Set noConsole
to true
.
<visual-logger no-console></visual-logger>
console
methodsConfig the excluded methods in excludedLogMethods
(array
)
<visual-logger excluded-log-methods='["error"]'></visual-logger>
The required styles for the terminal are loaded by default from a CDN (cdnjs.cloudflare.com), so you don't need to import them manually. If you need to load the stylesheet from a different location, use the stylesheet-uri
attribute to specify the path.
<visual-logger stylesheet-uri="node_modules/xterm/css/xterm.css"></visual-logger>
The height (rows
) and column width (cols
) can be changed after or before initialization.
<visual-logger rows="10" cols="120"></visual-logger>
The default terminal styles (background, ANSI colors and font styles) can be customized using the theme
option of Xterm.js.
The component does not use Shadow DOM, so it can be customized from the outside using visual-editor
tag.
visual-editor > div {
padding: 20px;
}
Each of the window.console
methods (log
, warn
, info
, error
) has a corresponding component method that accepts the same params.
Note: only the first two params are shown in the terminal.
<visual-logger></visual-logger>
<script>
document.querySelector('visual-logger').log('Hello world!');
</script>
The following commands are available for development:
npm start
: Starts the development server.npm t
: Runs the tests with coverage output.npm run test:watch
: Runs the test in watch mode. The browser runner is available at http://localhost:9876/
npm run lint
: Runs web component analyzer, eslint and prettier.npm run format
: Runs linters fixing errors.npm run docs
: Updates the API docs in api.md file and custom-elements.json
.This project is licensed under the MIT License.