granite-inspector - Vaadin Add-on Directory
A lit-element based version of react-inspector
# \
A custom element, [lit-element](https://github.com/Polymer/lit-element) based, version of [react-inspector](https://github.com/xyc/react-inspector/)
Power of [Browser DevTools](https://developers.google.com/web/tools/chrome-devtools/) inspectors right as a custom element.
> ## � Status: In Development
> `granite-inspector` is currently in development. We encourage you to use it and give us your feedback, but there are things that haven't been finalized yet and you can expect some changes.
[](https://www.npmjs.com/package/@granite-elements/granite-inspector)
[](https://www.webcomponents.org/element/@granite-elements/granite-inspector)
## Usage example
```html
`
- DOM and table mode are under active development
### <granite-inspector-object />
Like `console.log`. Consider this as a glorified version of `
JSON.stringify(data, null, 2)`. ###### How it works Tree state is saved at root. If you click to expand some elements in the hierarchy, the state will be preserved after the element is unmounted. #### API The component accepts the following props: #### `data {Object}`: the Javascript object you would like to inspect #### `name {String}`: specify the optional name of the root node, default to `undefined` #### `expandLevel {Number}`: an integer specifying to which level the tree should be initially expanded. #### `expandPaths {String|Array}`: an array containing all the paths that should be expanded when the component is initialized, or a string of just one path - The path string is similar to [JSONPath](http://goessner.net/articles/JsonPath/). - It is a dot separated string like `$.foo.bar`. `$.foo.bar` expands the path `$.foo.bar` where `$` refers to the root node. Note that it only expands that single node (but not all its parents and the root node). Instead, you should use `expandPaths={['$', '$.foo', '$.foo.bar']}` to expand all the way to the `$.foo.bar` node. - You can refer to array index paths using `['$', '$.1']` - You can use wildcard to expand all paths on a specific level - For example, to expand all first level and second level nodes, use `['$', '$.*']` (equivalent to `expandLevel={2}`) - the results are merged with expandLevel #### `showNonenumerable {Boolean}`: show non-enumerable properties. #### `sortObjectKeys {Boolean|Function}`: Sort object keys with optional compare function. #### `nodeRenderer {Function}`: Use a custom `nodeRenderer` to render the object properties (optional) - Instead of using the default `nodeRenderer`, you can provide a custom function for rendering object properties. The _default_ nodeRender looks like this: ```javascript import './granite-inspector-object-label'; import './granite-inspector-object-root-label'; const defaultNodeRenderer = ({ depth, name, data, isNonEnumerable }) => { return html` ${depth === 0 ? html`