igiofjnckcagmjgdoaakafngegecjnkj
When enabled adds outline to all elements on the page, Hold Ctrl and hover to get more detail In the latest version we have addressed the issue where the extension stopped working after mandatory `manifest_version upgrage` from Google. also, we have addressed the issue in which user were unable to see the styling for the bottom most element of the page. we have added tooltip feature which gives a basic styles in tooltip itself. A lightweight extension for Google chrome to show outline of all the element exist on page. while working on web page development the one of the difficult part is to position the element as required and check which element affecting the other one. This chrome extension allows user to see outline on every element of the page. Hold the keyboard Ctrl button and hover element it will show the element details along with the value. Post installation simply click on the extension icon to turn it On or Off. If you are a keyboard shortcut lover like me simply hit `Alt+Shift+C ` key to toggle the extension. This extension works on CSS outline attribute: add the below code snippet in any CSS of a web page The extension does the same the only thing is; it gives different color to different element(s) while the code snippet adds red outline to every element. # Other work and repository [A lightweight customizable plugin for jQuery to show horizontal length in form of vertical progress bar.](https://github.com/pranayjoshicse/VerLim.js) [listed on jqueryscript.net](https://www.jqueryscript.net/other/Simple-Custom-Reading-Indicator-with-jQuery-VerLim-js.html) [Demo](https://www.jqueryscript.net/demo/Simple-Custom-Reading-Indicator-with-jQuery-VerLim-js/)
VisBug
Open source web design debug tools built with JavaScript: a FireBug for designers. - Point, click, move, resize & tinker - Edit or style any page, in any state, like it's an artboard - Inspect styles, spacing, distance, accessibility and alignment - Nitpick layouts & content, in the real end environment, at any device size - Leverage adobe/sketch skills - Edit text, replace images - Design within the chaos: use production or prototypes and the odd states they produce, as artboards and design opportunities - Design while DevTools simulates latency, i18n, media queries, platform constraints, CPUs, screensize, etc - Make more decisions on the front end of your site/app (a11y, responsive, edge cases, etc) - No waiting for developers to expose their legos, just go direct and edit the end state (regardless of framework) and execute/test an idea Give power to designers & content creators, in a place where they currently feel they have little to none, **by bringing design tool interactions and hotkeys to the browser**
daily.dev | Developer News Done Right, in Every New Tab
Developer news, personalized to your stack, in every new tab. Join 400,000+ developers. Free and open source. Open a new tab and your personalized developer feed is already there. Curated from 2,000+ trusted blogs and publications, including GitHub Blog, Hacker News, Dev.to, freeCodeCamp, and hundreds more. Personalized to your interests and tech stack. The more you read, the smarter it gets, because it learns from you and from what over a million other developers find worth reading. 🏆 Product Hunt, Product of the Year ⭐ 18,000+ GitHub stars, fully open source at github.com/dailydotdev WHAT HAPPENS WHEN YOU INSTALL 1️⃣ Open any new tab. Your personalized reading experience is there. Technical articles, tutorials, and community discussions from 2,000+ sources, matched to your stack. 2️⃣ It gets smarter every day. AI personalizes it, and over a million developers help surface what matters. When they upvote, discuss, and share articles, the best content rises and the noise disappears. 3️⃣ Read, upvote, discuss. Every article has a conversation. You're not reading alone. See what others think, add your take, learn from the discussion. 4️⃣ Build a reading streak. Come back tomorrow and the next day. Track your streak, unlock achievements, climb leaderboards, and build a profile that grows over time. 5️⃣ Find your people. Join a Squad around React, DevOps, AI, cloud, mobile, open source, or whatever you care about. Share links, start discussions, learn together. Public or private. Most tools in this space are glorified RSS readers or algorithm-only experiences. daily.dev is different because the community is built in. Developers upvote articles, which teaches the system what actually matters. Not just what's new, but what's good. Discussions add context you can't get from reading alone. The real insight is often in the comments. Squads create focused curation around every topic and language. And AI personalizes on top of all of this, matching content to your specific stack and interests. Think of it as a feed curated by a senior engineer who shares your exact interests. • Personalized reading from 2,000+ sources, powered by AI + community signals • Multiple views: Popular, Upvoted, Discussed, Following • Custom feeds for different interests and stacks • Squads, communities around any topic • Reading streaks, achievements, and leaderboards • DevCard, a shareable developer identity card • Bookmarks with folders • Search across millions of posts • Dark mode and light mode • Available on Chrome, Edge, web app, iOS, and Android 🎯 WHO IS THIS FOR? • Developers who want to stay current without opening 10 sites every morning • Engineers who learn better when they can see what peers think is worth reading • Anyone who wants a daily reading habit that builds over time • Teams that share and discuss technical articles together in private Squads ⚡ YOUR WORKFLOW STAYS INTACT • Open a blank tab anytime, one click, always available • Browse without signing up. Register when you're ready to upvote, comment, or join Squads • Uninstall in 10 seconds if it's not for you • Your data stays yours. Open source, no data selling, ever 🔒 PERMISSIONS AND TRANSPARENCY This extension only replaces your New Tab page. It does: • DON'T track your browsing on other websites • DON'T read or modify content on other pages • DON'T access your browsing history • DON'T inject scripts into any website We only request what's needed to show your reading experience. Fully open source. Verify the code yourself at github.com/dailydotdev Unlock premium features: • Presidential Briefing: a personal agent scans the landscape daily, analyzes 100+ posts, and delivers a concise briefing • Smart Titles: improves clickbait headlines so you know what you're clicking • Clickbait Shield: detects and replaces misleading titles automatically 🌐 OPEN SOURCE AND PRIVACY daily.dev requests only the permissions it needs and never sells your data. GitHub: github.com/dailydotdev Privacy: daily.dev/privacy
HTML Visual Validation
HTML Visual Validation gives you information about the html elements, live, on page. It makes easy to inspect the structure of a page with no need to open the browser console. Just select the type of html tag to outline, on page, and to display a label with basic info. - List the most common html tags - Get info about the tittle and description tags - Display tags id and class attributes - extra info: “alt” attribute value - extra info: tells you if it’s an internal or external link, or a javascript call, and if the “target” attribute is set - Mouse over a tag label to bring it to front *** NEW FEATURES *** - Tag selector is now sensitive to tags available on the page - New "DOM Tree" panel, wich can be used with the tag selector - Click on the tag in the DOM Tree to scroll to the element on the page
Dimensions Inspect | Gridman
Swiss army knife for front-end developers Gridman is the must-have Chrome extension for every front-end developer. This toolkit is crafted to boost your productivity and enhance your coding experience. DOM INSPECTION Instantly inspect DOM elements. Just hover to reveal details of the target and its parent elements, simplifying your analysis and debugging process. PERSISTENT Gridman uniquely persists between host reloads. Click on an element, and maintain your insights even after a page refresh, saving you valuable time and effort. TAILWIND Tailwind developers, rejoice! Easily inspect class sets and see how Tailwind CSS is bringing your designs to life. LAYOUTS Whether you're working with CSS Grid or Flexbox, Gridman displays rows, columns, paddings, margins, and more. Understand and manipulate complex layouts with ease. ANYWHERE Simply click the extension icon to activate this toolkit on any webpage. HOVER Unveil the intricacies of the DOM structure with a mere mouse hover. Visualize and understand how elements are nested and related. JOIN With Gridman you're not just using a tool; you're upgrading your entire development process. Download now and experience a revolution in your front-end development journey! REVIEW Your experience with Gridman matters to me deeply. If you've found it helpful, I'd be incredibly grateful if you could take a moment to share your thoughts in a review. Your feedback not only helps to improve but also assists fellow developers in discovering the benefits of this extension. Thank you for your support and for being a vital part of Gridman supporters! NOT WORKING If something didn't work as expected, I kindly request that you consider reaching out with any questions or issues you might have. I understand that each review, whether positive or negative, offers me an opportunity to learn and improve. However, I also believe in the importance of understanding and resolving any issues through communication. Please feel free to ask me anything at: https://fenvox.com/gridman#ask-section. I'm always here to assist you! LOCAL FILES You are trying it towards local file like 'file:///...' - but nothing shows up? > ANSWER: Gridman , like any chrome extension, will not work on local files. Chrome is not allowing it due to security reasons. And it is correct. You can imagine implications if any chrome extension would be able to access file system on your computer. To use Gridman on local files i'd recommend a tiny http-server which you can get here https://www.npmjs.com/package/http-server