Touch based browser console
- Node module (CJS) - https://unpkg.com/peek42@latest/dist/peek42.node.js (tiny wrapper over
console.log
) - Browser bundle (UMD) - https://unpkg.com/peek42@latest/dist/peek42.browser.js
- Node ES module - https://unpkg.com/peek42@latest/dist/peek42.node.mjs
- Bundlers/browsers ES module - https://unpkg.com/peek42@latest/dist/peek42.browser.mjs
- Monofur font (LICENCE_Monofur) - https://unpkg.com/peek42@latest/dist/monofur.woff
- Main style - https://unpkg.com/peek42@latest/dist/peek42.css
- Dark theme - https://unpkg.com/peek42@latest/dist/peek42-dark.css
- Bookmarklet - https://unpkg.com/peek42@latest/dist/peek42.bookmarklet.unpkg.js
(See ApiVis for installing apivis.js)
(apivis
is optional)
npm install apivis
npm install peek42
All distribution files are in node_modules/peek42/dist/
(monofur.woff
is expected to be next to peek42.css
, peek42-dark.css
, apivis.browser.js
and source-map.js
are optional)
<link rel="stylesheet" href="https://unpkg.com/peek42@latest/dist/peek42.css" />
<link rel="stylesheet" href="https://unpkg.com/peek42@latest/dist/peek42-dark.css" />
<script src="https://unpkg.com/apivis@latest/dist/apivis.browser.js"></script>
<script src="https://unpkg.com/peek42@latest/dist/peek42.browser.js"></script>
<script src="https://unpkg.com/source-map@latest/dist/source-map.js"></script>
<script>sourceMap.SourceMapConsumer.initialize({
'lib/mappings.wasm': 'https://unpkg.com/source-map@latest/lib/mappings.wasm'
});</script>
Configuration options can be specified by adding a script before peek42.browser.js
(values shown are the defaults):
<script>window.PEEK42_CONFIG = {
interceptConsole: true, // Intercept window.console log, info, warn and error calls
addGlobals: true, // Assign p and pp to window
autoUse: true // Integrate ApiVis automatically (needs to be loaded before Peek42)
};</script>
Bookmark a webpage (any will do). Then change the title to your liking and the url to the contents of peek42.bookmarklet.unpkg.js
const apivis = require('apivis');
const peek42 = require('peek42').use(apivis);
const {p, pp} = peek42;
p.api(process);
document.addEventListener('DOMContentLoaded', () => {
p.api(document);
});
// Node
import apivis from 'apivis';
import peek42, {p, pp} from 'peek42/dist/peek42.node';
peek42.use(apivis);
// Bundlers
import apivis from 'apivis';
import peek42, {p, pp} from 'peek42';
peek42.use(apivis);
// Use the imports
The following properties/functions are available through the peek42 namespace object returned from require('peek42')
on node or available as window.peek42
in the browser (the ES module has the namespace object as default export and p
, pp
and pretty
as named exports):
-
version
- library version -
p(val[, comment[, opts]])
- printval
ue with optionalcomment
(undefined
and''
cause default comment to be generated,null
means no comment),opts
can be used to specify the log level -{level: 'info'}
for example, the default is{level: 'log'}
, the other possibilities are'info'
,'warn'
and'error'
. Setting{collapsed: true}
causes the log entry to be initially collapsed (only the comment is visible, tap it to expand/collapse using the UI). If ApiVis is installed andpeek42.use(apivis)
executed,p
itself gains the following methods (some are built-in):p.type(val[, comment[, opts]])
p.desc(val, k[, comment[, opts]])
p.member(val, k[, comment[, opts]])
p.members(val[, comment[, opts]])
-
p.pretty(val[, comment[, opts]])
(peek42
built-in) -
p.inspectStr(val[, comment[, opts]])
(betterpp
) -
p.inspectHtml(val[, comment[, opts]])
(p.inspectStr
featuring collapse/expand) -
p.inspect(val[, comment[, opts]])
(usesp.inspectHtml
if available, falls back top.inspectStr
) p.chain(val[, comment[, opts]])
p.apiStr(val[, comment[, opts]])
-
p.apiHtml(val[, comment[, opts]])
(p.apiStr
featuring collapse/expand) -
p.api(val[, comment[, opts]])
(usesp.apiHtml
if available, falls back top.apiStr
) -
p.domStr(val[, comment[, opts]])
(peek42
built-in, browser only) -
p.domHtml(val[, comment[, opts]])
(p.domStr
featuring collapse/expand) -
p.dom(val[, comment[, opts]])
(usesp.domHtml
if available, falls back top.domStr
(browser only)) -
p.trace
(peek42
built-in)
The mandatory parameters mirror those of the corresponding
apivis.xxxStr
functions.comment
andopts
are the same as withp
.p.members
,p.inspect
,p.chain
andp.api
accept{indent: 'string'}
as additional option andp.members
accepts{indentLevel: 'number'}
as another aditional option -
pp(val[, comment[, opts]])
- pretty printval
ue - UsesJSON.stringify
(handling circular references) (Since v5.8.0pp
usesp.inspect
if available (falls back top.pretty
backed byJSON.stringify
if not))p
andpp
are meant to be the primary library interface (do a suitable assignment or import as per the use examples, by default the browser builds assign them towindow
) -
pretty(val)
- prettified value as printed bypp
as a string -
use(lib)
- register peek42 plugin -
Console
(browser only, advanced usage) - theconsole
class, use itsinstance
static getter (returnsPromise
) to safely obtain reference to initializedconsole
outside ofdocument
ready
blocksConsole.instance.then(console => { // Use console }); // or using async/await let console = await Console.instance; // Use console
-
console
(browser only, advanced usage) - theconsole
instance, use its methods (after making sure it is initialized either viaConsole.instance
wait or indocument
ready
block) to drive it through code (usep.api(peek42.console)
to find out the API) -
cable
- TODO: Document server/client websocket init and usage -
cp
(plus apivis extensions viause
),cpp
- node side of a web app, client print using websocket
peek42 intercepts the native console logging function calls, so console.log
calls (for example) will show up
peek42 listens for JavaScript errors (including unhandledrejection
of promises) and shows them with the error message as a comment and source snippet and stack trace if possible
If no log function has been called, peek42 is shown minimized. Tap Show to show it. By default, whenever a log function is called, peek42 is shown and the log is scrolled to the top (entries are logged from oldest at the bottom to newest at the top), so that the latest entry is visible. Tap Minimize to minimize it. This can be changed by turning on the Quiet checkbox (visible only when peek42 is minimized). In this mode, peek42 flashes on log write, but stays minimized. Tapping the title alternates the log position between start/end. Use Resize to resize peek42 (peek42 limits its dimensions and the border briefly flashes upon reaching the limits) and Clear to clear the log contents. The buttons on the right can be used to collapse/expand all entries and to filter them by log level (info, log, warn, error). They work like a set of checkboxes (each controls the visibility of the particular level) and show the number of corresponding entries. If peek42 is in quiet mode, log write with filtered out level doesn't show it (the entry is written and peek flashes)
Use the text box JS to evaluate to eval JavaScript code (write in the box and simply hit enter). Print functions can be specified by prefixing the expression with one of v(alue)
(the default), p(retty)
, t(ype)
, d(esc)
(requires two arguments separated by a comma), m(embers)
, c(hain)
, a(pi)
. Only v(alue)
and p(retty)
are supported out of the box, the others require ApiVis
See the example folder for node and browser examples respectively