Peek42
Touch based browser console
Distribution
Install
(See ApiVis for installing apivis.js)
Node
(apivis
is optional)
npm install apivis
npm install peek42
All distribution files are in node_modules/peek42/dist/
Browser
(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,
addGlobals: true,
autoUse: true
};</script>
Bookmarklet
Bookmark a webpage (any will do). Then change the title to your liking and the url to the contents of peek42.bookmarklet.unpkg.js
Use
Node
const apivis = require('apivis');
const peek42 = require('peek42').use(apivis);
const {p, pp} = peek42;
p.api(process);
Browser
document.addEventListener('DOMContentLoaded', () => {
p.api(document);
});
ES module
import apivis from 'apivis';
import peek42, {p, pp} from 'peek42/dist/peek42.node';
peek42.use(apivis);
import apivis from 'apivis';
import peek42, {p, pp} from 'peek42';
peek42.use(apivis);
API
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]])
- print val
ue with optional comment
(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 and peek42.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]])
(better pp
)p.inspectHtml(val[, comment[, opts]])
(p.inspectStr
featuring collapse/expand)p.inspect(val[, comment[, opts]])
(uses p.inspectHtml
if available, falls back to p.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]])
(uses p.apiHtml
if available, falls back to p.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]])
(uses p.domHtml
if available, falls back to p.domStr
(browser only))p.trace
(peek42
built-in)
The mandatory parameters mirror those of the corresponding apivis.xxxStr
functions. comment
and opts
are the same as with p
. p.members
, p.inspect
, p.chain
and p.api
accept {indent: 'string'}
as additional option and p.members
accepts {indentLevel: 'number'}
as another aditional option
-
pp(val[, comment[, opts]])
- pretty print val
ue - Uses JSON.stringify
(handling circular references) (Since v5.8.0 pp
uses p.inspect
if available (falls back to p.pretty
backed by JSON.stringify
if not))
p
and pp
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 to window
)
-
pretty(val)
- prettified value as printed by pp
as a string
-
use(lib)
- register peek42 plugin
-
Console
(browser only, advanced usage) - the console
class, use its instance
static getter (returns Promise
) to safely obtain reference to initialized console
outside of document
ready
blocks
Console.instance.then(console => {
});
let console = await Console.instance;
-
console
(browser only, advanced usage) - the console
instance, use its methods (after making sure it is initialized either via Console.instance
wait or in document
ready
block) to drive it through code (use p.api(peek42.console)
to find out the API)
-
cable
- TODO: Document server/client websocket init and usage
-
cp
(plus apivis extensions via use
), 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
UI
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