Media
4 items
Description
API calls, Vue components, and errors explained in plain English. Great for learning Vue, and just as useful once you know it well. ClearVue is Chrome DevTools with the jargon translated. Standard DevTools assumes you already know what you're looking at. ClearVue explains it, while still giving you the raw data one click away. If you're learning Vue, it teaches you as you debug. If you've been writing Vue for years, it's just a faster way to read a busy network waterfall. WHO IT'S FOR Built for two audiences at once. If you know JavaScript but are still learning Vue, every tab explains what you're looking at instead of assuming you already know. If you've been writing Vue for years, turn off the teaching layer in Settings and you get a fast, well organized inspector with none of the hand holding. Either way, it works on any website, not just Vue ones. API Calls and Problems run fine on plain HTML, React, Angular, whatever you land on. Only the Components tab is Vue specific. ━━━━━━━━━━━━━━━━━━━━━━━━ API CALLS: what the page is asking the server Every request the page makes gets sorted automatically into four groups: your app's own data, framework and build files, third party trackers, and images or media. That alone cuts most of the noise, since a typical page fires off dozens of requests and maybe three of them are actually yours to debug. Click into any request and you get: - A plain English verdict. A 401 doesn't just sit there as a number, it reads "Not logged in. The token is probably missing or expired." A 500 reads "The server crashed while handling this. Not the browser's fault." - What was sent and what came back, unpacked into expandable trees instead of a wall of raw JSON. - Every common header explained on hover, so you're not guessing what Content-Type or Cache-Control actually does. - A one click "Copy as cURL" that reproduces the exact request, with credentials masked by default. COMPONENTS: how the page is built The full Vue component tree, for both Vue 2 and Vue 3, and it keeps working on production builds where the official tooling often goes blank. Select any component and you'll see a plain English description of what it does (85 components are covered out of the box, including most of Vuetify: VBtn is "a button," VDefaultsProvider is "invisible, supplies default prop values to everything beneath it"), a small diagram showing props flowing down and events flowing up, and exactly what was handed to it, what it reports back, and what it's tracking on its own. That props down, events up diagram is the single idea most people are missing when Vue suddenly stops making sense. AUTH: why sign in is broken This is the tab built for the hardest kind of bug: it worked yesterday, it works on your machine, it just silently stopped working for one user. It reads a JWT locally and tells you plainly that a token expired fourteen minutes ago, instead of leaving you to piece that together from a 401. It also catches: - Refresh loops, dead refresh tokens, and 401s the app never even tried to recover from. - SameSite=None cookies missing Secure, which every modern browser quietly drops. This is the classic reason sign in works on localhost but breaks the moment you deploy. - Third party cookie blocking breaking silent renew, along with what to actually do about it. - OIDC error codes like login_required, invalid_grant, and consent_required translated into plain language with a fix, not just the raw code. - Clock skew, redirect loops, and tokens issued for the wrong audience. Token claims are shown with explanations, and anything personal, like an email address or a user ID, is masked the same way a credential would be. One honest limit: the signature is never verified, since that would need the issuer's private key. ClearVue tells you what a token claims, not whether a server will actually accept it. ACCESS: accessibility problems, traced back to the component that caused them Most accessibility tools hand you a DOM node and a rule number. ClearVue already has the component tree built, so it tells you the unlabeled input came from SearchBar, in SearchBar.vue, turning an audit finding into a file you can actually open and fix. It checks for missing alt text, form fields with no label, buttons and links with no accessible name, heading levels that skip, duplicate IDs, broken ARIA references, untitled iframes, and color contrast, complete with the exact ratio and a suggested passing color. Two limits, stated plainly instead of buried in fine print. Contrast is only reported when the background color is actually knowable, so text over an image or a gradient is marked undetermined instead of guessed at. And automated checks catch roughly a third of real accessibility problems. A clean scan is a floor, not a finish line. PROBLEMS: what went wrong, in plain language "Cannot read properties of undefined" becomes "the data hadn't loaded yet when the template ran," along with the fix. It covers CORS failures, failed fetches, JSON parsing errors, and a dozen of the most common Vue warnings. The raw stack trace is always one click away if you need it. ━━━━━━━━━━━━━━━━━━━━━━━━ SAFE TO SCREEN SHARE Chrome's own Network panel prints your session tokens in plain text, which is a real problem the moment you share your screen or paste a screenshot into a support ticket. ClearVue masks Authorization headers, cookies, API keys, and anything that looks like a secret query parameter, keeping just enough of each so you can still tell them apart. Reveal any single value with a click, only when you actually need it. "Copy as cURL" follows the same rule: the default copy is masked, and copying a live, working command with real credentials is a separate button you have to choose on purpose. NOTHING LEAVES YOUR MACHINE ClearVue asks for zero permissions and zero host permissions. There's no server, no analytics, no account, and no telemetry anywhere in it. Its content security policy sets connect-src to 'none', so the browser itself physically blocks any outbound request from the extension. "Sends nothing anywhere" isn't just a claim in this listing, it's enforced by Chrome whether the code tries to or not. Everything you see is read from the page you already have open, and it's shown only to you. HOW TO OPEN IT 1. Press F12 on any page. 2. Click the "ClearVue" tab along the top (it may be tucked under the » overflow menu). 3. Refresh the page once so ClearVue captures everything from the very start. ClearVue works on any website. On pages that don't use Vue, API Calls and Problems keep working exactly the same. Only the Components tab goes quiet.