{"id":22396848,"url":"https://github.com/kozmozio/x-debug-css","last_synced_at":"2026-01-26T22:45:15.678Z","repository":{"id":213341986,"uuid":"557344240","full_name":"kozmozio/x-debug-css","owner":"kozmozio","description":"CSS Debugger Tool","archived":false,"fork":false,"pushed_at":"2024-10-14T08:56:52.000Z","size":89,"stargazers_count":2,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-04-07T01:51:28.714Z","etag":null,"topics":["css","debug","html","js","tool"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/kozmozio.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,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2022-10-25T14:15:43.000Z","updated_at":"2024-02-06T15:06:36.000Z","dependencies_parsed_at":null,"dependency_job_id":"c31a4d07-dbb9-4693-88c8-d6174262ebe8","html_url":"https://github.com/kozmozio/x-debug-css","commit_stats":null,"previous_names":["kozmozio/x-debug-css"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/kozmozio/x-debug-css","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kozmozio%2Fx-debug-css","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kozmozio%2Fx-debug-css/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kozmozio%2Fx-debug-css/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kozmozio%2Fx-debug-css/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/kozmozio","download_url":"https://codeload.github.com/kozmozio/x-debug-css/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kozmozio%2Fx-debug-css/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":268039868,"owners_count":24185809,"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","status":"online","status_checked_at":"2025-07-31T02:00:08.723Z","response_time":66,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":["css","debug","html","js","tool"],"created_at":"2024-12-05T06:09:30.135Z","updated_at":"2026-01-26T22:45:15.646Z","avatar_url":"https://github.com/kozmozio.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# X Debug CSS\n\n This is a CSS debugger tool for visual abstraction of DOM elements of the current HTML page.\n\n We have been using this tool for every web project, and find it very useful for frontend development.\n\n\n **JS Version is all included** with necesarry CSS styles and code.\n\n  **Keyboard Controls:**\n\n  **Shift + D :** Enables blueprint debugger\n\n  **Shift + X :** Enables outlined debugger\n\n  Twitter login section sample :\n\n  \u003cimg src=\"https://github.com/kozmozio/x-debug-css/blob/main/sample-twitter-login.png?raw=true\" width=\"300\"/\u003e\n\n\n## Three ways to use:\n\n\n  1. **Include JS :**\n\n  Add x-debug-css.js to your project scripts (Recommended)\n\n  ~~~\n  \u003cscript src=\"./x-debug-css.js\" type=\"text/javascript\" language=\"javascript\"\u003e\u003c/script\u003e\n  ~~~\n\n  Use it for project development with ease\n\n  2. **Include CSS**\n  \n  Add x-debug-css.css to your project styles\n\n  ~~~\n    \u003clink href=\"./x-debug-css.css\" rel=\"stylesheet\" /\u003e\n  ~~~\n\n Needs to add and remobe .x-debug-css class to your body style manually.\n\n\n  3. **Use bookmarklet**\n\n    Use as bookmarklet on your Chrome toolbar. Click and inspect any website!\n\n    - Save bookmark.html to your computer and open.\n    - Bookmark this local page ( file may be  delete later )\n    - Copy link address on text [javascript:var style=document.createElement('style');style.innerHTML=` .debug-css :not(g):not(path){color: hsla(210, 80%, 100%, 0.9) !important; background: hsla(210, 80%, 50%, 0.5) !important; outline: solid 0.125rem hsla(210, 80%, 100%, 0.5) !important; box-shadow: none !important; filter: none !important;}.debug-css-outlined :not(g):not(path){outline: 1px solid red !important;; box-shadow: none !important; filter: none !important;}`;document.head.appendChild(style);document.documentElement.classList.toggle('debug-css');](x-debugCSS)  right mouse click\n    - Edit your bookmark in Chrome and change URL with copied link URL \n    - Save and close.\n    \n    Your x-debugCSS bookmarklet is ready 🖖🏼\n\n    Click [bookmark] for any page you want to X Debug CSS layout.\n\n\n\nProject is derived and utilized from @zaydek's debug-css library.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkozmozio%2Fx-debug-css","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkozmozio%2Fx-debug-css","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkozmozio%2Fx-debug-css/lists"}