DOM inspector (original) (raw)

uBlock Origin (uBO) comes with its own custom DOM inspector, to assist in the creation of cosmetic filters, as a complementary tool to the element picker and the logger. It can be accessed by clicking the </> icon in the logger:

A custom DOM inspector -- rather than creating hooks into the browser's own DOM inspector -- has benefits:

• Portability: does no depend on specific browser API.
• Optimal: the UI is optimized to specifically deal with cosmetic filters.

Whereas the element picker is useful to interactively create cosmetic filters through point-and-click, the DOM inspector is useful to create cosmetic filters through the internal structure of the document in your browser. For instance this allows:

• To create very specific cosmetic filters by selecting an element directly in the DOM hierarchy.
• To create exception cosmetic filters.

Creating cosmetic filter exception:

• Locate the filter (red text) by moving mouse around in DOM inspector tree (elements on page should highlight, you will clearly see elements previously hidden now highlighted in red)
• Click on it (hidden element highlighting should change to green)
• Click on save icon in DOM inspector toolbar (floppy disk)
• Reload page