Media
5 items
Description
Live reload A/B test variations and visually edit experiments from the AvsB dashboard Build and debug A/B tests directly on your live site. AvsB Dev Tools is the official browser extension for the AvsB experimentation platform. It turns any page you can open in your browser into a workbench for designing variations, switching traffic on the fly, and watching exposures, clicks, and custom goals fire in real time. The extension is built for two audiences who normally need different tools: CRO consultants and marketers who want to change a headline or hide a nav link without writing code, and the developers who own the codebase the experiments ship into. Visual editor — point, click, ship. Open the popup, pick a variation, click Edit. The editor mounts directly on top of your live page using the browser's native popover + top-layer + shadow DOM, so it sits cleanly above any sticky header, fullscreen element, or stacking context the page might create — and your site's CSS can never bleed into the editor (or vice versa). Inside the editor: Click any element to select it. A 2 px outline, corner tag, and floating action popover appear instantly with Edit text, Replace image, Move, Duplicate, Hide, Delete. A right-hand inspector fills in with the element's content, image, typography, appearance, spacing, attributes, and an Advanced section for variation CSS and inserted HTML. A left-hand Changes panel lists every edit in the variation as a before-to-after diff card, grouped by element and kind. Per-row undo, full Reset, and a built-in element search. A switchable Accessibility tab runs axe-core against the page and surfaces contrast, alt-text, and heading-order findings inline with severity badges. A bottom DOM breadcrumb lets you jump selection to any ancestor, with a copyable preview-link chip and an autosave indicator. Edit text without losing your formatting. Double-click any text to edit it inline. Selecting a range pops a B / I / U / Link / Code toolbar above it. If you edit Hello world! to Goodbye world!, the wrapped <strong>world</strong> survives automatically. If your edit would force a flatten, you see a Confirm Overwrite modal with a two-column diff before save — no silent loss. Honest device preview. Switching to tablet or mobile mounts your page inside an iframe sized to the device viewport, with X-Frame-Options and frame-ancestors headers stripped only for your active tab. Media queries actually fire, touch events register, and edits persist across device modes. Custom widths and orientation rotation are built in. AI assist on copy and style. A "Suggest variations" button on any text field returns three on-brand rewrites with different tones. A "Match brand from screenshot" action lets you upload a brand reference and get colour and font suggestions to align the variation. Local drafts, real-time presence. Every edit autosaves to IndexedDB, scoped to (experiment, variation, you), with a 24-hour TTL — refresh the tab and your work is still there. Per-variation edit locks and presence avatars show who else is in the editor, with a 15-second heartbeat and 90-second idle expiry. Pro keyboard shortcuts. Cmd+Z undo, Cmd+Shift+Z redo, Cmd+S save, Cmd+D duplicate, Cmd+Shift+P preview as visitor, Delete to hide, Esc to deselect or exit text edit, Cmd+/ for the shortcut sheet. Six change types, atomic save. Text, Style, Visibility, Image, Reorder, Insert. Inserted HTML goes through DOMPurify; variation CSS goes through a CSS allowlist; everything is sanitised before it ever reaches a real visitor. Dev mode — local development workflow. If you write your variations in code with the AvsB CLI, the popup gives you a per-tab dev toggle. Flip it on, run avsb dev in your project, and the extension hot-injects your local variation JS/CSS into just that tab — your other tabs (email, docs, the rest of the internet) stay untouched. Switch variations from the popup dropdown and the page swaps instantly. Choose between Page Reload (safe) and Hot Inject (experimental) for JS reload behaviour. Per-tab enablement persists to chrome.storage.local, so it survives Manifest V3 service-worker restarts and page refreshes. Live event debugger. The Events tab is a real-time feed of everything the AvsB snippet is tracking on the current page: exposures, clicks, pageviews, custom events, and segments. Each event shows its type badge, name, the experiment and variation it belongs to, and a relative timestamp. Clear the feed with one click. This is the same signal your dashboard receives — but inline, on the page, while you're testing. Snippet status, at a glance. The popup tells you whether the AvsB snippet is installed on the current page, lists every active experiment it has detected (live and dev), and shows the variation each visitor would currently see — read straight from the visitor cookie and [data-avsb-exp] markers. What stays the same as the AvsB platform you already use. The same auth, project, and experiment model as the AvsB dashboard. The same selector capture and confidence scoring used by the runtime applier. The same audit log entry written for every save. The same preview links, edit locks, and presence channel. Browser support. Chrome 114+ Open source. This extension is part of the AvsB platform. Need an account? Yes — you'll point the popup at your AvsB dashboard the first time you use the Edit Variation tab. Without an account you can still use the live event debugger and the snippet detector on any page that has the AvsB snippet installed.