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
});

• 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.

   .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. ^_^

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])

   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': ''
   };

updated

新增onClick事件并阻止冒泡可结合iframe使用做可视化埋点

    const inspector = new DomInspector({
      onClick: ({ tag, xpath, selector }) => {
        try {
          window.parent.postMessage({ type: 'inspectorClick', payload: { tag, xpath, selector }, timestamp: Date.now() }, '*');
        } catch (e) {
          console.error('postMessage to parent failed', e);
        }
      }
    });