responsively-app/desktop-app/lib/dom-inspector
2020-05-28 18:04:13 +05:30
..
build Formatting fixed 2020-03-14 13:35:02 +05:30
dist Formatting fixed 2020-03-14 13:35:02 +05:30
document Added modified dom-inspector library 2019-08-27 22:31:38 +05:30
src lint updated 2020-05-28 18:04:13 +05:30
test Formatting fixed 2020-03-14 13:35:02 +05:30
.babelrc lint updated 2020-05-28 18:04:13 +05:30
.eslintignore Added modified dom-inspector library 2019-08-27 22:31:38 +05:30
.eslintrc.js Formatting fixed 2020-03-14 13:35:02 +05:30
.gitignore Added modified dom-inspector library 2019-08-27 22:31:38 +05:30
CHANGELOG.md Added modified dom-inspector library 2019-08-27 22:31:38 +05:30
LICENSE Added modified dom-inspector library 2019-08-27 22:31:38 +05:30
package.json Bump eslint from 3.19.0 to 4.18.2 in /desktop-app/lib/dom-inspector 2020-03-18 14:16:43 +00:00
README.md Added modified dom-inspector library 2019-08-27 22:31:38 +05:30
yarn.lock Merge pull request #77 from manojVivek/dependabot/npm_and_yarn/desktop-app/lib/dom-inspector/is-my-json-valid-2.20.0 2020-05-01 18:12:06 +05:30

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