
gittech. site
for different kinds of informations and explorations.
Chrome extension to pretty print JSON error logs
Published at
Dec 24, 2024
Main Article
Log Viewer
Log Viewer is a handy tool to help you read logs happily in your browser, especially error logs. It also supports common code formatting and highlighting, such as XML, YAML, etc., especially supports ANSI formatting.
Highlights
- Customized JSON formatting scheme, allowing you to clearly read JSON formatted error logs, especially call stack information.
- Format and highlight almost any text format, such as JSON, ANSI, HTML, YAML, etc.
- Supports text selection, element selection, clipboard.
- Quick access with shortcuts.
- Auto format page.
Install
Showcase
Pretty JSON
Pretty ANSI
Pretty YAML
Usage
Shortcuts
vv
: pretty print json, read from selection or current hovered dom node.pp
: pretty print json, read from clipboard.cc
: pretty print current page's source code, auto detect content type.hh
: pretty print current page's current html.xx
: pretty print current page's text content with ansi colors.ff
: toggle full screen mode.Esc
: exit log viewer.
Context menu
Log Viewer also has options to trigger shortcuts in context menu Log Viewer
, except for pp
.
Automation
Log Viewer will auto open (trigger cc
shortcut) if the current page's content type is resource, e.g., yaml, js, css.
Note: there is no option to disable it at this moment.
Dev
Clone the repo:
git clone https://github.com/amos-project/log-viewer.git
Install dependencies:
yarn i
Start dev server:
yarn start
Build
yarn build # or, generate all ./build.sh