@devtools-ds/object-inspector

What is @devtools-ds/object-inspector?

@devtools-ds/object-inspector is a React component library designed to help developers inspect and visualize JavaScript objects in a structured and interactive manner. It is particularly useful for debugging and development tools, providing a user-friendly interface to explore complex data structures.

What are @devtools-ds/object-inspector's main functionalities?

Basic Object Inspection

This feature allows you to inspect a basic JavaScript object. The ObjectInspector component takes a data prop and renders it in a tree-like structure, making it easy to explore nested properties.

import { ObjectInspector } from '@devtools-ds/object-inspector';

const data = {
  name: 'John Doe',
  age: 30,
  address: {
    street: '123 Main St',
    city: 'Anytown',
    country: 'USA'
  }
};

const App = () => (
  <ObjectInspector data={data} />
);

Custom Node Renderer

This feature allows you to customize how each node in the object tree is rendered. By providing a custom nodeRenderer function, you can control the appearance and behavior of each node.

import { ObjectInspector, chromeLight } from '@devtools-ds/object-inspector';

const data = {
  name: 'John Doe',
  age: 30,
  address: {
    street: '123 Main St',
    city: 'Anytown',
    country: 'USA'
  }
};

const customNodeRenderer = ({ depth, name, data, isNonenumerable }) => (
  <span style={{ marginLeft: depth * 10 }}>
    {name}: {typeof data === 'object' ? JSON.stringify(data) : data}
  </span>
);

const App = () => (
  <ObjectInspector data={data} nodeRenderer={customNodeRenderer} theme={chromeLight} />
);

Theming Support

This feature allows you to apply different themes to the ObjectInspector component. The package comes with several built-in themes like chromeLight and chromeDark, which can be applied by passing the theme prop.

import { ObjectInspector, chromeDark } from '@devtools-ds/object-inspector';

const data = {
  name: 'John Doe',
  age: 30,
  address: {
    street: '123 Main St',
    city: 'Anytown',
    country: 'USA'
  }
};

const App = () => (
  <ObjectInspector data={data} theme={chromeDark} />
);

Other packages similar to @devtools-ds/object-inspector

react-json-view

react-json-view is a React component for displaying and editing JSON data. It provides a similar tree-like structure for exploring JSON objects and includes features like in-place editing, copy-paste, and theme support. Compared to @devtools-ds/object-inspector, react-json-view offers more interactivity with the ability to edit the JSON data directly.

react-inspector

react-inspector is a collection of React components for inspecting JavaScript values. It is inspired by the Chrome DevTools and provides a similar interface for exploring objects, arrays, and other data types. While it offers a similar inspection capability, it is more lightweight and focused on providing a minimalistic interface compared to @devtools-ds/object-inspector.

json-inspector

json-inspector is a React component for inspecting JSON data. It provides a collapsible tree view for exploring nested JSON objects and arrays. json-inspector is more focused on JSON data specifically, whereas @devtools-ds/object-inspector is designed to handle a broader range of JavaScript objects.

README

@devtools-ds/object-inspector

An emulation of the Chrome and Firefox object inspector, which allows you to view JavaScript objects in the console.

Installation

npm i @devtools-ds/object-inspector
# or with yarn
yarn add @devtools-ds/object-inspector

Supported Types

JavaScript has a broad and sometimes complicated set of available types. This component attempts to display most types nicely, and we have styles for the following:

export type SupportedTypes =
  | boolean
  | null
  | number
  | string
  | Error
  | symbol
  | undefined
  | Date
  | RegExp
  | object
  | Map<any, any>
  | WeakMap<any, any>
  | Set<any>
  | WeakSet<any>
  | Promise<any>
  | any[]
  | Function;

For types it doesn't know about, the component should try to find a name or string to display.

Usage

Then to use the component in your code just import it!

import { ObjectInspector } from "@devtools-ds/object-inspector";

const data = {
  string: "string",
  boolean: true,
  number: 100,
};

<ObjectInspector data={data} expandLevel={1} sortKeys={true} />;

Callbacks

onSelect

This function is called with the selected AST node (after parsing the data prop with @devtools-ds/object-parser). With the selected node, you're able to traverse up/down the tree, and act on the currently selected node (like displaying additional details about that property).

FAQ

Why is [insert type] type not supported better?

Some types like WeakSet, WeakMap, etc. cannot be easily inspected using the JavaScript APIs. Promises are similar, although there is a workaround using Promise.race that forces most things in this component to be asynchronous. The reason they work nicely in the browsers is because they have access to the JavaScript engine APIs which gives them a lot more control.

If you see a type that is missing and easy to support, feel free to open an issue or PR to add it.

Why does [insert property] property not always match my browser?

I had a goal with this project to look at both the Chrome and Firefox inspectors to ideally support theming based on browser. Sometimes things couldn't be themed simply between the two and compromises were made. For example Chrome mixes a double underscore syntax like __proto__ with a double bracket syntax like [[Entries]]. Firefox is much more consistent with a <prototype> and <entries> syntax so I decided to stick with that. There were some compromises in both directions for consistency.

I'm open to suggestions on ways this can be improved.

Why is [insert property] color slightly different?

For the most part, the colors should be near identical to the browser implementations.

Sometimes there were complicated colors across browsers, where one might take three colors to do what the other does in one. These were basically evaluated case-by-case looking at the added complexity. Sometimes browsers had colors that were really light and had really bad contrast. In the interest of accessibility I sometimes left these a bolder color.

Useful References

• MDN Object Types
• MDN Typed Arrays

Contributors ✨

Thanks goes to these wonderful people (emoji key):

Tyler Krupicka 💻 📖 🎨 🚇 💡 ⚠️

Adam Dierkens 💻 📖 💡 ⚠️

This project follows the all-contributors specification. Contributions of any kind welcome!

Changelog

v1.0.2 (Mon Feb 15 2021)

🐛 Bug Fix

• @devtools-ds/navigation, @devtools-ds/table, @devtools-ds/tree
  • Spacing & Sizing Updates (Tree, Table, Nav) #12 (@tylerkrupicka)

📝 Documentation

• Add Download Shield #11 (@tylerkrupicka)
• @devtools-ds/console, @devtools-ds/dom-inspector, @devtools-ds/diagnostic, @devtools-ds/icon, @devtools-ds/navigation, @devtools-ds/node, @devtools-ds/object-inspector, @devtools-ds/table, @devtools-ds/tree
  • Fix Component All Contributors #10 (@tylerkrupicka)

Authors: 1

• Tyler Krupicka (@tylerkrupicka)