inspector-elements v0.1.0

inspector-elements

Web components for visually inspecting objects.

Embed inspectors similar to Chrome's devtools inspectors in your web app. Works in any framework!

Object Inspector (<ix-object-inspector>)

DOM Inspector (<ix-dom-inspector>)

Table Inspector (<ix-table-inspector>)

Install

npm i inspector-elements

Usage

Getting started

1. Import the elements:

   import 'inspector-elements';

2. Create an element: You can create an element in any way: DOM APIs, frameworks, template systems, etc.

   const inspector = document.createElement('ix-object-inspector');

3. Set the data:

   inspector.data = {foo: 'bar'};

Elements

<ix-object-inspector>

Shows the properties and values of an object in a navigable tree.

Example (Lit template syntax):

const data = {
  string: 'foo',
  number: 42,
  array: [7, 8, 9],
  object: {foo: 'bar'},
};
return html`<ix-object-inspector .data=${data}></ix-object-inspector>`

Properties

• data: any: Any value to inspect
• name: string: Optional name of the root object
• expandLevel: number: An integer specifying to which level the tree should be initially expanded
• expandPaths: string | Array<string>: An array containing all the paths that should be expanded, or a string of just one path
• showNonenumerable: boolean: Whether to show non-enumerable properties
• sortObjectKeys: boolean | ((a: PropertyKey, b: PropertyKey) => number): Sort object keys with optional compare function

<ix-dom-inspector>

Shows DOM elemets with attributes and children in a navigable tree.

Example (Lit):

const data = document.querySelector('#app');
return html`<ix-dom-inspector .data=${data}></ix-dom-inspector>`;

Properties

• data: Node: Any DOM Node to inspect

<ix-table-inspector>

Displays objects and properties in a table.

Properties

• data: Record<string, unknown> | Array<unknown>: An object or array
• columns: Array<string>: An array of column names to include in the output.

Example (Lit):

const data = ['apples', 'oranges', 'bananas'];
return html`<ix-table-inspector .data=${data}></ix-table-inspector>`;

Styling

Custom CSS Properties

• --ix-base-font-family
• --ix-base-font-size
• --ix-base-line-height
• --ix-base-background-color
• --ix-base-color
• --ix-object-name-color
• --ix-object-value-null-color
• --ix-object-value-undefined-color
• --ix-object-value-regexp-color
• --ix-object-value-string-color
• --ix-object-value-symbol-color
• --ix-object-value-number-color
• --ix-object-value-boolean-color
• --ix-object-value-function-prefix-color
• --ix-object-preview-font-style
• --ix-html-tag-color
• --ix-html-tagname-color
• --ix-html-tagname-text-transform
• --ix-html-attribute-name-color
• --ix-html-attribute-value-color
• --ix-html-comment-color
• --ix-html-doctype-color
• --ix-arrow-color
• --ix-arrow-margin-right
• --ix-arrow-font-size
• --ix-arrow-animation-duration
• --ix-treenode-font-family
• --ix-treenode-font-size
• --ix-treenode-line-height
• --ix-treenode-padding-left
• --ix-table-border-color
• --ix-table-th-background-color
• --ix-table-th-hover-color
• --ix-table-sort-icon-color
• --ix-table-tr-even-background-color
• --ix-table-tr-odd-background-color

Status

This port is very much in progress! Rough first passes of object, dom, and table inspectors are done, but tests and stories are incomplete. There may be many bugs with cases that weren't covered during this initial development.

• Elements
  • <ix-object-inspector>
  • <ix-dom-inspector>
  • <ix-table-inspector>
• Add CSS Parts
• Tests
• Storybook
  • Add Storybook to project
  • Hook up custom properties and attributes
  • Publish static storybook

Acknowledgements

This projecte started as a web components port of the https://github.com/storybookjs/react-inspector