Skip to content

DOM inspector

q1800 edited this page Feb 8, 2022 · 9 revisions
Clone this wiki locally

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:

DOM inspector in action

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