Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/benscabbia/x-ray
Visual debugger for your HTML, executable via a bookmark
https://github.com/benscabbia/x-ray
bookmark css debugger frontend ghost html javascript
Last synced: 3 months ago
JSON representation
Visual debugger for your HTML, executable via a bookmark
- Host: GitHub
- URL: https://github.com/benscabbia/x-ray
- Owner: benscabbia
- License: gpl-2.0
- Created: 2017-04-23T13:39:09.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2019-08-26T17:48:57.000Z (about 5 years ago)
- Last Synced: 2024-07-18T09:59:58.745Z (4 months ago)
- Topics: bookmark, css, debugger, frontend, ghost, html, javascript
- Language: JavaScript
- Homepage: https://benscabbia.co.uk/projects/x-ray
- Size: 13.7 KB
- Stars: 195
- Watchers: 4
- Forks: 7
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# x-ray
A simple HTML debugger, executable by bookmark! X-ray, a sub project of [ghost.css](https://gist.github.com/wernull/e9456b7aba5a3f9f91a6#file-ghost-css), enables you to see the space taken up by each individual element. This is extremely useful to visually see the HTML structure of a website and identify the rogue element that is causing unexpected rendering.
## Demonstration:
The project makes use of the styles from ghost.css, which is what enables you to quickly scan the page for unexpected styling. X-Ray takes Ghost and makes it toggleable by bookmark. There is no longer need to refresh the page (or manually remove the style).
## Usage:
*__Note:__ this is the only page where the toggle will __not function as expected__, as the string matcher will match the code below, causing elements to be incorrectly removed! Try it on all your other tabs, and you shouldn't experience any problems!*
Grab the code below (```x-ray.js```):
```javascript
javascript: ( function () { const xray = document.createElement('style'); xray.innerHTML = "*{background:#000!important;color:#0f0!important;outline:solid #f00 1px!important;}"; const xraysInPage = [...document.body.getElementsByTagName("style")].filter(style => style.innerHTML === xray.innerHTML); if(xraysInPage.length > 0) { xraysInPage.forEach(style => document.body.removeChild(style)); } else { document.body.appendChild(xray) } } )();
```
Now drag it onto your bookmarks, or create a bookmark and paste the code in the URL/location field. Enjoy!
