All Projects → benscabbia → X Ray

benscabbia / X Ray

Licence: gpl-2.0
Visual debugger for your HTML, executable via a bookmark

Programming Languages

javascript
184084 projects - #8 most used programming language

Projects that are alternatives of or similar to X Ray

Bookmarks.dev
Bookmarks and Code Snippets Manager for Developers & Co
Stars: ✭ 218 (+15.96%)
Mutual labels:  bookmark, frontend
Ply
CSS inspection aided by visual regression pruning
Stars: ✭ 370 (+96.81%)
Mutual labels:  debugger, frontend
Gdbgui
Browser-based frontend to gdb (gnu debugger). Add breakpoints, view the stack, visualize data structures, and more in C, C++, Go, Rust, and Fortran. Run gdbgui from the terminal and a new tab will open in your browser.
Stars: ✭ 8,339 (+4335.64%)
Mutual labels:  debugger, frontend
Yii2 Debug
Debug Extension for Yii 2
Stars: ✭ 179 (-4.79%)
Mutual labels:  debugger
Wp Nuxt
The module adds WP-API to your nuxt application.
Stars: ✭ 179 (-4.79%)
Mutual labels:  frontend
Justchat
A chat application built with Django channels.
Stars: ✭ 183 (-2.66%)
Mutual labels:  frontend
Front End Performance Checklist
🎮 The only Front-End Performance Checklist that runs faster than the others
Stars: ✭ 13,815 (+7248.4%)
Mutual labels:  frontend
Hackershare
Hackershare is a powerful social bookmarking service and a knowledge-sharing community, with advanced search and tag management feature
Stars: ✭ 178 (-5.32%)
Mutual labels:  bookmark
Zerobranestudio
Lightweight Lua-based IDE for Lua with code completion, syntax highlighting, live coding, remote debugger, and code analyzer; supports Lua 5.1, 5.2, 5.3, 5.4, LuaJIT and other Lua interpreters on Windows, macOS, and Linux
Stars: ✭ 2,255 (+1099.47%)
Mutual labels:  debugger
Dephpugger
Php Debugger to run in terminal to debug your code easily.
Stars: ✭ 181 (-3.72%)
Mutual labels:  debugger
Python Module
Write Nuxt.js applications using Python! [Experimental]
Stars: ✭ 181 (-3.72%)
Mutual labels:  frontend
Angular Tslint Rules
Shared TSLint & codelyzer rules to enforce a consistent code style for Angular development
Stars: ✭ 181 (-3.72%)
Mutual labels:  frontend
Philip2
An Elm to OCaml compiler
Stars: ✭ 182 (-3.19%)
Mutual labels:  frontend
Unityheapexplorer
A Memory Profiler, Debugger and Analyzer for Unity 2019.3 and newer.
Stars: ✭ 179 (-4.79%)
Mutual labels:  debugger
Casper
The default theme for Ghost
Stars: ✭ 2,274 (+1109.57%)
Mutual labels:  ghost
Sublime debugger
Graphical Debugger for Sublime Text using the debug adapter protocol
Stars: ✭ 179 (-4.79%)
Mutual labels:  debugger
Github Stars Manager
Chrome extension that allows you to manage your Github stars with tags, and to create a bookmark folder with all your stars organized by the tags you created
Stars: ✭ 183 (-2.66%)
Mutual labels:  bookmark
Emuto
manipulate JSON files
Stars: ✭ 180 (-4.26%)
Mutual labels:  frontend
Quasar
An experimental rust-to-{wasm,asmjs} frontend framework.
Stars: ✭ 180 (-4.26%)
Mutual labels:  frontend
Stackoverflow Clone
Clone project of a famous Q/A website for developers which is stackoverflow built using MySQL-Express-React-Node 🌐
Stars: ✭ 182 (-3.19%)
Mutual labels:  frontend

x-ray

A simple HTML debugger, executable by bookmark! X-ray, a sub project of 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:

alt text

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: ( 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!

alt text

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].