https://github.com/kozmozio/x-debug-css

CSS Debugger Tool
https://github.com/kozmozio/x-debug-css

css debug html js tool

Last synced: 5 months ago
JSON representation

CSS Debugger Tool

• Host: GitHub
• URL: https://github.com/kozmozio/x-debug-css
• Owner: kozmozio
• License: mit
• Created: 2022-10-25T14:15:43.000Z (over 3 years ago)
• Default Branch: main
• Last Pushed: 2024-10-14T08:56:52.000Z (over 1 year ago)
• Last Synced: 2025-04-07T01:51:28.714Z (about 1 year ago)
• Topics: css, debug, html, js, tool
• Language: JavaScript
• Homepage:
• Size: 86.9 KB
• Stars: 2
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          
# X Debug CSS

 This is a CSS debugger tool for visual abstraction of DOM elements of the current HTML page.

 We have been using this tool for every web project, and find it very useful for frontend development.

 **JS Version is all included** with necesarry CSS styles and code.

  **Keyboard Controls:**

  **Shift + D :** Enables blueprint debugger

  **Shift + X :** Enables outlined debugger

  Twitter login section sample :

  

## Three ways to use:

  1. **Include JS :**

  Add x-debug-css.js to your project scripts (Recommended)

  ~~~

  

  ~~~

  Use it for project development with ease

  2. **Include CSS**

  

  Add x-debug-css.css to your project styles

  ~~~

    

  ~~~

 Needs to add and remobe .x-debug-css class to your body style manually.

  3. **Use bookmarklet**

    Use as bookmarklet on your Chrome toolbar. Click and inspect any website!

    - Save bookmark.html to your computer and open.

    - Bookmark this local page ( file may be  delete later )

    - 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

    - Edit your bookmark in Chrome and change URL with copied link URL 

    - Save and close.

    

    Your x-debugCSS bookmarklet is ready 🖖🏼

    Click [bookmark] for any page you want to X Debug CSS layout.

Project is derived and utilized from @zaydek's debug-css library.