@devtools-ds/dom-inspector

@devtools-ds/dom-inspector

An emulation of the Chrome and Firefox DOM inspector, built on the @devtools-ds/tree component.

Installation

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

Usage

import { DOMInspector } from "@devtools-ds/dom-inspector";

const div = document.createElement("div");
const html = `
      <!--This is a comment-->
      <span>A span</span>
      <button type="submit" class="btn">Submit</button>
`;
div.insertAdjacentHTML("beforeend", html);

export const Custom = () => <DOMInspector data={div} expandLevel={2} />;

Useful References

• MDN Empty Elements
• MDN HTML Node Types
• W3Schools DocType Reference

Contributors ✨

Thanks goes to these wonderful people (emoji key):

Tyler Krupicka 💻 📖 🎨 🚇 💡 ⚠️

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

Changelog

v0.130.3 (Sun Jan 24 2021)

⚠️ Pushed to master

• set npmrc token (@tylerkrupicka)
• @devtools-ds/docs, @devtools-ds/storybook-theme-addon, @devtools-ds/storybook-utils
  • stop docs packages from publishing (@tylerkrupicka)

Authors: 1

• Tyler Krupicka (@tylerkrupicka)

---

(Sun Jan 24 2021)

⚠️ Pushed to master

• update npmrc (https://github.com/tylerkrupicka)
• remove verbose logging (https://github.com/tylerkrupicka)
• update npm url (https://github.com/tylerkrupicka)
• remove registry from lerna (https://github.com/tylerkrupicka)
• release to npm (https://github.com/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, @devtools-ds/docs, @devtools-ds/object-parser, @devtools-ds/storybook-theme-addon, @devtools-ds/storybook-utils, @devtools-ds/themes
  • set access in package json (https://github.com/tylerkrupicka)

📝 Documentation

• Pages #2 (https://github.com/tylerkrupicka)
• Circleci Setup #1 (https://github.com/tylerkrupicka)

Authors: 1

• Tyler Krupicka (@tylerkrupicka)

---