CSS inspection aided by visual regression pruning
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.
In order to help less-experienced developers navigate the complex DOM and CSS structures found on production webpages, Ply implements the following novel features:
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.Additional features under development include:
In our needfinding studies, less-experienced developers were frequently overwhelmed by the complexity of the Chrome Developer Tools Element interface.
Accordingly, Ply's user interface has been carefully designed to minimize visual clutter and extraneous cognitive load:
This repository only includes the Ply frontend and proxy server. The system communicates with the target webpage via the Chrome Remote Debugging Protocol; all browser-facing functionality is located in the chrome-remote-css repository.
The prototype implementation of the visual regression pruning algorithm can be found in chrome-remote-css as well.
The following instructions assume familiarity with Git and Node.js tooling. If you're not even sure how to download this project, check out this guide to get up to speed.
Install the chrome-remote-css extension. Ply depends on this extension to debug pages remotely.
Once you've cloned this repository:
yarn install # install dependencies
yarn run server # start the proxy server
yarn start # start the inspector
Then navigate to http://localhost:3000
in Chrome, and you should have a blank inspector.
To start inspecting a webpage, open a new window or tab, and navigate to the site you want to inspect.
Click the browser extension icon to activate chrome-remote-css
, and select an element on the page using the cursor. The element and its subtree should appear in Ply.
Note that you'll need to keep the inspection target tab open, so that Ply can update and request CSS styles as you inspect.
Please file an issue if you encounter any difficulties running the project.