Is there any way to exclude element to be inspected?

[kevinpiac]

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

[kevinpiac]

Here is a small workaround I've found. Not sure it's the best implementation but it does the job for me:

const inspector = new DomInspector({
  root: 'body',
  theme: 'cmsjs-inspector',
});

// Hooking _throttleOnMove method
const originalThrottleOnMove = inspector._throttleOnMove;
inspector._throttleOnMove = function(e) {
  const className = e.target.className;
  if (className.split(' ').indexOf('dom-inspector--avoid') !== -1) {
    return;
  }
  originalThrottleOnMove(e);
};

Here, if the hovered element contains the class dom-inspector--avoid then no highlighting will be performed.

[luoye-fe]

Glad for your attention to this project.

Your suggestion is very interesting!

If your lib not very urgent, I will add this feature in this week.

Also, very welcome to submit a PR.

[kevinpiac]

@luoye-fe thanks for your feedback. Currently, my workaround does the job for me so I can wait for your update :)

I think providing a 'recursive' option could also be great to handle dom-inspector's behavior on avoided element's children. For example, let say I have this structure:

<div id="root">
   <div class="dom-inspector--avoid">
      <div>I'm the child</div>
   </div>
   <div><span>some content</span></div>
</div>

With my current workaround the div .dom-inspector--avoid will not be highlighted, however its child <div>I'm the child</div> will be. I think we could provide an option to manage this case. Something like:

const inspector = new DomInspector({
	root: 'body',
        except: [
           // here children are avoided
          { selector: '#do-not-inspect-this', recursive: true },
           // here children are highlighted
          { selector: '#do-not-inspect-that', recursive: false }, 
        ],
});

:)

[luoye-fe]

In theory, the except option will not inspect itself and all children.

Well, if use recursive option to avoid this case, will make api so complex.

So if want to inspect children on except parent node, I think we can new another inspector on children.

Just like:

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

const anotherInspector = new DomInspector({
        root: '#do-not-inspect-this>div'
})

[kevinpiac]

@luoye-fe It sounds great! Thanks :)

[luoye-fe]

close it.