https://github.com/pfuster12/mk2console
A trusty console embedded in-window to print rich log messages during development.
https://github.com/pfuster12/mk2console
console debug developer-tools npm-package react web webpack
Last synced: about 1 year ago
JSON representation
A trusty console embedded in-window to print rich log messages during development.
- Host: GitHub
- URL: https://github.com/pfuster12/mk2console
- Owner: Pfuster12
- Created: 2019-11-26T18:46:36.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2023-01-01T13:48:30.000Z (over 3 years ago)
- Last Synced: 2025-04-22T14:57:43.552Z (about 1 year ago)
- Topics: console, debug, developer-tools, npm-package, react, web, webpack
- Language: TypeScript
- Size: 917 KB
- Stars: 1
- Watchers: 1
- Forks: 2
- Open Issues: 19
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Welcome to the Mark-II Console
 [](http://commitizen.github.io/cz-cli/)
The Mark-II Console is a small console viewport that sits in the corner of your window. Print out your log messages during development with rich formatting and colour, so you don't need to open the hefty developer tools if all you need is to log some stuff out!
Close at any time, no questions asked.
## Install
Mk2Console is a [npm package](https://www.npmjs.com/package/mk2console).
```console
npm i mk2console
```
> **NOTE** Please use the latest version as versions before 1.3.4 contain major bugs.
## How it works
Mk2Console consists of React component viewer and a simple object with helper functions. Import the component and the Helper function object in order to display and log messages in your code. The viewer works best when you place in your app's root view:
```jsx
import {Mk2ConsoleViewer, Mk2Console} from 'mk2console'
export default function App() {
useEffect(() => {
Mk2Console.log('Testing...')
},
[])
return (
<>
{/* Your other components...*/}
>
)
}
```
> **NOTE** Mk2ConsoleViewer uses the new React Hooks.
The helper object contains the log function:
```typescript
log: (msg: string, color: string = 'white', fontWeight: string = 'normal') => {}
```
This is where the console is able to format its messages. The color and fontWeight can be set to any valid CSS value for these properties in string format, e.g. `'#FAFAFA'`, `'blue'`, `'bold'`, `'700'`.
So if we modify our initial call with some CSS properties:
```jsx
import {Mk2ConsoleViewer, Mk2Console} from 'mk2console'
export default function App() {
useEffect(() => {
Mk2Console.log('And it supports rich formatting.', '#3dda82', 'bold')
},
[])
return (
)
}
```
We get the start up log message:
### Highlight Color
`highlight` is a special keyword in the Mk2Console. Every theme will have a highlight color defined for your convenience that you can use to quickly format log messages to stand out.
If you pass `highlight` to the color property in the log method:
```
Mk2Console.log('This log is highlighted', 'highlight')
```
The message will understand and use the theme's `highlight` color.
## Supported Logger functions
- Info: Info message with the theme's 'info' color.
```info: (msg: string)```
- Debug: Debugs a message with the theme's 'debug' color.
```debug: (msg: string)```
- Warn: Warning message with the theme's 'warn' color.
```warn: (msg: string)```
- Error: Error message with the theme's 'error' color.
```error: (msg: string)```
## Supported Props
| Prop | Type | description | default | required |
| ------------------|:--------------:| ---------------------------------------------------:|----------:|----------:|
| **theme** | string | Theme to use on startup | 'default' | false |
| **minimised** | boolean | Whether the console starts minimised by default | 'true' | false |
The interface used:
```typescript
interface Mk2ConsoleViewerProps {
theme?: string,
minimised?: boolean
}
```
> **NOTE** Since v1.3.1 the start up log message has been removed along with the property.
## Maximise/Minimise
Since v1.3.0 the console supports toggling the window into a minimised version to stop it
from obstructing to much real estate in the website if you don't need it.
In fact the console defaults to a minimised state which you can toggle with the `minimised` prop.
```jsx
import {Mk2ConsoleViewer, Mk2Console} from 'mk2console'
export default function App() {
return (
)
}
```
Minimised:
Maximised:
## Themes
The mk2Consoles brings you beautiful and rich theming for all your logging needs.
Keep it simple with the clean, classic default theme or choose from plugin themes. Or create your own! (TBA)
The package comes with a few pre-loaded themes:
Default
--------
Light
--------
Dracula
--------
### How to change themes
Pass in the theme prop to make the console use the theme of your choice. The prop defaults to the 'default' theme:
```jsx
import {Mk2ConsoleViewer, Mk2Console} from 'mk2console'
export default function App() {
return (
)
}
```
Themes are instantly switchable in the Theme Dialog picker embedded in the Viewer window.
Built-in Themes
---------------
- `default`
- `light`
- `dracula`
## Development
Mk2Console uses React Hooks, make sure you are using a version of `16.8.0` or above.
### Version Control
Mk2Console is [Commitizen Friendly.](https://github.com/commitizen/cz-cli).