New way to debug & inspect in the browser. Ditch
console.log.
npm install console-powers- Quicker debugging for large objects. Have you spent time clicking on the expand button in DevTools every time you
console.log()a big object, or have you spent time doing data drilling so it's easier to see? Withii()and it'sdepthandkeysoptions you can see an entire object with only the keys you want. - Better table printing.
connsole.table()always displays(index)column that adds clutter. Also,console.table()doesn't support displaying nested objects in the table cell making it's use limited. - Write less, use inline. You can sneak in
ii()—return ii(data)— and it will print and return the value so you don't need to make a separate variable, print the value, and then return it. Also, if your don't have a shorthand forconsole.log, writingiiis faster. - And many more. Better date/time printing, more readable
Mapprinting, adaptive string trimming, and many more improvements over default logging methods.
The library can be mentally split in two: 1) ii() that aims to replace console.log + tt() that aims to replace console.table, 2) the core API that allows doing advanced printing in the browser console. This is a getting started for 1). For 2) see API section.
- Add
iiandttto the global scope so you can use it anywhere without importing it – just likeconsole.log:import { addToGlobalScope, addNoopToGlobalScope } from 'console-powers/global' if (import.meta.env.DEV) { addToGlobalScope() ii.defaults.depth = 8 // if you like, change the default options } else { addNoopToGlobalScope() }
- Use anywhere instead of
console.logandconsole.table:// ii() returns the first parameter you pass to it, so you can use it inline const markdownTree = ii(await worker.parseMarkdownTree())
import { ii } from "console-powers";
// inspect-inspect
ii({
type: "group",
priority: 1,
items: [{ type: "new" }, { type: "delimiter" }, { type: "value" }],
location: {
start: {
line: 1,
column: 0,
},
end: {
line: 4,
column: 10,
},
},
});
import { tt } from "console-powers";
// table-table
tt([
{
model: 'MacBook Air 13"',
year: new Date(2020, 10, 23),
price: 999,
},
{
model: 'MacBook Air 15"',
year: new Date(2023, 9, 18),
price: 1299,
},
{
model: 'MacBook Pro 13"',
year: new Date(2019, 11, 2),
price: 1499,
},
])
import { consolePrint, consoleText } from "console-powers";
consolePrint(
consoleText("90s", {
fontSize: "120px",
color: "hsl(330, 100%, 50%)",
textShadow:
"0 2px 0 hsl(330, 100%, 25%), 0 3px 2px hsla(330, 100%, 15%, 0.5), /* next */ 0 3px 0 hsl(350, 100%, 50%), 0 5px 0 hsl(350, 100%, 25%), 0 6px 2px hsla(350, 100%, 15%, 0.5), /* next */ 0 6px 0 hsl(20, 100%, 50%), 0 8px 0 hsl(20, 100%, 25%), 0 9px 2px hsla(20, 100%, 15%, 0.5), /* next */ 0 9px 0 hsl(50, 100%, 50%), 0 11px 0 hsl(50, 100%, 25%), 0 12px 2px hsla(50, 100%, 15%, 0.5), /* next */ 0 12px 0 hsl(70, 100%, 50%), 0 14px 0 hsl(70, 100%, 25%), 0 15px 2px hsla(70, 100%, 15%, 0.5), /* next */ 0 15px 0 hsl(90, 100%, 50%), 0 17px 0 hsl(90, 100%, 25%), 0 17px 2px hsla(90, 100%, 15%, 0.5)",
}),
);ii() (inspect-inspect) is an all-in-one utility function encompassing the entire library. It's the easiest and recommended way to use the library. You can start using ii() instead of console.log(). It uses consoleInspect() under the hood.
Tip: Use ii() inside expressions – it returns the first argument your pass to it:
function getData() {
// ii() will return the first parameter, instead of needing to create a variable for it
return ii(data)
}Type: ConsoleInspectOptions
The default options passed to consoleInspect(). Expand consoleInspect docs for list of all options and what they do.
Alias: ii.d(depth: number): InspectInspect
Changes how many levels of a nested object are expanded by default. Returns itself to allow chaining:
ii.depth(6)(nestedObject)Alias: ii.k(...keys: string[]): InspectInspect
Whitelist keys to include in the log. For nested object, keys work per level — at particular level of nesting if no key matches any of the keys the whole level is shown. For nested object, showing a key also shows its children. Returns itself to allow chaining:
ii.keys('start', 'end', 'type')({
type: 'paragraph',
start: 0,
end: 10,
nodes: [{
...
}]
})Allows you to manipulate the value before printing it. For example, in Solid.js Signals are functions with no parameters and you can ensure it always prints the value and not the Signal itself:
ii.pre = (value: unknown): unknown => {
// is it a Solid.js Signal?
return typeof value === 'function' && value.length === 0
? value()
: value
}tt() (table-table) aims to replace console.table() by providing extra features and cleaner design. It uses consoleTable() under the hood.
Tip: Use tt() inside expressions – it returns the first argument your pass to it:
function getData() {
// tt() will return the first parameter, instead of needing to create a variable for it
return tt(data)
}Type: ConsoleTableOptions
The default options passed to consoleTable(). Expand consoleTable docs for list of all options and what they do.
Allows you to manipulate the value before printing it. For example, in Solid.js Signals are functions with no parameters and you can ensure it always prints the value and not the Signal itself:
tt.pre = (value: unknown): unknown => {
// is it a Solid.js Signal?
return typeof value === 'function' && value.length === 0
? value()
: value
}Imported from console-powers/global. It adds ii and tt and it's TypeScript types to the global scope so you can use it anywhere without importing it – just like console.log.
Imported from console-powers/global. It adds empty/noop functions for ii and tt so if you accidentally forget a ii or tt call during development it won't crash in production.
Type: number
Default: 2
For nested objects, how many levels are expanded by default. Levels after that will be collapsed.
Type: string[]
Default: undefined
Whitelist keys to include in the log. For nested object, keys work per level — at particular level of nesting if no key matches any of the keys the whole level is shown. For nested object, showing a key also shows its children.
Type: "auto" | "single-line" | "multi-line" | number
Default: "auto"
Configure when the algorithm puts things on new lines:
"auto"— tries to guess the available space and wraps based on it."single-line"— never wraps on new lines, the entire output is a single line."multi-line"— always starts a new line when dwelling into a new object/array.number— set the maximum number of characters per line before it wraps to the next line.
Type: number
Default: 4
How much spaces to add when going down a level.
Type: 'light' | 'dark'
Default: automatically determined based on the system theme.
Determines the colors that will be used to style the output.
Type: boolean
Default: true
If set to false, the method won't print to the console. In this case, you probably want to get the return value of the method and use it.
Great for debugging. Especially great when you have an array of objects that aren't deeply nested.
Type: "auto" | number
Default: "auto"
Type: 'light' | 'dark'
Default: automatically determined based on the system theme.
Determines the colors that will be used to style the output.
Type: boolean
Default: true
If set to false, the method won't print to the console. In this case, you probably want to get the return value of the method and use it.
Prints the provided spans to the console.
Creates a styled text span.
An object, class, HTML element. It shows a preview of the object and an option to expand it to see it's properties. The same thing as console.dirxml(object).
Apply additional styles to all provided spans.
It creates a group using console.group() or console.groupCollapsed() with the provided header and body.
consolePrint(
consoleGroup({
expanded: false, // default "false"
header: "Expand me",
body: "Here I am",
}),
);Note: The method calls consoleFlush() and flushes everything up until now before starting a new group.
Calls console.log() on all spans provided before it. Internally, consolePrint() uses consoleFlush() at the end.
consolePrint(
consoleText('take a look at'),
consoleObject(object),
consoleFlush(),
consoleText('this is a new line and a new console.log() statement')
)backgroundand its longhand equivalentsborderand its longhand equivalentsborder-radiusbox-decoration-breakbox-shadowclearandfloatcolordisplayfontand its longhand equivalentsline-heightmarginoutlineand its longhand equivalentspaddingtext-*properties such astext-transformwhite-spaceword-spacingandword-breakwriting-mode