Q:

How does Chrome inspector / Firebug magnifier UI works

I'm building a Chrome extension that allows users to choose any DOM elements by clicking, like Chrome inspector or Firebug.  To do that, I guess I need to disable all the click events or place transparent mat over the document.   I don't know which way is better, because...   

Disabling(back-up) / Restoring click events seems to be quite complex. 
Using transparent mat over document :  then how can users choose elements by click through the mat?

A:

The Firebug code related to this can be found here:
https://github.com/firebug/firebug/blob/master/extension/content/firebug/html/inspector.js
The mouse events are not backed-up and restored. The event is simply cancelled after it was processed by Firebug.
It indeed overlays the HTML with an element. To get the element under it the Inspector uses the originalTarget. Furthermore it has the CSS property pointer-events set to none.
Sebastian

