Ply
Ply is a lightweight DOM and CSS inspector. It introduces novel CSS analysis techniques to help less-experienced developers inspect and learn from production websites of interest, when existing inspector interfaces are too overwhelming. Ply is research software, initially under development through Design, Technology, and Research at Northwestern University.
Several of Ply's core features have been released as Inactive CSS in Mozilla Firefox 70. Give it a try! You can also read our award-winning UIST 2018 paper, Ply: A Visual Web Inspector for Learning from Professional Webpage, or watch the talk.
Novel features
In order to help less-experienced developers navigate the complex DOM and CSS structures found on production webpages, Ply implements the following novel features:
Visual relevance pruning (CHI 2017 SRC paper, talk): While inspecting the styles for an element, users can click a button to dynamically rule out styles with no visual impact on the page. Useful for reverse-engineering how certain visual effects are achieved, without wasting time on irrelevant properties.
Implicit dependencies (UIST 2018 paper, talk, slides): Many CSS properties depend upon each other in unintuitive ways (e.g. z-index does not apply if position is static). Ply uses visual relevance pruning to test for implicit dependencies, and provides explanatory tooltips to reinforce the relationships between properties.
DOM component isolation: Rather than viewing the entire DOM at all times, users can select a node on the target webpage, and inspect only its subtree. Useful for inspecting a component of interest.
Additional features under development include:
Multiple element inspection: Click on multiple elements in the DOM viewer to inspect their styles side-by-side. Useful for exploring parent-child relationships, positioning contexts, or many other interactions between CSS properties on distinct elements.
Style organization cues: Using visual regression pruning, Ply can heuristically identify when a CSS rule serves as a "base style" for multiple elements on the page, and when another rule serves as a "refinement" style on top of shared base styles. Useful for understanding how professionals structure their CSS to minimize repetition and capture visual similarities and differences between elements.
github地址：https://github.com/sliminality/ply