{"id":13826627,"url":"https://github.com/benscabbia/x-ray","last_synced_at":"2025-07-28T08:42:40.689Z","repository":{"id":92930651,"uuid":"89144578","full_name":"benscabbia/x-ray","owner":"benscabbia","description":"Visual debugger for your HTML, executable via a bookmark","archived":false,"fork":false,"pushed_at":"2019-08-26T17:48:57.000Z","size":14,"stargazers_count":194,"open_issues_count":0,"forks_count":7,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-03-29T20:23:16.987Z","etag":null,"topics":["bookmark","css","debugger","frontend","ghost","html","javascript"],"latest_commit_sha":null,"homepage":"https://benscabbia.co.uk/projects/x-ray","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"gpl-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/benscabbia.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null}},"created_at":"2017-04-23T13:39:09.000Z","updated_at":"2024-11-25T04:56:19.000Z","dependencies_parsed_at":null,"dependency_job_id":"3f71d209-3a6e-47fa-a81b-7da780b7ac14","html_url":"https://github.com/benscabbia/x-ray","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/benscabbia%2Fx-ray","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/benscabbia%2Fx-ray/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/benscabbia%2Fx-ray/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/benscabbia%2Fx-ray/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/benscabbia","download_url":"https://codeload.github.com/benscabbia/x-ray/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":250344753,"owners_count":21415175,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["bookmark","css","debugger","frontend","ghost","html","javascript"],"created_at":"2024-08-04T09:01:41.452Z","updated_at":"2025-04-23T00:22:45.398Z","avatar_url":"https://github.com/benscabbia.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":" # x-ray\n\nA 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. \n\n## Demonstration:\n![alt text](http://i.imgur.com/ZycRj7m.gif \"x-ray demonstration\")\n\nThe 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). \n\n## Usage: \n*__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!*\n\nGrab the code below (```x-ray.js```):\n```javascript\njavascript: ( 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 =\u003e style.innerHTML === xray.innerHTML); if(xraysInPage.length \u003e 0) { xraysInPage.forEach(style =\u003e document.body.removeChild(style)); } else { document.body.appendChild(xray) } } )();\n``` \n\nNow drag it onto your bookmarks, or create a bookmark and paste the code in the URL/location field. Enjoy!\n\n![alt text](http://i.imgur.com/o9dhThH.gif \"x-ray configuration\")\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbenscabbia%2Fx-ray","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbenscabbia%2Fx-ray","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbenscabbia%2Fx-ray/lists"}