luoye-fe/dom-inspector

Dom inspect like chrome dev tools.

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

dom-inspector's Issues

Error Can't call method on [object HTMLALLCollection]

Hello, when I try to init the object, it throws this error: Can't call method on [object HTMLAllCollection]. Does anyone have any idea about this? Thank you

Below is the script that caused this fatal error.
inspector = new DomInspector({root: 'body'});

Adding cursor: pointer to default or custom style isn't working

Other custom styles are working perfectly, but adding cursor: pointer; isn't working at all, even if I use the * selector or adding !important. It always shows the default cursor used for the inspected element i.e. input shows text cursor and buttons show the pointer.

What I want to achieve is having a pointer cursor when inspecting each element

TypeScript support?

I got the following error when use this package in a TypeScript project:

Could not find a declaration file for module 'dom-inspector'. '/Users/user/workspace/project/node_modules/.pnpm/[email protected]/node_modules/dom-inspector/dist/dom-inspector.min.js' implicitly has an 'any' type.
  Try `npm i --save-dev @types/dom-inspector` if it exists or add a new declaration (.d.ts) file containing `declare module 'dom-inspector';`ts(7016)

How to attach node-inspector to page loaded in iframe or object?

First must say, great job!

I am trying to inspect page loaded to my Angular component in iframe or , but I can't get that done. I have tried to set root to #pageFrame but still it inspects whole component.

Any ideas how do I do this?

Is there any way to exclude element to be inspected?

Hey, thanks for this lib, you did a great job!

Use Case:

I'm creating a lib which creates a kind of online inspector for the current website when my script is injected on the browser. In order words, when a user adds my script to its website, it injects a kind of toolbar allowing him to perform some actions such as activating or deactivating the dom-inspector.
Since I can't know in advance the website structure, I set by default the dom inspector root target as body. This work well except that when the inspector is activated it also inspect my injected toolbar which is a behavior I would like to avoid.

Question:

Is there any way to give 'non-inspectable elements selectors' during the initialization of the inspector?
Something like:

const inspector = new DomInspector({
	root: 'body',
        except: ['#do-not-inspect-this', '.nor-this'],
});

I'm almost sure it's not possible right now, but do you have any hint about how to implement it, and are you open to an eventual pull request?

Thanks in advance for considering my request :)

prevent click event on selected element

Hi there,

Thank you for making this cool project.
is it possible to somehow disable the click event when an element is selected?

Thanks

More precise selection

Hi,
I'm using the dom inspector and it works great!
I have a question about specificity. sometimes i get a selector back from the inspector that selects multiple elements.
For example if i select an image on digg.com, i get this back:
html>body>section>section>section:nth-of-type(2)>div>div>article>a>picture>img

while my chrome devtools gives back:
body > section.frontpage > section.live-pull.frontpage > section:nth-child(2) > div > div:nth-child(1) > article > a > picture > img

which returns 1 element.
I hope my question is clear :)
Is there any way to increase the specificity so it will always return 1 element?

Thanks, Jonathan

Unable to inspect iframe with same origin

Hi, I'm trying to use dom-inspector to inspect elements within an iframe that has the same origin. I've confirmed that I have access to this iframe using the following code, passing in the iframe element:

function canAccessIFrame(iframe) {
    var html = null;
    try { 
      // deal with older browsers
      var doc = iframe.contentDocument || iframe.contentWindow.document;
      html = doc.body.innerHTML;
    } catch(err){
      // do nothing
    }

    return(html !== null);
}

I'm able to see the dom-inspector object in the dev tools and it has the iframe I am expecting as its "root"property, but there is no highlighting happening.
The minified js file is hosted and loaded via a script tag on the parent page.

[Feature Request] click event callback

Hi @luoye-fe can I request a click event callback ? it will return the callback with inspector.target

thank you

Consider to add open-source license?

Looks like an amazing tool.
Can you please add GPL or MIT license so we can use it?

Is it possible to highlight all elements with a given css selector?

How to exclude all childs of a class ?

Hi,
As indicated in the title how to exclude all childs of a class.
Currently if I do exclude:['.myclass','.myotherclass'] only the element who has the defined classes are exclude but not the childrens.
How to do that ?
Best regards,

Get target element id of a page in same domain in iframe during inspect

@luoye-fe Thanks for this wonderful module, I am trying to get element details of inspected id's inside an iframe, as of version 1.2.3 inspector is working fine inside the iframe, how do I identify the element details as I hover over them in the iframe.

this is what I have

    document.getElementById("iframe").onload = () => {
      const inspector = new DomInspector({
        // get iframe element by `contentWindow`
        root: document.getElementById("iframe").contentWindow.document.querySelector('body'),
        //exclude: ['#exclude>iframe', document.querySelector('.exclude')],
        maxZIndex: 99
      });

      inspector.enable();

    }