The goggles now support the viewing and editing of computed CSS information. Press C and hold it down to observe the computed CSS style of the element you're hovering over. Properties in yellow have computed values that are different from their immediate parent.
If you want to edit the CSS, you can "pin" the info panel by tapping the space bar. Then you can move your mouse to the different CSS properties and edit them by clicking on values.
These goggles provide a simple, easy way for non-technical people to inspect Web pages, learn about how they are put together, and remix them. They are part of the Hackasaurus backpack.
If you've never used the goggles before, you should start out with Mission One.
Here's the bookmarklet: Web X-Ray Goggles.
Once the goggles are activated, you can use the following keys.
| t | Tear-out page (highly experimental) |
| i | View MDN documentation for element |
| r | Replace/remix selected element |
| delete/backspace | Delete selected element |
| ← | Undo |
| → | Redo |
| ↑ | Ascend to parent element |
| ↓ | Descend from parent element |
| esc | Deactivate goggles |
On May 12, a new experimental Tear-Out Page feature was added to the goggles, which provides the user with HTML source code for the current DOM state of the page being viewed/remixed.
This source code is "relocatable" in that all links have been made absolute, so the page can be hosted on any website. It's also "tranquilized" so that only the appearance and content of the page is preserved, and all script tags are removed.
This feature is intended to make it easier to bridge the gap between the goggles and full-on HTML editing using sites like HTMLpad and JS Bin. It also makes it easier to share one's hacks.
On April 21, a new Firefox add-on making it easy to share screenshots and replicas of hacks made with the goggles was created for use at the NYSCI and Maker Faire Toronto Jams. An example of such a shared hack is Failbook. The add-on is located at the github repository hackasaurus-sharing-addon.
The remix interface's source code was also refactored and made public at a new github repository called mix-master-dialog.
On March 21, a third solo mission was added to the website for the goggles, which introduces users to HTML and guides them through the process of writing their first HTML snippet.
On March 10, two scaffolded solo missions designed for the Digital Media and Learning Conference were added to the website for the goggles.
On February 22, during a hack jam at the Bay Area Video Coalition, the remix interface was improved to provide syntax highlighting via the Ace code editor, DOM visualization, and HTML preview on a per-keystroke basis.
On February 17, prior to a hack jam at YouMedia Chicago, primitive remix and element deletion functionality was added to the goggles, as well as undo/redo.
In late December, a palette was created and integrated into the goggles so that each HTML element type would be highlighted in a different color, making them easier to differentiate.
On December 3, the following screencast was made to introduce the prototype goggles to Drumbeat community members.
After the Drumbeat Festival in Barcelona, work on the goggles began.