Marketing Toolkit Site Inspector

Marketing Toolkit Site Inspector is the Chrome side panel for marketers and anyone else who audits websites for a living. Stop bouncing between five DevTools panels, a contrast checker tab, a screenshot tool, and a notepad to figure out what's on a page. Everything you need to inspect, audit, and tweak a site lives in one side panel that opens with a click — no console snippets to remember, no extensions to chain together. Built for marketers, SEO specialists, designers, and GTM implementers who run the same checks on dozens of pages a week. WHAT'S NEW Formerly "Site Inspector by Boggs." This release adds a Prebuilt Variables library for GTM and account-based sign-in, on top of refreshed MTK branding, a redesigned side panel with a light mode, and a stack of new tools added since v1.0. New v1.3.0 - Prebuilt Variables (Fields tab). A ready-to-paste library of GTM Custom JS variables for tracking needs that don't map to a single clicked element — Post / Listing ID (WordPress post/page ID or DMS vehicle listing ID), Clean Page Path, URL Query Parameter, Page Type (WordPress), and Logged-In User (WordPress) — each with a description and a one-click Copy button. - Account-based sign-in. Sign in with the same Marketing Toolkit account you use on boggsmtk.com and the panel unlocks based on your subscription — no separate extension login to set up or remember. - Fixed a "session expired" error that could block access even with an active subscription. v1.2.0 - Tags tab — a built-in marketing-tag debugger. Detect Google Tag Manager, GA4, Universal Analytics, Google Ads, and Meta Pixel IDs on any page, and watch analytics and pixel events fire live with a full parameter breakdown — no more juggling Tag Assistant and Pixel Helper. - Meta Ads enhancement control (Tools tab). Connect your Meta account, scan your active ads for Advantage+ / creative "enhancements," and switch them off in bulk or per ad — plus optional on-page auto-disable while you build ads in Ads Manager. - Smarter GTM Fields. New field types (String, Phone number, Email, Currency) with output normalization, generate-on-demand outputs (Custom JS variable, CSS selector, DOM Element variable, or form-completion validation JS), and Custom JS variables auto-named after the field. - Light mode + Settings tab. A full light theme that saves per browser, alongside the existing dark. - Streamlined Creative tab. Colors, Type, and Assets now live under one Creative tab with a quick segmented switcher. - Better keyword & heading audits. Per-tag keyword breakdowns (H1, H2, p…), plural matching, one-tap CSV export, and clickable H1–H6 count chips that filter the heading list. - Richer Inspect. See an element's full ancestry with selectors, its name / type / role attributes, and its parent form's details. Fixed - Keyword counter no longer counts a keyword inside a larger word (e.g. "sc" in "discounted") — matches are whole-word now. - Filled form fields no longer read as blank on pages with duplicate element IDs (common with Elementor responsive copies and popups). - Cleared a stray blue "selected text" highlight across the Inspect panel. - "Connect Meta account" now always gives feedback, and recovers cleanly from an expired session, instead of silently doing nothing. WHAT YOU GET Inspect anything in one click. Toggle Inspect Mode on, click any element, and see its tag, classes, computed font, colors, spacing, and a Webflow-style box model — without opening DevTools or hunting through the Elements tree. Keep clicking to inspect more; press Esc to stop. The time you used to spend expanding nested divs in DevTools just disappeared. Pull a complete color palette in seconds. Scan a whole page or just one subtree and get every text, background, border, outline, fill, and stroke color in use — deduped, with hex values. The built-in WCAG contrast checker shows AA/AAA pass/fail with a live preview. Not sure what colors you're looking at in a hero or screenshot? Draw a rectangle on the page and the extension screenshots and auto-samples the foreground and background. "Scan failures" walks every text element on the page and reports every contrast failure at once — turn a one-hour audit into a thirty-second scan. Audit typography you can't see at a glance. Get every font family, size, and weight on the page with usage counts, so you can find that one rogue Helvetica buried in a sidebar. Wondering how a brand font would feel on a client's site? Swap fonts live with any system or Google Font — across the whole page, by a specific detected font, or scoped to h1–h6 with optional italic / bold / UPPERCASE toggles. Need a clean type ramp? Pick a typographic scale and apply it to h1–h6/p/a/li in one click. What used to be a 20-minute Figma exercise becomes a slider you adjust on the live site. Run a full SEO heading audit instantly. Enumerate every h1–h6 with a per-level count summary so you can spot pages with two H1s or skipped heading levels at a glance. Sort by document order or by heading type. Paste keywords (one per line or comma-separated) and get case-insensitive frequency counts sorted by weight, with in-page highlighting — click any occurrence to scroll to it and flash it on the page. Export as CSV. Plus one-tap extraction of description, OpenGraph, Twitter card, and canonical metadata without ever inspecting the source. Download images in bulk. Stop right-click-saving thumbnails one at a time. The Assets tab shows a checkbox grid of every image on the page with natural dimensions; select all (or just a few), and one click saves them to a tidy mkt-images/ folder. Cache-buster query strings are deduped automatically. A second view shows every inline SVG with a preview and a copy-markup button. Test real responsive behavior. Pick a phone, tablet, or desktop from a curated dropdown with accurate dimensions and DPR — or enter custom W×H — and Chrome emulates the viewport in place via the debugger API, so real CSS media queries fire. Stop resiz…