2

I am attempting to make an inspect element-like tool using JS. In most browser's inspect tools you are able to hover over elements on the page and click them to show where they are in the website's code. The only way I can think of simulating this is to add event listeners to every element on the page. I feel that this is bad for a lot of reasons. Is there any other way I can do this? If not, would adding event listeners to every element on the page be a good idea?

luek baja
  • 1,130
  • 3
  • 16
  • You can use [event delegation](https://stackoverflow.com/questions/1687296/what-is-dom-event-delegation) which allows you to attach one event listener to a common parent, like `body` for example, and still be able to handle it for all descendants of that parent element. – ibrahim mahrir Jun 20 '20 at 22:39
  • I just had a problem with event propagation and I still didn't think of this. But if an element has a `stopPropagation` function attached to it would this method still work? – luek baja Jun 20 '20 at 22:57
  • Well don't use it in this particular event handler. – ibrahim mahrir Jun 20 '20 at 23:34
  • 3
    Here is an example: https://jsfiddle.net/1jvdacrk/2/ It has dual mode (you can both highlight from the dom tree on the left and the page itself on the right). The code is a bit messy and it should be optimized and cleaned but the idea is there. – ibrahim mahrir Jun 21 '20 at 00:59
  • 1
    Note that back in the days, before browsers implement their own dev-tools, we were using a script called *firebug*. There was a lite version running directly in the page, you may want to check [their source code](https://github.com/firebug/firebug-lite) if you really want to make this kind of project. – Kaiido Nov 27 '20 at 03:23

0 Answers0