@sparanoid/dom-inspector v1.2.7

DomInspector

Dom inspector like chrome dev tools.

Usage

Install dom-inspector

npm install dom-inspector --save

<script type="text/javascript" src="./dist/dom-inspector.min.js"></script>

const DomInspector = require('dom-inspector');

import DomInspector from 'dom-inspector';

New instance

const inspector = new DomInspector();

Instance options

const inspector = new DomInspector({
	root: 'body',
	exclude: ['#exclude>div', document.querySelector('.exclude')],
  theme: 'you-custom-theme-class',
  maxZIndex: '', // max z index, if blank, will auto get document.all max z index
  transformInput: (className) => {
    // Example: Remove module hashes from class names
    return className.replace(/\_\_[A-Za-z0-9]+/g, '');
  },
  transformOutput: (classes) => {
    // Example: Remove all 'js-' prefixed classes
    return classes.split(' ')
      .filter(c => !c.startsWith('.js-'))
      .join('');
  },
  onClick: (classes) => {
    console.log('Clicked element classes:', classes);
  },
  destroyOnClick: true
});

• root

  	Dom inspector root element. `String` or `Dom`, default `body`.

• exclude

  	Not inspect some elements. `String` or `Dom` Array.

• theme

  	Inspector overlay style. You can custom overlay background color as follow.
  
  	```css
  	.you-custom-theme-class .margin {
  		background-color: blue;
  	}
  
  	.you-custom-theme-class .border {
  		background-color: red;
  	}
  
  	.you-custom-theme-class .padding {
  		background-color: green;
  	}
  
  	.you-custom-theme-class .content {
  		background-color: gray;
  	}
  
  	```
  
  	Don`t forget background color opacity. ^_^

• onClick

  Callback function that gets triggered when clicking on an inspected element. Receives the processed classes string as argument.

  const inspector = new DomInspector({
    onClick: (classes) => {
      console.log('Clicked element classes:', classes);
    }
  });

• destroyOnClick

  Automatically destroy the inspector after clicking an element. Default is false.

  const inspector = new DomInspector({
    onClick: (classes) => {
      console.log('Selected classes:', classes);
    },
    destroyOnClick: true // Inspector will be destroyed after clicking
  });

Attribute list

• inspector.target

  	Inspecting element.

API list

• inspector.enable()

  	Display overlay `block` and addEventListener `mousemove`.

• inspector.pause()

  	RemoveEventListener `mousemove`, pause inspector.

• inspector.disable()

  	RemoveEventListener `mousemove`, display overlay `none`.

• inspector.destroy()

  	`disable()` and remove overlay.

• inspector.getXPath([ele])

  	Return ele XPath.

• inspector.getSelector([ele])

  	Return ele selector.
  
  	`html>body>div:nth-of-type(9)`

• inspector.getElementInfo([ele])

  	```js
  	return {
  		top: '',
  		left: '',
  		width: '',
  		height: '',
  		'padding-top': '',
  		'padding-right': '',
  		'padding-bottom': '',
  		'padding-left': '',
  		'border-top-width': '',
  		'border-right-width': '',
  		'border-bottom-width': '',
  		'border-left-width': '',
  		'margin-top': '',
  		'margin-right': '',
  		'margin-bottom': '',
  		'margin-left': ''
  	};
  	```