ehibkhmgidlhdoajcokijofpccpaaipd
Debug Vue.js apps with component tree, state inspection & real-time monitoring Vue Inspector Pro is a comprehensive Chrome DevTools extension for debugging and inspecting Vue.js applications. It provides real-time component tree visualization, state inspection, props monitoring, computed properties tracking, and performance analysis. Fully offline and free, this tool supports both Vue 2.x and Vue 3.x applications. Perfect for developers who need deep insights into their Vue components, data flow, and application state. Developed by AIO.com.ai to enhance Vue.js development workflow with professional-grade debugging capabilities right in your browser.Retry
Vue.js devtools (beta)
DevTools browser extension for Vue.js Chrome DevTools extension for debugging Vue.js applications. Thank you for trying the Vue.js devtools Beta! If you have any issue, please report them on the GitHub repository. This is the beta channel with a brand-new re-implementation, built with Vue 3. Note the beta channel may cause conflict with the stable version of Vue devtools. If the Vue icon is lit but the Vue tab doesn't show up in devtools, please temporarily disable the stable version and re-open the page.
Vue Devtools Unlocker
Debug Vue apps in production, without touching the source code. A Chrome Extension that enables Vue DevTools in production environments. 🔥 Your Vue.js Debugging Companion for Production Environments! Unlock Vue DevTools for production Vue apps, including component inspection and Pinia store/state visibility for Vue 3 apps. Why Install This Extension? 🛠️ Break Through Limits - Bypass Vue's production mode restrictions on DevTools 🍍 Unlock Pinia Support - View Vue 3 Pinia stores and state in the Pinia inspector inside Vue DevTools when the runtime Pinia instance is available ⏱️ Debug Efficiently - Inspect component hierarchies and state flows in real time 🔌 Zero Configuration - Works out-of-the-box without code changes 🌐 Full Version Support - Seamless compatibility with Vue 2.x & 3.x 📊 Runtime Insights - Auto-detect Vue version and display runtime info ⚡ Lightweight - Minimal overhead, native-like experience Debug third-party Vue applications, such as CMS and SaaS platforms Troubleshoot component and Pinia state issues in production Replicate component rendering problems Inspect Vue 3 application state without changing app code Demonstrate Vue's internal workings for educational purposes
single-spa Vue Force Dev
A browser extension that forces all vue applications into dev mode. Works well together with single-spa. A browser plugin that forces production builds of Vue applications into development mode to make them visible in the Vue Devtools. Optimized for use with single-spa, it handles multiple Vue instances and automatically scans and indexes them on single-spa change events. - Forces Vue apps to run in development mode, enabling Vue Devtools. - Designed to work specifically with single-spa, managing multiple Vue app instances. - Automatically updates the list of Vue apps when single-spa change events occur, ensuring Vue Devtools detects the correct app instances. 1. Install the plugin. 2. Make sure you have the Vue Devtools installed, as our plugin heavily depends on it. 1. After installing both the plugin and Vue Devtools, ensure Vue Devtools is open. 2. As you interact with your single-spa app, the plugin will automatically force Vue instances into development mode and update the app list within your devtools. - This plugin is intended for development environments only and should not be used in production. - Some Vue apps might require additional configuration to be fully compatible with single-spa and this plugin. The core idea and some of the source code for this extension was borrowed from vue-force-dev. Huge shoutout and big thanks to Lory Huang! This plugin is licensed under the MIT License and the source code is publicly available: https://github.com/adamsondavid/single-spa-vue-force-dev
UI Inspector - Visual CSS Editor
Inspect and visually edit elements and their CSS directly on the page for faster design and UI debugging. A Visual CSS Editor for the Browser Elevate your web development and design workflow with UI Inspector, a powerful Chrome extension that lets you inspect, edit, and style any web page visually and in real-time. Skip the hassle of diving into DevTools and make instant adjustments directly on the page. With UI Inspector, you can: - Inspect elements — activate the extension and click on any element to view its attributes. - Edit attributes — modify styles in the visual editor and see changes in real time. - Control typography — adjust font family, size, weight, line height, and letter spacing. - Configure layout and spacing — set margins, paddings, display properties, and alignment. - Enhance backgrounds and shadows — apply custom colors, gradients, background blurs, and shadow effects. - Customize borders — adjust border width, style, color, and radius. - Fine-tune appearance — control opacity, blend modes, and transforms like rotation. - View all changes — see a list of every element you've updated in one place. - Copy CSS — view and copy the compiled CSS of your changes instantly. Unlock UI Inspector PRO and: - Apply changes globally — use the sensitivity slider to automatically apply style changes to similar elements across the page. - Style presets — save any element as a reusable preset and apply it across any website with a single click. - Export as Tailwind, SCSS, or JSX — copy your changes in the code format your project needs. - Export screenshots — capture high-resolution PNG screenshots of individual styled elements. - Export to GitHub — generate a GitHub issue with your design changes compiled to CSS. Who Is UI Inspector For? Web Developers: - Accelerate front-end development: quickly identify and fix layout or styling issues by editing elements on the fly. - Simplify CSS debugging: bypass DevTools with an intuitive, visual editor. - Export production-ready code: copy changes as CSS, Tailwind, SCSS, or JSX directly into your codebase. Web Designers: - Real-time design validation: adjust and perfect designs in the browser to ensure pixel-perfect implementation. - Bridge design and development: collaborate more effectively by directly tweaking live pages. - Save and reuse presets: build a library of reusable styles and apply them consistently across projects. 1. Activate the Extension: click the UI Inspector icon in your browser toolbar or press Alt/Option + Shift + I. 2. Inspect and Edit Elements: hover over any element to select it and instantly view its adjustable styles. 3. Modify Styles Visually: use the intuitive interface to change typography, layout, spacing, backgrounds, borders, shadows, and more. 4. Save and Apply Presets: create style presets for consistent design and apply them to any element on any site. 5. Export and Share: copy CSS in multiple formats, capture screenshots, or export changes as a GitHub issue. Compatible with any Chromium browser that supports the Side Panel API. For best results, ensure your browser supports all required APIs. If installation issues arise, update your browser to the latest version and try again.
