Touch based browser console
console.log)(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]]) - print value 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 value - 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 => {
// Use console
});
// or using async/await
let console = await Console.instance;
// Use console
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
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
FAQs
Touch based browser console
The npm package peek42 receives a total of 15 weekly downloads. As such, peek42 popularity was classified as not popular.
We found that peek42 demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Research
Security News
Socket’s threat research team has detected six malicious npm packages typosquatting popular libraries to insert SSH backdoors.
Security News
MITRE's 2024 CWE Top 25 highlights critical software vulnerabilities like XSS, SQL Injection, and CSRF, reflecting shifts due to a refined ranking methodology.
Security News
In this segment of the Risky Business podcast, Feross Aboukhadijeh and Patrick Gray discuss the challenges of tracking malware discovered in open source softare.