1
0
mirror of https://github.com/gorhill/uBlock.git synced 2024-11-16 23:42:39 +01:00
9 DOM inspector
q1800 edited this page 2022-02-08 14:39:01 -06:00

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