AI product readChrome DevTools extension for debugging and inspecting Vue.js applications
Provides developers with specialized tools to inspect, debug, and profile Vue.js applications directly in Chrome DevTools, which is not possible with standard browser DevTools alone
1. Install extension and navigate to a page with Vue.js. 2. Extension automatically detects Vue.js via content scripts (prepare.js runs at document_start in MAIN world). 3. Extension popup shows Vue detection status (enabled/disabled/Nuxt/VitePress). 4. Open Chrome DevTools and find the Vue panel. 5. Inspect component tree, view component state/props/events, debug application state. 6. Use graph visualization to understand component relationships.
Detects Vue.js presence on web pages and shows detection status in extension popupAdds dedicated Vue panel to Chrome DevTools for component inspectionDisplays component tree hierarchy with parent-child relationshipsInspects component state, props, computed properties, and emitted eventsSupports Vue 2 (with migration guide to Vue 3) and Vue 3 applicationsDetects and provides specialized icons for Nuxt and VitePress frameworks
- Target users
- Vue.js developers / Frontend developers building with Vue.js framework / Developers using Nuxt.js or VitePress / Frontend developers debugging Vue component hierarchies and state
- The extension source code is minified, making some analysis less precise. However, the core architecture is clear from entry files and manifest.
- Cannot verify if external Vue.js ecosystem tools (like Vue DevTools desktop app or VS Code extension) have paid features, but this Chrome extension itself is completely free.
- The large vis.js graph visualization library (1.9MB) contains many false positive keyword matches that are part of the library code, not the extension's own functionality.
MonetizationNo paid features detected
Vue.js devtools is a completely free, open-source developer tool (GitHub: vuejs/devtools). There are no payment mechanisms, subscription models, feature gating, or upgrade prompts anywhere in the codebase. The 'pro' keyword matches are all false positives hitting Vue component 'props' properties and Object.prototype methods. The extension has no integration with payment platforms, no billing APIs, and no premium feature indicators.
- Confidence
- 95
- Payment platform
- --
- Source
- AI / High
- Login required
- No
- Reason
- Vue.js devtools is a local browser extension that works entirely within Chrome DevTools without requiring any user authentication or account creation. The extension operates by injecting scripts into pages to detect Vue.js instances and communicate with a devtools panel. No login UI, authentication flows, or account management features exist in the codebase. The keyword matches for 'token', 'session', 'account', and 'auth' are all false positives from the vis.js graph visualization library (HammerJS touch sessions), DOM token lists, MIT license text, and mathematical comments like 'accounting for the positions'.
version 6.6.1 在控制台打开后没多久,chrome的内存占用高达9G多,导致浏览器卡死,没法响应操作。 反复试了两次,都是如此。 Vue页面是通过官方CLI生成的初始Demo,并未改动。
必须重新打开工作台,才能显示组件及各种功能,真服了。
莫名其妙不显示不显示
RIght now it barely works, even that this tool should just show the values stored by vue, it also somehow.... updates the dom? At least it did in my case and I dont know why or how. At this current version, its terrible and unusable.
新版本,不知道为什么,打开vue-router的其他页面,vue开发者工具的组件并未更新,指向的也不是当前的dom,只能控制台重新打开才行。
6.61版本有问题。有时候莫名其妙失效 不显示。
Latest version 6 is terrible. When it isn't frozen, functionalities are broken. I used previous versions (5.x) of this extension for vue 2 and it worked really good, now with vue 3 this is unusable.
Its not working on my Chrome Version 122.0.6261.69 , i am using chrome on windows 11
不知道大家有没有和我一样的,最新6.6.1版本点击开发者工具时经常不显示,有时候能出现vue面板,有时候又没有,刷新好几次页面才出现vue开发面板,经常凭空消失 ------- 2024年03月18日更新: 6.6.1版本看来很多人都说不好用,这里推荐chrome应用商店其他的插件:Vue.js devtools - UI Customized,应该是之前的6.5.1版本,还是旧版本用起来舒服,有需要可以搜索安装一下
经常卡死崩溃,只能关掉浏览器调试界面重新打开才能恢复